Existe-t-il une alternative au CSS?

88

Existe-t-il une alternative au langage de formatage des feuilles de style au CSS? Ou CSS est-il le langage unique actuel pour faire des choses de type feuille de style?

J'ai regardé la rédaction de CSS sur Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) et quelques autres commentaires sur CSS et je me suis découragé par le manque de support complet du CSS dans les différents moteurs de mise en page, donc Je suis juste curieux de savoir s'il existe une alternative ou je dois apprendre à utiliser également les filtres CSS.

Merci pour vos informations.

JustADude
la source
10
CSS si bien *, c'est IE qui est cassé. (* Sauf CWG)
annakata
74
Si seulement il y avait une alternative ... Je frémis à l'idée de la quantité d'efforts humains qui ont été gaspillés à essayer de faire des choses en CSS qui devraient être simples mais ne le sont pas ...
PeterAllenWebb
8
la chose amusante est que vous devez taper style = "text / css" dans les balises liées au style ... :)
3
Ce n'est même pas non plus pour les programmeurs. En programmation, vous avez un ordre d'exécution disposé de haut en bas dans votre document. En CSS, vous n'avez même pas cela. Vous avez un tas de propriétés accessibles à l'aveugle et appliquées à un document entièrement différent, un réseau de chaînes complexe et statique que vous ne pouvez pas commencer à analyser tant que vous n'avez pas trouvé le frontal. Vous ne pouvez même pas dire d'où viennent certains effets, car les choses sont aveuglément en cascade dans tout le document.
GameKyuubi
1
CSS est déclaratif parce que le Web est fluide (l'utilisateur est-il sur un écran géant, un ordinateur portable, un smartphone ou un lecteur d'écran?), De sorte que les graphistes ne peuvent pas utiliser les techniques auxquelles ils sont habitués dans, par exemple, Photoshop, où la taille de la toile est sous leur contrôle. De même, parce que différents agents utilisateurs sont rendus différemment, vous devez dire «Voici ce que je veux» plutôt que «voici comment faire», comme le ferait un programmeur informatique. Cela ne veut pas dire que CSS ne pourrait pas utiliser beaucoup d'améliorations et devenir plus facile à utiliser; juste qu'il doit être de nature différente de ce à quoi les concepteurs et les codeurs sont habitués.
Canuck

Réponses:

64

CSS est la seule vraie option.

Le support du navigateur pour CSS ne devrait pas être une préoccupation majeure (dans la plupart des cas) une fois que vous avez appris les tenants et les aboutissants de CSS. La clé pour comprendre le CSS est que son but est de définir le style d'un document HTML et qu'il doit être séparé du contenu.

Vous aurez besoin de pratique pour apprendre à faire en sorte que les choses se dégradent gracieusement dans les navigateurs qui ne prennent pas en charge les fonctionnalités. L'idée de base ici est que vous devez faire en sorte que le plus petit dénominateur commun (Internet Explorer généralement) fonctionne "suffisamment bien" pour qu'il n'enlève rien à l'expérience utilisateur et fournisse les subtilités aux utilisateurs disposant de meilleurs navigateurs. Aussi, ne développez pas d'abord pour Internet Explorer. Laissez-le jusqu'au dernier, puis corrigez ses bogues. Faire les choses dans l'autre sens (IE d'abord) est beaucoup plus difficile.

Vous avez également la possibilité d'utiliser JavaScript pour définir des styles, mais cela n'est pas recommandé car vous devez éviter d'appliquer des styles dans JavaScript car JavaScript est destiné à la logique, pas aux styles.

Il y a 3 composants (selon la façon dont vous le regardez) pour une page Web:

  • HTML - pour le contenu
  • CSS - pour styliser votre contenu
  • JavaScript - pour appliquer une logique supplémentaire ou dynamique à votre contenu
Dan Herbert
la source
19
La ligne clé est la deuxième phrase: "La prise en charge du navigateur pour CSS ne devrait pas être une préoccupation majeure (dans la plupart des cas) une fois que vous avez appris les tenants et aboutissants de CSS." Les personnes qui se plaignent le plus de la rupture du CSS le savent le moins.
Rob Allen
1
+1: ... pour une excellente réponse. La suggestion de coder d'abord selon les normes, puis corriger les bogues dans le moteur de rendu grossier d'IE est certainement le moyen de le faire.
Jon Cage
Lorsque vous connaissez bien CSS, IE7 se comporte plutôt bien. @Rob: entendez, entendez +1.
Ryan Florence
1
créer une application avec css est une véritable torture pour un développeur d'applications. cependant, à l'exception de Cappuccino.org, il y a eu très peu de tentatives pour résoudre ce problème très évident. il y a des rumeurs selon lesquelles xcode produira bientôt html5, si cela se produit, cela mettra fin à ce chaos, non pas parce que xcode est le meilleur, il guidera les autres pour implémenter des SDK pour le Web, et les navigateurs viendront avec des composants d'interface utilisateur ( ils utiliseront toujours css et html pour l'afficher, mais peu importe, nous ne les verrons pas / les utiliserons / les connaîtrons / les apprendrons)
Devrim
3
@RobAllen Je dis la même chose à propos de Malbolge, mon langage de programmation préféré. Les gens qui pensent que c'est impossible ne le savent tout simplement pas assez bien pour se rendre compte à quel point c'est génial.
AR
68

Vous essayez tous de répondre à la question du point de vue d'un programmeur. Je pense que l'affiche originale cherchait une alternative plus graphique - une alternative qui offrirait un concept différent.

Même si CSS3 est adopté sur plusieurs navigateurs, je pense que la manière CSS de disposer les éléments (boîte en ligne, flottants, marges, etc.) est horrible. Je suis programmeur, mais mon père est graphiste, et je suis presque sûr que le logiciel de mise en page qu'ils utilisaient depuis 20 ans était à certains égards plus facile et plus avancé que CSS.

Rolf
la source
9
Exactement! CSS et et le flux de travail cognitif de la mise en page graphique ne sont pas au même niveau d'abstraction.
Alex
5
À
mon humble avis
13
"mon père éditeur et graphiste, et je baigne dans le graphisme depuis mon plus jeune âge, et j'ose dire que le logiciel d'édition qu'ils utilisaient il y a 20 ans était plus avancé et convivial que le HTML / CSS de nos jours." ... La différence est que votre père ne concevait pas pour différentes tailles d'écran, lecteurs d'écran, différentes versions de navigateur (avec des capacités différentes), etc. La conception pour l'impression est beaucoup, beaucoup plus simple que la conception pour l'affichage à l'écran, et donc CSS est plus complexe que les langages conçus pour mettre en page les médias imprimés.
J.Taylor du
1
J'ai recommandé Postscript comme langue et PDF comme moyen de livraison. J'ai été battu et rejeté d'une manière visqueuse. Les droïdes sur SO n'aiment pas les opinions.
ATL_DEV
1
@J Taylor, perdez-le. La conception utilisant n'importe quel support n'est pas facile. C'est une compétence, un art et une science tout autant que l'écriture de CSS et de HTML. Veuillez respecter les arts. Postscript a été conçu pour gérer différentes tailles de supports et il existe depuis des décennies. L'intérêt du HTML et du CSS est d'amener le navigateur Web à rendre quelque chose que PostScript fait par défaut. Le HTML et le CSS sont horribles!
ATL_DEV
41

Oui il y en a, ça s'appelle MOINS et ça résout vraiment la plupart des problèmes de lisibilité du code CSS.

Vous pouvez à la fois le compiler sur le serveur ou côté client à la volée avec less.js .

Pour la production, je recommande de configurer un script de construction qui le compile (dans NodeJS, c'est facile avec Grunt et grunt-contrib-less ).


Edit: Il existe également d'autres options qui méritent d'être mentionnées, même si j'utilise et recommande LESS.

SASS : Les gens de Ruby adorent celui-ci. Ce n'est pas un super-ensemble de CSS comme LESS, mais utilise plutôt sa propre syntaxe. Pour faire face à cela, ils ont développé SCSS, qui est un super-ensemble CSS similaire à LESS.

Stylet : comme LESS, il est codé en javascript, mais il est couramment utilisé à partir de Node.js. Je ne peux pas en garantir, car je ne l'ai pas encore essayé, mais il est très mature, donc s'il a une fonctionnalité que vous voulez, allez-y.

Turbine : Celui-ci a été codé en PHP. Pas beaucoup de traction.

Changer de CSS : Peut-être que les pirates informatiques Python voudront se pencher sur cela. Encore moins de traction.

Si vous vous sentez encore plus alternatif, il y a aussi CSS Cacheer , CSScaffold , DtCSS , CSSPP et même quelque chose de porneL .


Autres choses que vous voudrez peut-être vérifier:

Compass : Un framework de création CSS complet pour les gars de Ruby.

WinLESS : Un compilateur glisser-déposer LESS pour Windows, c'est super cool et vous devriez vraiment le vérifier.

LESS Elements , Preboot , LESSHat et even.less : Bibliothèques de mixins et de constantes pour LESS.

Bootstrap : un framework développé par Twitter. Également lié: HTML5 Boilerplate .

Normalize.css : une alternative aux réinitialisations CSS . Il existe de nombreuses réinitialisations, cependant, en tant que développeur d'un, je dois dire: la plupart sont de la merde. Si vous n'allez pas créer le vôtre, utilisez simplement celui-ci.


Mise à jour : depuis la version 1.4 , LESS @extendaussi. Assurez-vous d'utiliser la version 1.4+ si possible! Cela complète les raisons de choisir LESS plutôt que SASS, je pense.

Camilo Martin
la source
25
malheureusement, cela ne semble pas être une alternative au modèle lui-même.
n611x007
1
@naxa et pourquoi voudriez-vous cela? Le modèle est génial (feuilles de style), l'implémentation est terrible (CSS). Ces outils ne s'attaquent qu'à la mise en œuvre, c'est pourquoi ils sont si populaires.
Camilo Martin le
3
Parce que la compétition aide au progrès. Qu'entendez-vous par «feuilles de style»? Je l'associe à un fichier / une section en cascade et distinct du texte. Mais il y a plus, le modèle de boîte, utilisant des étiquettes et des conteneurs fusionnés dans le texte (avec html). Y a-t-il une implémentation [en] dépendance? - par exemple. les feuilles de style peuvent-elles s'appliquer à autre chose qu'à html / xml? (Que faire si vous avez écrit une feuille de style et que vous ne voulez pas l'appliquer à un texte non-gt / lt ou à un format binaire? Étiez-vous de réutiliser une implémentation de feuille de style ou là-bas seul dans la nature?)
n611x007
@naxa ce que je voulais dire, c'est que le concept de séparer le style du contenu est un excellent modèle, c'est ce que j'appelle des «feuilles de style». Et par implémentation, je voulais dire la syntaxe CSS, mais je suis d'accord qu'avoir MOINS au lieu de CSS, c'est comme utiliser CoffeeScript au lieu de Javascript. Et bien, il existe des formats de balisage binaire, donc je ne vois pas pourquoi vous ne pouviez pas avoir de feuilles de style binaires, mais si vous y réfléchissez, elles ne seraient probablement pas trouvées sous ce nom, car les feuilles de style résolvent un problème humain (écrire des styles pour de nombreux documents), ce n'est pas un problème de machine (ou nous utiliserions encore des <FONT>balises).
Camilo Martin
4
J'ai voté contre parce que ce sont des préprocesseurs, pas des alternatives. Ils reposent sur CSS et produisent du CSS à la fin. C'est donc juste un niveau d'abstraction supérieur - mais pas une alternative.
ProblemsOfSumit
17

Oui.

Comme tout le monde l'a dit, CSS est votre seule vraie option, mais il existe un autre langage pour les «choses de type de formatage de feuille de style» sur le Web, appelé eXtensible Stylesheet Language (XSL), en particulier le sous-ensemble de la spécification qui est devenu connu sous le nom de XSL-FO (mise en forme des objets) .

À un moment donné, selon à qui vous avez demandé, il était prévu de concurrencer ou de collaborer avec CSS .

Patrick McElhaney
la source
1
Le W3C a un bon résumé de la relation entre XSL et CSS: w3.org/Style/CSS-vs-XSL
Patrick McElhaney
8

Feuilles de style de grille (GSS): GSS

beaucoup mieux

Sam Adamsh
la source
2
SIte n'existe plus.
ATL_DEV
7

Le CSS largement répandu n'obtient pas un support complet dans tous les navigateurs ... comment une alternative (inconnue) devrait-elle atteindre cet objectif?

Scoregraphique
la source
3
En ayant un modèle de mise en page prévisible, intuitif et qui résout les problèmes dans les nouvelles versions au lieu de laisser des erreurs.
AR du
7

Eh bien, CSS 2.1 est assez bien pris en charge par presque tous les navigateurs. (sauf IE6) Il est facile d'écrire du CSS dégradé gracieusement une fois que vous connaissez le sous-ensemble sûr. (Pour que même les navigateurs non compatibles ne gâchent pas totalement la page)

Consultez http://www.quirksmode.org pour obtenir des conseils sur la compatibilité du navigateur CSS.

EFraim
la source
4
+1 pour quirksmode - chaque utilisateur commençant par CSS doit le savoir. J'ajouterais que IE7 est assez mauvais avec CSS2 aussi, et malheureusement la plupart du Web (et presque tous les réseaux d'entreprise) sont uniquement IE 6 et 7, donc vous devez faire attention avec CSS2.
Keith
6

s'est découragé par le manque de prise en charge complète du CSS dans les différents moteurs de mise en page

Je pense que jQuery a quelques moyens de rendre le css plus compatible entre les navigateurs, c'est-à-dire que si vous spécifiez certains attributs à l'aide de jQuery, il essaiera de s'assurer d'utiliser une solution de contournement pour les navigateurs qui ne prennent pas en charge certaines fonctionnalités.

Il existe également un projet appelé CleverCSS , vous voudrez peut-être le vérifier. Ce n'est cependant pas une alternative, juste une façon légèrement différente de le définir.

hasen
la source
Malheureusement, le lien est mort .. :-(
Août
4

J'ai regardé la rédaction de CSS sur Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) et quelques autres commentaires sur CSS et je me suis découragé par le manque de support complet du CSS dans les différents moteurs de mise en page, donc Je suis juste curieux de savoir s'il existe une alternative ou je dois apprendre à utiliser également les filtres CSS.

CSS est le norme. Il n'y a pas d'alternative.

Tous les navigateurs prennent en charge les fonctionnalités CSS de base. Chaque nouvelle version de chacune des (quatre?) Principales lignes de navigateur s'accompagne d'une prise en charge accrue de la norme, mais les sites Web qui utilisent ces fonctionnalités seront accessibles à tous les utilisateurs dans une version antérieure. Il y a deux réponses à cela:

  1. "Dégradation gracieuse" (ou son jumeau, "Amélioration progressive" - ​​google it), dans laquelle la page tire parti des fonctionnalités avancées si elles sont disponibles, tout en continuant à fonctionner si elles ne le sont pas.

  2. Quel est votre public? Si vous avez la chance de savoir que 99,8% des visiteurs de votre site Web utiliseront au moins IE7, vous n'avez pas à vous soucier des fonctionnalités CSS qui sont cassées dans IE6. Cela dépendra de votre propre entreprise, alors vérifiez d'abord les faits.

La pire chose que vous puissiez faire est de coder les bizarreries d'un seul navigateur spécifique, car cela conduit à une page qui ne fonctionne pas seulement sur d'autres navigateurs, mais même sur les versions ultérieures du même navigateur.

Marcus Downing
la source
4

Une alternative il y a longtemps JavaScript Style Sheets (JSSS) était une technologie de langage de feuille de style proposée par Netscape, si quelqu'un est intéressé, je vous enverrai des liens http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

voici la proposition http://www.w3.org/Submission/1996/1/WD-jsss-960822 je pense que c'était une bonne idée mais malheureusement css a gagné, mais peut-être que certaines parties ont été intégrées avec javascript ??

Peut-être aussi qu'au lieu d'utiliser css, vous pouvez utiliser svg pour certains effets de texte, regardez les exemples
http://msdn.microsoft.com/en-us/ie/hh410107.aspx
et quelques animations
http://svg-wow.org/ text-effects / text-effects.xhtml
quelques effets de boutons https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
voici un exemple plus cool pour styliser le texte que vous devriez regarder http: //www.hongkiat .com / blog / texte-vectoriel-évolutif /

Geomorillo
la source
3

La seule alternative est la prise en charge de la mise en forme obsolète que le HTML lui-même a, comme la <font>balise. Mais tu ne veux pas faire ça. 8-)

RichieHindle
la source
7
Si vous utilisez <font>, vous pourriez également ressentir une haine légèrement intense de la part d'autres développeurs Web comme moi: p (au moins s'ils doivent lire / corriger votre code ...)
Svish
3

Non, CSS est la voie à suivre maintenant. Il n'y a rien de mal avec le format lui-même (personnellement, je l'aime assez en fait), mais uniquement le support du navigateur - en particulier en ce qui concerne IE. Une fois que tous les principaux navigateurs prennent en charge CSS3 , les choses devraient bien se passer - même si je ne suis pas trop optimiste quant à la date à laquelle cela se produira.

Noldorin
la source
9
Rien de mal avec le format lui-même? Pour citer Jeff Atwood: "En bref, CSS viole la merde vivante du principe DRY. Vous vous répétez constamment et inévitablement. (Manque de variables donc nous devons répéter les couleurs partout. Manque d'imbrication donc nous devons répéter d'énormes blocs de CSS partout.) C'est aussi mon expérience, vous pouvez devenir bon dans ce domaine, mais cela n'a rien à voir avec son mérite en tant que langage
Peter
3

Il n'y a pas d'alternative au CSS pour le moment et c'est une bonne chose. Les fournisseurs de navigateurs, W3C, WHATWG, etc. ont assez de mal à s'entendre sur une seule spécification telle quelle, pouvez-vous imaginer ce qui se passerait s'il y avait plus d'une spécification?

Quoi qu'il en soit, j'ai trouvé qu'une fois que vous apprenez le CSS, vous acquérez des connaissances sur ce qui brise quoi et que vous apprenez à travailler avec ou à l'éviter.

J'espère que cela t'aides.

Darko Z
la source
11
"Il n'y a pas d'alternative au CSS pour le moment et c'est une bonne chose.", Je ne suis pas d'accord.
Gandalf
C'est une bonne chose dans la spécification étroite de Good que Darko a décrite.
Dom Vinyard
3

Oui ! sass peut être une option

Jaseem
la source
Je suis surpris que cela n'ait pas plus de votes positifs, étant donné sa popularité auprès de la foule de Ruby on Rails.
BlueRaja - Danny Pflughoeft
2

Non (principalement)

Si vous souhaitez créer des mises en page qui fonctionnent sur le nombre maximum de machines clientes, vous devrez apprendre le CSS.

Si vous pouvez limiter vos utilisateurs à IE8, Chrome, Safari et Firefox, vous pouvez probablement vous en tirer avec CSS2, sinon vous devrez apprendre toutes les différences avec CSS1, ainsi que la myriade de choses cassées - en particulier dans IE5 et 6 .

HTML 3.2 inclut des balises de formatage (telles que <font>ou <center>) mais vous ne pouvez pas faire grand-chose avec elles.

Pourquoi seulement la plupart du temps? - Si vous pouvez supposer que les utilisateurs ont Flash ou Silverlight et créer des applications Web pour eux. Ensuite, votre mise en page sera parfaite, mais elle aura besoin d'un plugin côté client (que tout le monde n'a pas) pour fonctionner. Je n'emprunterais cette voie que si vous avez besoin d'une interface utilisateur client vraiment riche.

Keith
la source
En fait, vous pouvez faire beaucoup avec les balises de formatage HTML 3.2 et la mise en page basée sur des tableaux. Par exemple, voici
Erich Kitzmueller
votre site actuel est également fait avec la table de mise en page. vous perdez * l'accessibilité, * la capacité de maintenir, * beaucoup de ces 30% d'internautes avec handycaps, * interprétation par machine (comme google) * ...
vikingosegundo
Rien de ce que vous pouvez faire avec 3.2 n'est acceptable dans le développement moderne pour des raisons de bande passante, d'accessibilité ou de maintenance. Il n'y a tout simplement aucun but à réduire l'échelle si vous n'y êtes pas obligé.
annakata
@ammoQ - oui, vous pouvez, mais cela prend du temps et c'est une jument pour changer. Revenez au début des années 2000 et la conception du site consistait à découper une grande image et à mettre le puzzle résultant dans une table. J'en ai fait beaucoup et ce n'est pas si bon comparé aux trucs modernes. Vous pouvez faire un site de cette façon, mais il semblera qu'il a été mis à jour pour la dernière fois en 2002.
Keith
2

Je conviens que l'état actuel du support CSS est assez horrible.

Je pense que la meilleure approche est d'écrire du CSS selon la norme , puis d'ajouter des correctifs pour tous les bits où les différents navigateurs ne se conforment pas correctement. Cela vaut souvent la peine d'éviter certains morceaux de CSS si vous le faites (les niveaux z par exemple ont des niveaux de support vraiment mixtes dans de nombreux navigateurs).

Jon Cage
la source
1

Zoli a raison. "xslt est une alternative"

XSLT transforme XML en une page Web rendue, tout comme CSS transforme le HTML en une page Web rendue. Notez simplement que vous ne pouvez pas mélanger XSLT avec HTML ou CSS avec XML.

J'ai utilisé à la fois CSS + XSLT pour créer des pages Web rendues.

Brian Kueck
la source
0

Adobe Postscript est l'alternative la plus probable au CSS. Le problème est qu'il nécessite Acrobat pour l'afficher sur le bureau ou sur le Web. Il est de loin supérieur au CSS et maintient l'intention de conception et les évolutions sur tous les appareils, y compris les imprimantes, les traceurs, les téléphones, les tablettes et à peu près tout avec un interpréteur Postscript.

Postscript a une courbe d'apprentissage ZERO, sauf si vous l'implémentez pour un appareil particulier. Il est programmé par des millions de programmeurs, graphistes, artistes, imprimeurs professionnels et même les utilisateurs d'ordinateurs domestiques les moins qualifiés. Tout ce que vous avez à faire est de sélectionner Imprimer ou Enregistrer à partir du menu de n'importe quelle application. Il prend en charge les entrées de liaison et de champ. Est-il consultable? C'est le cas et les documents basés sur PS apparaissent fréquemment dans les pages de recherche de Google.

Bien qu'il puisse être consulté à partir d'un navigateur Web sous la forme d'un PDF, il ne s'agit pas d'un langage de navigateur natif comme HTML et CSS. Pourquoi n'est-ce pas, si c'est si simple et si puissant? Au début du Web, Adobe était trop myope et trop gourmand pour ouvrir le langage. Ils voulaient vendre des licences à leurs moteurs PS et à leurs produits de création de contenu. Pour Adobe, offrir un navigateur PS était comme donner l'Oie et les œufs d'or.

ATL_DEV
la source
-6

xslt est une alternative

C'est plus puissant que le CSS.

Il est plus difficile de l'apprendre et de l'utiliser.

libeako
la source
4
en quoi XSLT est-il une alternative au CSS? Ils font des choses complètement différentes.
Mr. Shiny and New 安 宇
Je pense qu'ils peuvent meen XSL-FO, ce qui est bien mais AFAIK ne fonctionne pas dans un navigateur.
Jeremy French
1
Non, je ne parle pas de XSL-FO, juste de XSLT. Dans XSLT, vous pouvez exprimer des transformations, donc avec XSLT, vous pouvez exprimer tout type de formatage qui peut être exprimé avec HTML. OK, c'est moins que ce que CSS peut faire, mais je n'ai pas dit, que XSLT est une alternative parfaite. Les éléments XSLT sont également dans un fichier séparé, comme CSS, et à partir de HTML, on peut se référer au fichier XSLT. En raison de ces 2 propriétés, on peut mettre en forme son document HTML sans trop de redondance. XSLT fonctionne sous Firefox, IE, je n'en ai pas testé d'autres.
libeako
4
Non, Zoli. Vous ne pouvez pas mettre en forme avec XSLT. Vous pouvez interférer avec le code d'origine, le transformer, l'ajouter à l'id, le supprimer, etc. mais vous ne pouvez pas le
styliser