'>

feuilles de style en cascade (CSS)

Cascading Style Sheets ( CSS ) est un langage de feuille de style utilisée pour décrire la sémantique de présentation ( le look et le formatage ) d'un document écrit dans un langage de balisage. Son application la plus courante est aux pages Web de style écrites en HTML et XHTML , mais la langue peut également être appliquée à tout type de document XML , y compris plaine XML , SVG et XUL.

CSS est conçu principalement pour permettre la séparation du contenu du document ( écrit en HTML ou un langage de balisage similaire) à partir de la présentation des documents , y compris des éléments tels que la mise en page , les couleurs et les polices . [1] Cette séparation peut améliorer l'accessibilité des contenus , offrent plus de souplesse et de contrôle dans la spécification des caractéristiques de présentation , activer plusieurs pages à partager le formatage, et de réduire la complexité et la répétition dans le contenu structurel ( par exemple en permettant une conception de sites Web sans tableau ) . CSS peut également permettre la même page de balisage qui sera présentée dans différents styles pour différentes méthodes de rendu , comme à l'écran, dans la presse, par la voix ( lorsqu'il est lu par un navigateur basé sur la parole ou lecteur d'écran ) et le braille basée , dispositifs tactiles . Il peut également être utilisé pour permettre la page Web pour afficher différemment selon la taille de l'écran ou l'appareil sur lequel il est en cours de visualisation . Bien que l'auteur d'un document relie typiquement ce document dans un fichier CSS , les lecteurs peuvent utiliser une feuille de style différent , peut-être un sur leur propre ordinateur, pour remplacer celui que l'auteur a spécifié .

CSS spécifie un schéma de priorité de déterminer les règles de style s'appliquent si plus d'une règle match contre un élément particulier. Dans ce que l'on appelle en cascade , des priorités ou des poids sont calculées et attribuées à des règles , de sorte que les résultats sont prévisibles.

Les spécifications CSS sont maintenues par le World Wide Web Consortium (W3C). Internet type de support (type MIME) de text / css est homologué pour une utilisation avec CSS par la RFC 2318 ( Mars 1998) , et ils opèrent également un service de validation CSS libre.


syntaxe

CSS a une syntaxe simple et utilise un certain nombre de mots-clés anglais pour spécifier les noms des différentes propriétés de style.

Une feuille de style est constituée d' une liste de règles . Chaque règle ou ensemble de règles se compose d'un ou plusieurs sélecteurs , et un bloc de déclaration.
sélecteur

En CSS , les sélecteurs sont utilisés pour déclarer la partie du balisage d'un style s'applique à une sorte d'expression de match. Sélecteurs peuvent s'appliquer:

    tous les éléments d'un type spécifique , par exemple le deuxième niveau en-têtes h2
    aux éléments spécifiés par l'attribut , en particulier:
        ID: un identificateur unique pour le document,
        classe
    à des éléments en fonction de la façon dont ils sont placés par rapport à , ou imbriquées dans d' , d'autres dans l'arbre du document .

Les pseudo-classes sont utilisées dans les sélecteurs CSS pour permettre la mise en forme basée sur l'information qui est en dehors de l'arbre du document . Un exemple souvent utilisé d'une pseudo- classe est : hover , qui identifie le contenu que lorsque «points de« l'utilisateur l'élément visible, généralement en maintenant le curseur de la souris dessus . Il est annexé à un sélecteur comme en a: hover ou # elementid : hover . Une pseudo- classe classifie les éléments des documents, tels que : lien ou : visited , alors qu'un pseudo- élément permet une sélection qui peut être constituée d' éléments partiels , tels que : first-line ou : . Première lettre [3]

Les sélecteurs peuvent être combinés de multiples façons, notamment en CSS 2.1 , pour parvenir à une grande spécificité et de flexibilité. [4]
Bloc de déclaration

Un bloc de déclaration consiste en une liste de déclarations entre accolades . Chaque déclaration se compose d'une propriété, deux points (:) , et une valeur. S'il ya plusieurs déclarations dans un bloc , un point-virgule ( ;) doit être inséré pour séparer chaque déclaration. [5]
exemple

Voici un exemple en utilisant les règles ci-dessus:

sélecteur [ , sélecteur2 ...] [ pseudo-classe: ] {
 propriété : valeur;
 [ property2 : valeur2 ;
 ... ]
}
/ * Commentaire * /

utiliser

Avant CSS, presque tous les attributs de présentation de documents HTML sont contenues dans le balisage HTML , toutes les couleurs de police, les styles d'arrière-plan , les alignements des éléments , des frontières et de tailles devaient être explicitement décrit , souvent à plusieurs reprises , dans le code HTML . CSS permet aux auteurs de se déplacer beaucoup de cette information dans un autre fichier , la feuille de style , ce qui entraîne beaucoup plus simple HTML.

Rubriques (éléments h1 ) , sous-titres (H2) , sous- sous-rubriques (H3) , etc , sont définis structurellement en utilisant HTML. Dans la presse écrite et sur l'écran , choix de la police , la taille , la couleur et l'accent de ces éléments est de présentation.

Avant de CSS, les auteurs de documents qui voulaient attribuer ces caractéristiques typographiques , disons, tous les titres h2 devaient répéter balisage de présentation HTML pour chaque occurrence de ce type de rubrique . Cela a rendu les documents plus complexes , plus grand, et plus difficile à maintenir. CSS permet la séparation de la présentation de la structure . CSS peut définir la couleur , la police, l'alignement du texte , la taille , les frontières , l'espacement, mise en page et de nombreuses autres caractéristiques typographiques et peuvent le faire indépendamment de l'écran et vues imprimés. CSS définit également des styles non - visuels tels que la vitesse et l'accent avec lequel le texte est lu par les lecteurs de texte sonores . Le W3C est maintenant obsolète l'utilisation de tous présentation balisage HTML . [Citation nécessaire]

Un "externe" fichier CSS, comme décrit ci-dessous, peut être associée à un document HTML en utilisant la syntaxe suivante:

<lien rel="stylesheet"> href="path/to/file.css"

Un code CSS interne peut être tapé dans la section head du code. Le codage est démarré avec la balise de style . Par exemple,

<style type="text/css">

sources

Informations CSS peut être fourni par différentes sources. Informations de style CSS peut être dans un document séparé ou il peut être intégré dans un document HTML. Plusieurs feuilles de style peuvent être importées . Différents styles peuvent être appliqués en fonction du périphérique de sortie étant utilisée , par exemple , la version de l'écran peut être très différente de la version imprimée, de sorte que les auteurs peuvent adapter la présentation de manière appropriée pour chaque support .

La feuille de style avec la priorité la plus élevée commande l'affichage de contenu. Déclarations non établies dans la source de plus haute priorité sont transmis à une source de priorité inférieure , tels que le style de l'agent utilisateur . Ce processus est appelé en cascade.

L'un des objectifs de CSS est également de permettre aux utilisateurs plus de contrôle sur la présentation. Quelqu'un qui trouve rubriques en italique rouge difficile à lire peut appliquer une feuille de style différent . Selon le navigateur et le site Web , l'utilisateur peut choisir parmi différentes feuilles de style fournies par les concepteurs , ou peut supprimer tous les styles supplémentaires et consulter le site en utilisant le style par défaut du navigateur, ou peut annuler tout simplement l' italique style de titre rouge sans altérer les autres attributs.
Système de priorité CSS ( par ordre décroissant)
Priorité Haute CSS Source Type Description
1 utilisateur défini plupart des navigateurs ont la fonctionnalité d'accessibilité : un utilisateur défini CSS
2 Inline Un style appliqué à un élément HTML via la propriété ' style' HTML
3 Type de support une définition de propriété s'applique à tous les types de médias , à moins qu'un CSS spécifique défini médias
4 Importance La valeur ' ! Important » écrase les types de priorité précédents
5 spécificité Selector Un sélecteur contextuel spécifique (# rubrique p ) écrase définition générique
6 Règle afin Dernière déclaration de règle a une priorité plus élevée
7 héritage Parent Si une propriété n'est pas spécifiée , il sera héritée d'un élément parent
8 définition de propriété CSS en HTML document CSS règle ou le style CSS inline écrase une valeur par défaut du navigateur
9 par défaut du navigateur La priorité la plus faible : la valeur par défaut du navigateur est déterminée par les spécifications de valeur initiale du W3C
histoire
Håkon Wium Lie , directeur technique de la société Opera Software et co -créateur de la série web CSS

Les feuilles de style ont existé sous une forme ou une autre depuis les débuts de Standard Generalized Markup Language (SGML) dans les années 1980 . Cascading Style Sheets ont été développés comme un moyen de créer une approche cohérente pour fournir des informations de style pour les documents Web .

Comme HTML a grandi, il est venu à englober une plus grande variété de capacités stylistiques pour répondre aux demandes des développeurs web. Cette évolution a donné le concepteur plus de contrôle sur l'apparence du site, au coût de plus complexe HTML. Variations dans les implémentations de votre navigateur Web , comme ViolaWWW et WorldWideWeb [6], en apparence du site cohérent difficile , et les utilisateurs ont moins de contrôle sur la façon dont le contenu Web a été affichée. Robert Cailliau a voulu séparer la structure de la présentation [6] L'idéal serait de donner à l'utilisateur différentes options et le transfert de trois différents types de feuilles de style : . Une pour l'impression , l'un pour la présentation à l'écran et l'autre pour l'éditeur fonction [6].

Pour améliorer les capacités de présentation web , neuf langages de feuille de style différents ont été proposés pour ( W3C) liste de diffusion www - style du World Wide Web Consortium . Sur les neuf propositions , dont deux ont été choisis en tant que fondement pour ce qui est devenu CSS: Cascading Style Sheets HTML ( CHSS ) et des feuilles de style proposition basée sur les flux (SSP) . CHSS , une langue qui a une certaine ressemblance avec le CSS d'aujourd'hui, a été proposé par Håkon Wium Lie en Octobre 1994. Bert Bos travaillait sur un navigateur appelé Argo , qui utilise son propre langage de feuille de style appelé SSP . [7] Lie et Yves Lafon rejoint Dave Raggett d'étendre le navigateur Arena pour soutenir CSS comme une application de banc d'essai pour le W3C . [8] [ 9] [10 ] Lie et Bos ont travaillé ensemble pour élaborer la norme CSS ( «H» a été retiré du nom parce que ces feuilles de style peuvent également être appliquées à d'autres langages de balisage HTML en plus ) . [11]

Contrairement aux langages de style existants comme DSSSL et FOSI , CSS a permis le style d'un document qui sera influencé par de multiples feuilles de style. Une feuille de style pourrait hériter ou "cascade" d'un autre , ce qui permet un mélange de préférences stylistiques contrôlée à parts égales par le concepteur du site et de l'utilisateur .

La proposition de Lie a été présenté à la « mosaïque et le Web " conférence ( appelée plus tard WWW2 ) à Chicago , Illinois , en 1994 , et de nouveau avec Bert Bos en 1995. [11] A cette époque, le W3C a déjà été mis en place, et a pris un intérêt dans le développement de CSS . Il a organisé un atelier à cette fin présidé par Steven Pemberton. Il en est résulté W3C ajoutant travail sur CSS pour les livrables de la commission d'examen de l' éditorial HTML ( ERB ) . Mensonge et Bos étaient le personnel technique principal sur cet aspect du projet, avec d'autres membres , y compris Thomas Reardon de Microsoft , participant ainsi . En Août 1996 Netscape Communication Corporation a présenté un langage de feuille de style alternative appelée Style Sheets JavaScript ( JSSS ) . [11] La spécification n'a jamais été terminé et est obsolète. [12] À la fin de 1996 , CSS était prêt à devenir fonctionnaire , et le CSS niveau 1 recommandation a été publiée en Décembre.

Développement du langage HTML , CSS et le DOM avait tout eu lieu dans un groupe, la Commission de révision de rédaction HTML ( ERB ) . Au début de 1997 , l' ERB a été divisé en trois groupes de travail : Groupe de travail HTML, présidé par Dan Connolly du W3C ; groupe de travail DOM , présidé par Lauren Wood de SoftQuad et le groupe de travail CSS, présidé par Chris Lilley du W3C .

Le groupe de travail CSS a commencé aborder les questions qui n'avaient pas été traités avec CSS niveau 1 , ce qui entraîne la création de CSS niveau 2 le 4 Novembre 1997. Il a été publié comme une recommandation du W3C , le 12 mai 1998. CSS niveau 3 , qui a débuté en 1998, est encore en cours de développement à partir de 2009 .

En 2005, les groupes de travail CSS ont décidé de respecter les exigences des normes plus strictement . Cela signifie que les normes déjà publiés , comme CSS 2.1 , CSS 3 Selectors et CSS 3 texte ont été retirées de Recommandation Candidate de travail Projet de niveau .
Difficulté avec l'adoption

La spécification CSS 1 a été achevée en 1996. Microsoft Internet Explorer 3 [11] a été publié cette année , avec un soutien limité pour les CSS. Mais il était plus de trois ans avant n'importe quel navigateur web réalisé la mise en œuvre quasi- complète de la spécification. Internet Explorer 5.0 pour Macintosh, expédié en Mars 2000, a été le premier navigateur à avoir plein ( plus de 99 pour cent) CSS 1 support [13], surpassant Opéra, qui avait été le chef de file depuis son introduction sur le support des CSS 15 mois plus tôt . D'autres navigateurs ont suivi peu de temps après , et beaucoup d'entre eux parties mises en œuvre plus de CSS 2 . En Août 2010 , aucun navigateur ( fini) a pleinement mis en œuvre CSS 2 , avec des niveaux de mise en œuvre différentes (voir Comparaison des moteurs de mise en page ( CSS ) ) .

Même si les premiers navigateurs tels que Internet Explorer 3 [11] et 4, et Netscape 4.x avait soutien CSS , il était généralement incomplète et avait de nombreux bugs qui empêchaient leurs implémentations d'être utilement adoptées.

Quand, plus tard 'version 5 ' des navigateurs a commencé à offrir une mise en œuvre assez complet de CSS , ils étaient encore incorrecte dans certains domaines et étaient marquées par des incohérences, des bugs et autres bizarreries . La prolifération de ces incohérences CSS liés et même la variation dans le support de fonctionnalité a rendu difficile pour les concepteurs d'atteindre une apparence cohérente à travers les navigateurs et plates-formes . Certains auteurs ont eu recours à des solutions de contournement comme CSS hacks et des filtres CSS.

Problèmes avec l'adoption inégale des navigateurs de CSS, avec errata de la spécification originale , a conduit le W3C à réviser la norme CSS 2 dans CSS 2.1 , qui se rapprocha à un instantané de travail de soutien CSS courant dans les navigateurs HTML. Certaines propriétés CSS 2 qu'aucun navigateur en œuvre avec succès ont été abandonnées , et dans quelques cas , les comportements définis ont été modifiés pour apporter la norme en conformité avec les implémentations existantes prédominant. CSS 2.1 devient une recommandation candidate le 25 Février 2004, mais CSS 2.1 a été tiré vers l'arrière de travail Projet de statut le 13 Juin 2005, [14] et ne revint à la Recommandation statut de candidat le 19 Juillet 2007. [15]

Dans le passé, certains serveurs Web sont configurés pour servir tous les documents avec l'extension de nom de fichier. Css [16] comme type MIME application / x- pointplus [17] plutôt que text / css . À l'époque, il y avait un produit logiciel sur le marché pour convertir les fichiers PowerPoint en Compact Slide Show fichiers en utilisant l' extension. Css . [18]
variations

CSS a différents niveaux et profils. Chaque niveau de CSS s'appuie sur la dernière , en ajoutant généralement de nouvelles fonctionnalités et généralement notée CSS 1 , CSS 2 , CSS 3 et 4 CSS . Les profils sont généralement un sous-ensemble d'un ou plusieurs niveaux de CSS construits pour un dispositif particulier ou d'une interface d'utilisateur. Actuellement, il ya des profils pour les appareils mobiles , les imprimantes et les téléviseurs. Profils ne devraient pas être confondus avec les types de médias , qui ont été ajoutés dans CSS 2 .
CSS 1

La première spécification CSS pour devenir une recommandation officielle du W3C est CSS niveau 1 , publiée en Décembre 1996. [19] Parmi ses fonctionnalités , le soutien aux

    Propriétés de la police comme police et l'accent
    Couleur du texte, de milieux et d'autres éléments
    Les attributs de texte tels que l'espacement entre les mots , les lettres et les lignes de texte
    Alignement du texte, des images , des tableaux et autres éléments
    Marge , bordures, remplissage et le positionnement pour la plupart des éléments
    Identification unique et la classification générique de groupes d'attributs

Le W3C ne maintient plus le CSS 1 Recommandation [20].
CSS 2

Spécification CSS niveau 2 a été développé par le W3C et publié une recommandation en mai 1998. Un sur-ensemble de CSS 1 , CSS 2 comprend un certain nombre de nouvelles fonctionnalités comme le positionnement absolu , relatif, et fixe des éléments et des z-index , le concept de types de supports , le soutien aux feuilles de style auditives et le texte bidirectionnel , et de nouvelles propriétés de la police comme ombres .

Le W3C tient plus la recommandation CSS 2 . [21]
CSS 2.1

CSS niveau 2 révision 1 , souvent dénommée « CSS 2.1" , corrige les erreurs de CSS 2 , supprime caractéristiques mal pris en charge ou non entièrement interopérables et ajoute des extensions du navigateur déjà mises en œuvre à la spécification. Afin de se conformer au processus du W3C pour standardisation des spécifications techniques, CSS 2.1 allait et venait entre travail Projet de statut et recommandation statut de candidat depuis de nombreuses années . CSS 2.1 premier est devenu une recommandation candidate le 25 Février 2004, mais il a été revenue à un projet de travail le 13 Juin 2005, pour un examen plus approfondi . Il est revenu à la Recommandation Candidate le 19 Juillet 2007, puis mis à jour deux fois en 2009. Toutefois, étant donné les changements et clarifications ont été faites , il s'est de nouveau de retour à la dernière version de travail le 7 Décembre 2010 Appel .

CSS 2.1 est allé à la Recommandation Proposée le 12 Avril 2011. [22] Après avoir été examiné par le Comité consultatif du W3C , il a finalement été publié comme une recommandation du W3C , le 7 Juin 2011. [23]
CSS 3
" CSS3 » redirige ici . Pour le code aéroport CSS3 , voir Montréal / Les Cèdres Airport.

Contrairement à CSS 2 , qui est un grand spécification unique définissant diverses caractéristiques , CSS 3 est divisé en plusieurs documents séparés appelés «modules» . Chaque module ajoute de nouvelles capacités ou étend les fonctions définies dans CSS 2 , en préservant la compatibilité descendante. Les travaux sur CSS niveau 3 a commencé à l'époque de la publication de la recommandation CSS 2 d'origine. Les premiers CSS 3 projets ont été publiés en Juin 1999. [24]

En raison de la modularisation , différents modules ont une stabilité et des statuts différents [25] En Juin 2012, il ya plus de cinquante modules CSS publiés du groupe de travail CSS [24], et quatre d'entre eux ont été publiés sous forme de recommandations formelles. . :

    2012-06-19 : Media Queries
    2011-09-29: Espaces de noms
    2011-09-29: Les sélecteurs de niveau 3
    2011-06-07 : Couleur

Certains modules (y compris les milieux et les frontières et la mise en page multi- colonne , entre autres) ont le statut de Recommandation Candidate (RC) et sont considérés comme moyennement stable. Au stade de CR , les implémentations sont invités à déposer préfixes des fournisseurs. [26]
CSS 4

Il n'existe pas une seule spécification de CSS4 intégré [27], car il est divisé en modules séparés. Cependant , il ya des modules de «niveau 4 ». [28]

Depuis CSS3 divisé la définition de la CSS langue en modules , les modules ont été autorisés à se stabiliser de façon indépendante. La plupart des modules sont de niveau 3 - elles s'appuient sur les choses de CSS 2.1 . Quelques niveau 4 modules existent ( comme les valeurs d'image , Fond et bordures , ou des sélecteurs ) , qui s'appuient sur la fonctionnalité d'un module précédent de niveau 3. D'autres définissent entièrement nouvelles fonctionnalités , telles que Flexbox .

Ainsi, alors il n'ya pas de " CSS4 « monolithique qui va être travaillé après " CSS3 " est complètement terminé , les modules de niveau 4 peuvent être collectivement désignés comme " CSS4 " .
Support des navigateurs
Renseignements: Comparaison des moteurs de mise en page ( Cascading Style Sheets )

Parce que tous les navigateurs analyser correctement le code CSS , a développé des techniques connues comme hacks CSS codage peut soit filtrer navigateurs spécifiques ou cibler des navigateurs spécifiques ( généralement les deux sont connus comme filtres CSS ) . Le premier peut être défini comme CSS filtrage hacks et celui-ci peut être définie comme CSS hacks de ciblage. Les deux peuvent être utilisés pour afficher ou masquer les parties de la CSS pour les différents navigateurs . Ce résultat est obtenu soit par l'exploitation bizarreries CSS de manutention ou des bugs dans le navigateur, ou en profitant du manque de soutien pour les parties des spécifications CSS . [29] L'utilisation de filtres CSS , certains concepteurs sont allés aussi loin que la prestation différente CSS à certains navigateurs pour assurer conceptions rendre aussi attendus. Parce que les navigateurs Web très précoces étaient soit totalement incapable de gérer CSS, CSS ou rendues très mal , les concepteurs aujourd'hui souvent utilisent couramment filtres CSS qui empêchent complètement ces navigateurs d'accéder à toute la CSS. Support d'Internet Explorer pour le CSS a commencé avec IE 3.0 et a augmenté progressivement avec chaque version. En 2008, la première version bêta d'Internet Explorer 8 a offert son soutien pour CSS 2.1 dans son meilleur mode de normes web.

Un exemple d'un navigateur CSS bug historiquement bien connu était le Internet Explorer boîte modèle bug où les largeurs de boîte sont interprétées incorrectement dans plusieurs versions du navigateur , résultant en des blocs qui sont trop étroits lorsqu'il est affiché dans Internet Explorer, mais corriger dans les normes navigateurs conformes. Le bug peut être évité dans Internet Explorer 6 en utilisant le bon doctype en documents (X) HTML. CSS hacks CSS et filtres sont utilisés pour compenser les bugs comme celui-ci , un seul des centaines de bugs CSS qui ont été documentés dans les différentes versions de Netscape , Mozilla Firefox , Opera et Internet Explorer (y compris Internet Explorer 7 ) . [30] [ 31 ]

Même lorsque la disponibilité des navigateurs CSS CSS capables fait une technologie viable , l'adoption du CSS était encore freinée par les luttes avec les navigateurs de designers incorrects mise en œuvre et le soutien CSS CSS inégale. Même aujourd'hui , ces problèmes continuent de rendre l'entreprise de conception CSS plus complexe et plus coûteuse que cela devait être , et les tests cross-browser reste une nécessité. Autres raisons de la non - adoption continue de CSS sont: sa complexité apparente , le manque de familiarité des auteurs avec la syntaxe CSS et techniques requises, mauvais support des outils d'authoring , les risques posés par l'incohérence entre les navigateurs et l'augmentation des coûts des tests .

Actuellement, il ya une forte concurrence entre le moteur de rendu WebKit utilisé dans Apple Safari et Google Chrome, le moteur de KHTML semblable à celui utilisé dans le navigateur Konqueror de KDE, et le moteur de rendu Gecko de Mozilla utilisé dans Firefox - . Chacun d'eux est leader dans les différents aspects de CSS [la clarification nécessaire exemples seraient utiles ] En Août 2009 , Internet Explorer 8 , Firefox 2 et 3 ont raisonnablement compléter les niveaux de mise en œuvre de CSS 2.1 . [32]
limitations

Certaines limites indiquées sur les capacités actuelles de CSS sont les suivants:

Sélecteurs sont incapables de monter
    CSS offre actuellement aucun moyen de sélectionner un parent ou un ancêtre d'un élément qui répond à certains critères. [33] Les sélecteurs CSS niveau 4, qui est encore en version de travail statut , propose un tel sélecteur [34], mais seulement dans le cadre de la " compléter " profil sélecteur , pas le« profil rapide »utilisé dans le style CSS dynamique . [35] Un schéma de sélection plus avancés (comme XPath) permettrait aux feuilles de style plus sophistiqué . Les principales raisons pour lesquelles le groupe de travail CSS rejetant précédemment propositions pour les sélecteurs de parents sont liés aux performances du navigateur et les problèmes de rendu supplémentaires . [36]
Limites de contrôle verticaux
    Alors que le positionnement horizontal des éléments est généralement facile à contrôler , le placement vertical est souvent intuitif , alambiqué , ou carrément impossible. Des tâches simples , comme un élément de centrage vertical ou faire un pied de page à être placé pas plus haut que bas de fenêtre , que ce soit [33] nécessitent des règles de style complexes et peu intuitives , ou des règles simples mais largement pris en charge.
Absence d'expressions
    Il n'existe actuellement aucune possibilité de spécifier les valeurs de propriété comme des expressions simples (comme margin-left : 10% - 3em + 4px ;). Ce serait utile dans une variété de cas, comme le calcul de la taille des colonnes soumises à une contrainte sur la somme de toutes les colonnes. Toutefois, un projet de travailler avec un calc () valeur pour remédier à cette limitation a été publié par le CSS WG [37]. Versions Internet Explorer 5 au 7 support d'une expression exclusive () de déclaration [38], avec des fonctionnalités similaires . Cette déclaration d'expression ( ) propriétaire n'est plus supporté à partir Explorer 8 partir Internet, sauf dans les modes de compatibilité . Cette décision a été prise pour " le respect des normes , les performances du navigateur , et des raisons de sécurité " . [38]
L'absence de déclaration de la colonne
    Bien que possible en courant CSS 3 (en utilisant le module column-count ), [ 39 ] les présentations avec plusieurs colonnes peut être complexe à mettre en œuvre dans CSS 2.1 . Avec CSS 2.1 , le processus est souvent effectuée à l'aide des éléments flottants , qui sont souvent rendues différemment par les différents navigateurs , différentes formes d'écran d'ordinateur , et les différents ratios d'écran figurant sur ​​les moniteurs standards.
Vous ne pouvez pas déclarer explicitement nouveau périmètre indépendamment de la position
    Règles de portée pour des propriétés telles que z-index regard de l'élément parent le plus proche avec une position : absolute ou position : attribut relative. Ce couplage étrange a des effets indésirables. Par exemple, il est impossible d' éviter de déclarer un nouveau champ d'application lorsque l'on est forcé d'ajuster la position d'un élément , ce qui empêche une utilisation de la portée souhaitée d'un élément parent.
Comportement dynamique pseudo-classe non contrôlable
    CSS en œuvre pseudo-classes qui permettent un degré de rétroaction des utilisateurs de l'application conditionnelle de styles alternatives. Une pseudo- classe CSS " : hover " , est dynamique ( équivalent de JavaScript " onmouseover " ) et a le potentiel d'abus (par exemple , la mise en œuvre popups curseur proximité) [40], mais CSS n'a pas la possibilité pour un client de désactiver (pas de " désactiver "-comme la propriété) ou de limiter ses effets ( pas de " nochange "-comme valeurs pour chaque propriété ) .
Vous ne nommer règles
    Il n'est pas possible de nommer une règle CSS , ce qui permettrait ( par exemple ) des scripts côté client de se référer à la règle même si ses changements de sélection.
Vous ne pouvez pas inclure des styles à partir d'une règle dans une autre règle
    Styles CSS souvent doivent être dupliqués dans plusieurs règles pour obtenir un effet désiré , provoquant un entretien supplémentaire et nécessitant des tests plus approfondis .
Vous ne pouvez pas cibler un texte spécifique sans modifier le balisage
    Outre l' : first-letter pseudo- élément, on ne peut pas cibler des gammes spécifiques de texte sans avoir besoin d' utiliser des éléments endroit - porte .

avantages

La séparation entre contenu et présentation
    CSS facilite la publication de contenus dans de multiples formats de présentation sur la base de paramètres nominaux . Paramètres nominaux sont les préférences des utilisateurs explicites, différents navigateurs Web , le type d' appareil utilisé pour afficher le contenu ( un ordinateur de bureau ou Mobile Internet Device ), l'emplacement géographique de l'utilisateur et de nombreuses autres variables .
Site cohérence à l'échelle
    Principaux articles : séparation de la présentation et le contenu et le style feuille ( développement web)
    Lorsque CSS est utilisée de manière efficace, en matière d'héritage et « en cascade », une feuille de style globale peut être utilisée pour affecter et des éléments de style échelle du site . Si la situation se présente que le style des éléments doit avoir besoin d'être modifiés ou ajustés , ces changements peuvent être apportés par la modification des règles dans la feuille de style globale . Avant CSS, ce genre d'entretien a été plus difficile , coûteux et chronophage .
Bande passante
    Une feuille de style , interne ou externe , précisera le style une fois pour toute une gamme d'éléments HTML sélectionnés par catégorie, du type ou de la relation aux autres. C'est beaucoup plus efficace que de répéter des informations de style inline pour chaque occurrence de l'élément . Une feuille de style externe est habituellement stocké dans le cache du navigateur , et peut donc être utilisé sur plusieurs pages sans être rechargés , réduisant encore le transfert de données sur un réseau.
page reformatage
    Article principal: amélioration progressive
    Avec un simple changement d' une ligne , d'une feuille de style différent peut être utilisé pour la même longueur d'onde . Cela présente des avantages en matière d'accessibilité , tout en fournissant la capacité d'adapter une page ou un site à différents dispositifs cibles. En outre , les appareils n'ont pas la capacité de comprendre le style toujours afficher le contenu .
Accessibilité
    Sans CSS , les concepteurs Web doivent généralement exposer leurs pages avec des techniques telles que les tableaux HTML qui entravent l'accessibilité pour les malvoyants utilisateurs (voir la conception web Tableless # Accessibilité).

cadres CSS
Voir aussi: framework CSS

Cadres CSS sont des bibliothèques pré-préparés qui sont destinés à permettre plus facilement le style, plus conforme aux normes de pages Web en utilisant le style langue Fiches cascade . Cadres CSS layout-grid - connexes comprennent Blueprint , 960 grille, et YUI grilles CSS. Comme programmation et de script bibliothèques de langue , des cadres CSS sont généralement incorporés comme externe. Feuilles CSS référencés dans le <head> HTML. Ils fournissent un certain nombre d'options toutes prêtes pour la conception et la pose sur la page web . Alors que beaucoup de ces cadres ont été publiés , certains auteurs utilisent principalement pour le prototypage rapide , ou pour apprendre à partir de , et préfèrent « artisanat » CSS qui est approprié à chaque site publié sans la conception , la maintenance et télécharge frais généraux d'avoir de nombreuses fonctionnalités non utilisées dans le style de la place [41].
placement

CSS 2.1 définit trois schémas de positionnement :

Le flux normal
    Articles en ligne sont disposés de la même façon que les lettres dans les mots dans le texte , l'un après l'autre à travers l'espace disponible jusqu'à ce qu'il n'y ait plus de place , puis le démarrage d'une nouvelle ligne ci-dessous. Éléments de la pile des blocs verticalement , comme les paragraphes et comme les éléments d'une liste à puces. Le flux normal comprend également le positionnement relatif des blocs ou en ligne articles et d'exécution dans des boîtes.
flotteurs
    Un élément flotté est retiré de la circulation normale et décalé vers la gauche ou vers la droite aussi loin que possible dans l'espace disponible . Autre contenu s'écoule ensuite le long de l'élément flottant .
Le positionnement absolu
    Un élément en position absolue n'a pas sa place dans et aucun effet sur le flux normal des autres articles. Il occupe sa position assignée dans son récipient de manière indépendante des autres éléments [42].

Position : haut, bas , gauche et droite

Il ya quatre valeurs possibles de la propriété position . Si un élément est positionné d'une manière autre que statique , puis les autres propriétés haut, bas , gauche et droite sont utilisés pour spécifier des décalages et des positions .

statique
    La valeur par défaut place l'élément dans le flux normal
relative
    L' élément est placé dans le flux normal , puis déplacé ou décalé par rapport à cette position. Les éléments des flux ultérieurs sont énoncées comme si la question n'avait pas été déplacé.
Absolute
    Indique le positionnement absolu . L'élément est positionné par rapport à son ancêtre non statique la plus proche.
Correction d'
    L'article est complètement positionné dans une position fixe sur l'écran alors que le reste du document défile [ 42 ]

Flotter et effacer

La propriété float peut avoir l'une des trois valeurs . Éléments en position absolue ou fixe peut pas flotter . Autres éléments circuler normalement autour des éléments flottants , sauf s'ils sont empêchés de le faire par leur propriété claire .

à gauche
    L' article flotte à la gauche de la ligne qu'elle serait apparue à , d'autres éléments peuvent s'écouler autour de son côté droit.
droite
    L' article flotte à la droite de la ligne qu'elle serait apparue à , d'autres éléments peuvent s'écouler autour de son côté gauche.
effacer
    Forces de l'élément à apparaître sous ( 'clear' ) éléments flottants vers la gauche ( clair : à gauche) , à droite ( clair : droite) ou des deux côtés ( clear: both ).
Publié par Drupal Study