11 meilleurs éditeurs CSS - Révisé

1. Styliseur

Compatibilité: les fenêtresCaractéristique Notable: Code Grid, poignées de taille, Bullseye, coloration en deux clics

Stylizer est un éditeur CSS absolument unique qui se concentre sur édition CSS en temps réel. Vous pouvez simplement entrer une adresse Web dans son navigateur intégré qui prend en charge les définitions de style de Firefox 3.5 et IE7. Toutes les règles CSS connexes seront chargées et vous pourrez les modifier avec son interface familière de type pointer-cliquer..

L'éditeur vient avec un Grille de code fonctionnalité qui rend votre édition CSS plus pratique car vous pouvez voir le résultat immédiatement après avoir modifié une valeur. Aussi avec son diagnostic Bullseye fonction, vous pouvez afficher les éléments associés sur certaines parties du site et les modifier avec des points et des clics. Autres fonctionnalités comme Poignées de Taille vous permet d'ajuster visuellement la position d'un élément CSS, et avec Coloration en deux clics Cette fonction vous permet d’obtenir un sélecteur de couleur semblable à Photoshop pour choisir n’importe quelle couleur, par exemple, de la police de votre site. Oh, ai-je mentionné que toutes ces modifications sont effectuées en temps réel, résultat immédiatement visible?

Avec Styliseur il est simplement impossible de faire une erreur CSS, car cela vous empêcherait de saisir une valeur incompatible avec la propriété CSS correspondante. Cependant, le logiciel ne parvient parfois pas à charger certains fichiers CSS en raison d’une erreur critique inexpliquée..

Styliseur vient avec la version de base et finale. Bien que la version de base soit totalement gratuite, la version Ultimate vous est proposée pendant 14 jours à compter de l’installation. Elle vous offre ensuite 85 $ pour que vous puissiez continuer à utiliser ses fonctionnalités avancées comme Bullseye..

2. TopStyle

Compatibilité: les fenêtresCaractéristique Notable: Inspecteur de style, Style Sweeper, CSS Tidy

L'éditeur CSS de TopStyle commence à vous surprendre dès sa première configuration, lorsque vous pouvez choisir une définition de style affichant uniquement les propriétés et les valeurs prises en charge par Firefox, Internet Explorer, Safari ou même l'iPhone OS 2.0, ce qui est pratiquement utile pour les environnements multi-plateformes. concepteur web.

Parmi toutes les fonctionnalités que j'ai trouvées Inspecteur de style est particulièrement utile, car il fonctionne comme un panneau permettant d'inclure n'importe quelle propriété CSS avec une simple interface pointer-cliquer. Une fois que vous avez choisi toutes les propriétés CSS de votre choix, le code source est automatiquement généré pour vous faire gagner du temps, grâce à un codage répétitif et fatiguant..

Un autre bon truc à propos de Style top indique-t-il la compatibilité du navigateur sous son inspecteur de style, que vous pouvez voir soit que la propriété CSS est entièrement prise en charge par certaines versions du navigateur Web comme Internet Explorer 7, ou que c'est terriblement buggé.

L'éditeur est une version d'essai avec une fonctionnalité limitée et vous pouvez exploiter tout son potentiel à 79,95 $..

3. Maître de style

Compatibilité: Windows, Mac OS XCaractéristique Notable: Modèle de feuille de style

Considéré comme un maître, Style Master a bien fait de créer un environnement d’édition CSS pour tous les niveaux d’expertise. Le logiciel fournit non seulement l'éditeur WYSIWYG qui lisse le flux de travail pour les débutants CSS, mais vous donne également accès à des informations très détaillées sur chaque propriété CSS, auxquelles les experts peuvent se référer. Vous pouvez parcourir et choisir les propriétés CSS par catégorie ou par ordre alphabétique..

Peut-être que le point le plus unique est que l'éditeur contient près de 20 modèles de feuille de style utiles pour vous, et il n'est pas surprenant qu'un maître de style ait des règles CSS très propres, bien organisées et professionnelles définies dans son modèle intégré..

Vous pouvez profiter du logiciel complet pendant 30 jours et payer 59,99 $ ou 29,99 $ pour une licence d’éducation afin de libérer tout son potentiel..

4. Xyle Scope

Compatibilité: MacCaractéristique Notable: Mode de sélection, groupe intelligent, intégration d'éditeur de texte

Xyle Scope est un incontournable éditeur CSS gratuit pour Mac, comme c'est un éditeur CSS vraiment professionnel qui vous permet de surfer sur le site tout en peaufinant son CSS directement dans l'éditeur.

Le navigateur de Xyle vient avec le mode de navigation normal et le mode de sélection qui fonctionne assez semblable au plugin Firefox, Firebug qui fournit la visualisation et l’édition de la source CSS, sauf que l’éditeur vous permet de sauvegarder les valeurs CSS modifiées dans leur emplacement d’origine.

En utilisant le 'Groupe intelligent'fonctionnalité, vous êtes en mesure de filtrer toutes les règles qui influent sur la façon dont les liens sont affichés ou les responsables de la mise en page, vous pouvez même affiner le résultat avec sa fonction de recherche intégrée, pas plus de méthode d'essai et d'erreur!

Xyle Scope offre également une intégration avec des éditeurs de texte externes tels que BBEdit pour un travail de codage plus pratique et plus économe en énergie; il suffit de faire une modification et l'éditeur de texte ou Xyle Scope met automatiquement à jour toutes les modifications pour vous..

5. CSS rapide

Compatibilité: les fenêtresCaractéristique Notable: Surligneur de syntaxe, achèvement de code, formatage CSS

Rapid CSS est la voie à suivre pour une édition CSS plus confortable, plus pratique et plus complexe. Il possède son propre éditeur de texte entièrement personnalisable avec des fonctionnalités utiles telles que la coloration syntaxique, la complétion de code et la référence CSS intégrée pour une expérience de codage simple..

En ce qui concerne la propreté de votre CSS, vous pouvez formater votre feuille de style CSS, comme pour la réorganiser par type CSS ou créer des propriétés abrégées pour que la feuille de style ait l’air plus confortable et plus agréable. Le validateur de code intégré assure également que votre feuille de style est non seulement propre mais également valide.

L'éditeur est livré avec une période d'évaluation de 30 jours avec 30 utilisations, vous pouvez obtenir la version complète à 29,85 $.

6. Studio de style

Compatibilité: les fenêtresCaractéristique Notable: Assistant CSS, IntelliStyle

La beauté de Style Studio réside dans sa fonction d’assistant CSS, qui permet d’obtenir un effet CSS immédiat avec quelques points et clics..

Par exemple, vous pouvez sélectionner un assistant de police, puis choisir une famille de polices et définir sa taille, puis son style, son poids, sa variante et son boom! Les règles sont insérées dans la feuille de style en tant que code CSS entièrement validé..

Les fonctions d’assistant incluent également la couleur, les bordures, le texte, le positionnement, la classification et enfin les règles de filtrage, à peu près tout ce que vous pouvez penser de CSS. Ces assistants sont très utiles car vous n'avez pas besoin de taper à plusieurs reprises pour obtenir certains effets CSS compliqués. IntelliStyle est une autre caractéristique noble, qui fonctionne comme la complétion de code pour que vous choisissiez certaines propriétés CSS pour votre conception..

L'inconvénient de cet éditeur serait la prise en charge de la définition de style de son navigateur obsolète, car elle ne prend en charge que IE6 et, enfin, pas de Firefox..

Vous avez 30 jours pour utiliser le logiciel et 49,99 $ pour l'acheter..

7. CSSEdit

Compatibilité: MacCaractéristique Notable: Inspecteur de rayons X, éditeur visuel, générateur de sélecteur

Créez des sites Web magnifiques, innovants et à chargement rapide avec une application magnifique, innovante et rapide, c'est CSSEdit de MacRabbit. Depuis les fonctionnalités telles que Selector Builder jusqu'à l'environnement source intelligent, CSSEdit est conçu pour tous les niveaux d'expertise..

Avec cet éditeur très abouti, vous êtes censé voir les modifications apportées à votre feuille de style CSS en temps réel, sans fatiguer les opérations de chargement-actualisation. L'inspecteur de rayons X est également créé pour diagnostiquer le code CSS d'une partie spécifique du site..

La partie innovante du CSSEdit est probablement son Générateur de sélecteur cela vous permet de décrire votre style CSS avec un anglais simple, sans grand intérêt pour un expert mais utile pour un débutant absolu.

La version de démonstration vous interdit d'enregistrer un fichier de moins de 2 500 caractères, tandis que vous pouvez payer 39,95 $ pour supprimer toutes les restrictions..

8. Editeur EngInSite CSS

Compatibilité: les fenêtresCaractéristique Notable: Outil de mesure en mode Aperçu

Si vous êtes un concepteur sérieux qui se soucie de la spécification CSS correcte, du bon placement CSS ou de la feuille de style CSS qui doit être entièrement validée, alors l'éditeur CSS EngInSite peut être votre éditeur favori..

Dans cet éditeur, vous pouvez ajouter un sélecteur de classe, d’id et d’élément à l’aide de son inspecteur intégré. Vous pouvez également convertir la couleur en valeur hexadécimale ou RVB, une caractéristique très rare pour un éditeur CSS. Vous pouvez observer votre résultat dans le panneau de prévisualisation avec des outils de mesure pour vous assurer que tous vos éléments de conception sont sur la bonne position..

L'éditeur vient également avec l'achèvement du code, mais il est un peu bogué, alors je dirais que c'est un semi-achèvement du code. Autrement, tout l'éditeur est agréable à utiliser, à l'exception du fait que l'éditeur est assez obsolète en termes de prise en charge de la définition de style du navigateur, car il ne prend en charge que la définition de style d'IE6..

9. Stylesheet Maker

Compatibilité: les fenêtresCaractéristique Notable: Tags CSS

Stylesheet Maker est un autre éditeur CSS standard qui offre une surface de codage propre avec un panneau d'explorateur de fichiers, ainsi que des outils CSS utiles pour vous aider à définir les polices, la couleur, les marges, les bordures, etc..

Comparé à plusieurs éditeurs CSS comme CSS rapide ou Studio de style, Maker a moins de fonctionnalités mais une interface très propre, ce qui est bon pour certains débutants qui ne veulent pas compliquer les choses, ou pour les ninjas CSS qui veulent tout ce qui est minimal et confortable.

Bien que cet éditeur soit conçu pour un utilisateur intermédiaire, sa fonctionnalité Balises CSS peut vous aider à créer simplement une règle CSS avec des balises par clic..

Posséder cet éditeur coûte 34 $, ou vous pouvez l'acheter avec un autre logiciel CoffeeCup en achat groupé..

10. CSS Arduo

Compatibilité: les fenêtresCaractéristique Notable: Nœud, CSSTidy

Arduo CSS est un nouvel éditeur de CSS conçu pour vous plaire avec son interface intuitive et facile à utiliser. Avec son interface épurée et sa coloration syntaxique, vous êtes assuré de créer et d’éditer un fichier CSS sans trop de problèmes ni d’interruptions. Vous pouvez également utiliser sa fonctionnalité 'Node' pour définir les règles CSS par points et par clics..

Pour ceux qui trouvent que votre feuille de style est trop lourde, l'outil CSSTidy de l'éditeur peut vous aider à l'optimiser et à éliminer tout code inutile..

L'éditeur est disponible gratuitement sur son site officiel.

11. CSS simple

Compatibilité: Windows, Mac OS XCaractéristique Notable: Importation de fichier CSS, interface pointer-cliquer, base de données de polices supplémentaire

Tout comme son nom, Simple CSS a tout ce dont un concepteur a besoin pour une édition CSS simple. Vous pouvez importer un fichier CSS dans l'éditeur et le modifier en quelques clics, consulter le résultat dans son panneau de prévisualisation et extraire immédiatement le code source..

Bien que vous puissiez importer presque tous les fichiers CSS dans l'éditeur, vous ne pouvez afficher qu'une seule règle CSS à la fois en un clic. Parfois, votre importation entraînait une erreur en raison de sa limitation telle que non supportée par @rules. En outre, l'éditeur lui-même n'est pas si flexible, vous pouvez uniquement sélectionner "Auto" ou "Hériter" pour la propriété z-index, mais pas directement lui attribuer une valeur..

Néanmoins, c'est gratuit et très pratique pour les concepteurs qui ont besoin d'une solution rapide.

Bonus: Plus d'éditeurs et d'outils

Bien qu'ils ne soient pas exactement des éditeurs CSS, ces outils suivants sont quelque chose que vous voudrez peut-être avoir pour l'édition de CSS..

Pyromane

L'outil de développement Web le plus populaire et le plus puissant qui inspecte le code HTML, modifie le style CSS et visualise les modifications en temps réel, disponible sous forme de plug-in pour le navigateur Web Firefox..

Utilisation de CSS

Une extension pour Firebug qui vous permet de numériser plusieurs pages de votre site pour voir quelles règles CSS sont réellement utilisées sur votre site..

Développeur web

Une extension Firefox pour vous permettre de faire beaucoup de choses intéressantes, telles que l'affichage des sources CSS ou la désactivation de certaines feuilles de style CSS à des fins de conception ou de développement..

Bloc-notes++

Un éditeur de code source gratuit et un bloc-notes de remplacement prenant en charge plusieurs langues, y compris CSS. Contient des fonctionnalités telles que la fonction d'achèvement pour vous aider à construire votre conception CSS.

Coda

Un éditeur de texte avancé avec éditeur CSS intégré qui vous fournit deux modes d'édition CSS pour une expérience de conception plus flexible, capable de voir le résultat instantanément après les modifications apportées.

IDE NetBeans

Un environnement de développement intégré open-source et professionnel avec la référence CSS la plus complète dans sa fonctionnalité de complétion de code.

Studio Aptana

Un environnement de développement Web complet qui combine de puissants outils de création pour HTML, CSS et JavaScript, prend actuellement en charge les formats HTML5 et CSS3..

WebStorm

L'EDI de JetBrain qui implémente l'auto-complétion pertinente pour tout, y compris les CSS, vous pouvez également être averti des problèmes de CSS à la volée.