Je me suis intéressé à la conception et au développement Web à la fin des années 90. Merde, il y a combien de temps. Et comme c'était terrible. Je veux dire, créer un site Web et le publier était une entreprise délicate, et les clients pouvaient être comptés sur les doigts.

Il me semblait que la plupart des développeurs se souviennent de ces jours, ou du moins de la prochaine décennie, mais non. Récemment, je suis tombé sur un tweet , dont l'auteur a été surpris par la technique de mise en place des coins arrondis avant d'apparaître border-radius(faire une image séparée pour chaque coin arrondi et le positionner avec précision). Je me souviens encore de la façon dont nous avons attendu avec impatience lorsque cela border-radiusest devenu la norme et que le préfixe des navigateurs en a été supprimé.

D'un autre côté, beaucoup n'ont que peu essayé la conception de sites Web dans le passé et croient que rien n'a changé depuis lors.

Cet article est pour tout le monde. L'histoire du CSS et de la conception Web, si je me souviens bien.

(Veuillez garder à l'esprit que les souvenirs et la recherche sont étroitement liés dans cet article. Par conséquent, je ne peux pas garantir que tout est vraiment correctement défini, en particulier en termes de relations de cause à effet. Vous pouvez lire l' historique CSS officiel du W3C , qui est beaucoup plus court, de meilleures correspondances réalité et contient beaucoup moins de malédictions).

(De plus, l'article bénéficierait grandement de plus d'illustrations, mais l'écriture du texte m'a pris trop de temps).

Les premiers jours

Il n'y avait pas de CSS au début.

C'était très mauvais.

Mon artefact préféré de l'époque est le livre d'O'Reilly, que j'ai étudié HTML: The Definitive Guide . Plusieurs éditions de ce guide ont été publiées au milieu et à la fin des années 90. Le livre ne parle vraiment que de HTML, sans aucune mention de CSS. Je ne l'ai plus et je ne trouve pas de numérisations sur Internet, mais il y a une page de la nouvelle édition de ce livre HTML & XHTML: The Definitive Guide (nous parlerons de XHTML plus tard). Voici des conseils pour la conception de sites Web de pointe des années 90:

"Surlignez clairement l'en-tête et le pied de page avec des lignes horizontales."

Non, ce n'est pas çaborder-top. Ça<hr>. Le titre de la page est presque certainement centré sur<center>.

La page a un arrière-plan, une police et une couleur de texte standard. En partie parce que ce guide présente d'abord les concepts initiaux; en partie parce que c'est un livre en noir et blanc et en partie parce qu'il reflète la réalité - colorer quelque chose sur une page était une énorme hémorroïde.

Disons que vous voulez rendre tous les en-têtes rouges. Pour ce faire, mettez les balises suivantes:

<H1><FONT COLOR=red>...</FONT></H1>

... pour chaque titre . J'espère que vous ne décidez jamais de passer au bleu!

Oh, et les balises HTML ont été écrites sur mesure en majuscules. Je ne me souviens pas pourquoi nous avons tous décidé que c'était une bonne idée. C'était peut-être avant que la coloration syntaxique n'apparaisse dans les éditeurs de texte (j'avais 12 ans et j'ai utilisé le Bloc-notes), et les balises de titre sont plus faciles à distinguer du texte principal.

Ainsi, l'entretien du site était un véritable cauchemar. Beaucoup ont décidé qu'il était plus facile de ne pas utiliser de design, juste les paramètres par défaut. Dans un sens, c'était même agréable: les navigateurs vous permettent de modifier ces valeurs par défaut, afin que vous puissiez lire le texte sur Internet sous la forme que vous souhaitez.

Je me souviens comment une solution alternative intéressante est apparue sur de nombreux sites Geocities: un tout nouveau look pour chaque nouvelle page web. Merde, non? Faites ce que vous voulez sur chaque nouvelle page.

C'était peut-être le summum de la conception Web.

Enfer, ces jours me manquent. Web complètement ouvert, pas de twitter, pas de facebook. Si vous avez quelque chose à dire, vous devez créer votre propre site Web. C'était génial. Personne ne savait ce qu'il faisait; Je parie que la grande majorité des concepteurs de sites Web à l'époque étaient des adolescents amateurs ignorants (comme moi) qui copient des pages d'autres adolescents amateurs ignorants. La moitié d'Internet était constituée de portails créés par des fans sur les animorphes, avec des écrans d'avertissement inexplicables indiquant que le site fonctionnait mieux avec une résolution d'écran de 640x480 (sans doute chaque adolescent de 12 ans avec une résolution d'écran insuffisante devrait acheter un nouveau moniteur). Tous les gars sympas utilisent Internet Explorer 3 - le navigateur le plus avancé. Cependant, certains perdants sont toujours assis dans Netscape Navigator, donc sur la page principale, vous devez placer le GIF animé "Best in IE".

C'était aussi l'ère des «couleurs sécurisées Internet» - une palette de 216 couleurs, où chaque canal égalait00, 33, 66, 99, ccOu ff, parce que certains sont encore resté 256 couleurs moniteur! Aujourd'hui, nous n'y pensons pas, en tenant pour acquis la couleur 24 bits.

En fait, une grande partie de ce que nous tenons maintenant pour acquis était alors incompréhensible et difficile. Vous voulez la même navigation sur chaque page du site? D'accord, pas de problème: copiez / collez le code de navigation sur chaque page. Si vous mettez à jour ce code, assurez-vous de rafraîchir chaque page - mais vous oublierez probablement de le faire sur certaines pages, et le site ressemblera à un site archéologique, avec plusieurs couches de pages de différentes "époques".

Il est beaucoup plus facile d'utiliser des cadres.lorsque la fenêtre du navigateur est divisée en une grille et qu'une page distincte est chargée dans chaque cellule ... mais alors les gens sont confus s'ils accèdent à une page séparée sans cadres, comme c'est souvent le cas lorsqu'ils proviennent d'un moteur de recherche comme AltaVista (je ne peux pas croire que J'explique les cadres, mais personne ne les a vraiment utilisés depuis 2001 ... savez-vous ce que sont les iframes? Ici, la lettre 'i' signifie en ligne , c'est -à-dire des cadres intégrés pour les distinguer des cadres réguliers sur tout l'écran)

PHP n'a même pas encore obtenu ce nom, et personne n'en a entendu parler. Cet étrange mélange de Perl et CGI était vraiment difficile à comprendre, et il ne fonctionnait pas sur votre propre ordinateur, les erreurs étaient difficiles à trouver et à diagnostiquer, et Geocities ne le supportait pas de toute façon. Si vous êtes vraiment un développeur chanceux et avancé, votre hôte a travaillé sur le serveur Web Apache, puis vous pouvez utiliser son langage d'assemblage dynamique intégré Server Side Include et écrire quelque chose comme ceci:

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

C'est bon. Apache verra des commentaires spéciaux et insérera le contenu des fichiers référencés. L'inconvénient est que vous ne pouviez rien vérifier sur votre ordinateur, toute la navigation était manquante, car ici votre navigateur Web a interprété ces instructions comme des commentaires HTML normaux. Bien sûr, installer Apache à la maison était impossible, car vous avez un ordinateur , pas un serveur .

Malheureusement, tous les anciens sites ont disparu depuis longtemps et sont recouverts de cendres de l'histoire, dans lesquelles tout ce qui n'a pas été fait cette semaine est déjà dépassé et oublié depuis longtemps. Le Web était censé rendre l'information éternelle, mais à la place, une grande partie de celle-ci est devenue éphémère. Je manque ces moments où presque tous mes amis avaient leurs propres sites. Votre Twitter et Instagram en tant que présence en ligne est un mauvais substitut.

... Alors, regardons le site Web de Space Jam.

Exemple: Space Jam

Si vous ne le savez pas, Space Jam est le plus grand film de tous les temps. Il parle de la carrière de basket-ball extrêmement courte du lapin Bugs Bunny, qui, avec Michael Jordan vivant, sauve la planète d'une sorte de menace des extraterrestres. Puis vint une série de suites très réussies et extrêmement drôles de ce film.

Et nous sommes vraiment très chanceux que 24 ans après son lancement, le site Space Jam fonctionne toujours ! Ici et maintenant, nous avons l'occasion d'étudier la meilleure réalisation de conception Web du modèle de 1996.

Tout d'abord, notez que chaque page du site est statique. Et ceci est une page statique avec une extension .htm, pas.htmlcar avant Windows 95, nous étions toujours liés à des noms de fichiers 8.3 (huit caractères pour le nom, trois caractères pour l'extension). Je ne sais pas pourquoi cela importait dans l'URL, car personne n'exécutait Windows 3.11 sur un serveur Web, mais ça va.

Voici le CSS de la page principale:

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

Haha, je plaisante! Qu'est-ce que c'est que CSS? "Space jam" a été publié un mois plus tôt que cette norme n'a été publiée (en fait, il y a une ligne dans le code source de la page, mais je suis sûr qu'elle a été ajoutée beaucoup plus tard pour styliser certains liens vers les règles qui devaient être insérées car obligations légales).

Faites attention à l'emplacement extrêmement précis des hyperliens pour la navigation. Cet exploit a été accompli de la même manière que tout le monde en 1996: utiliser des tables.

En fait, les tableaux ont un avantage fonctionnel sur CSS dans la mise en page, ce qui était très important à l'époque, car avec Ctrl enfoncé, vous pouviez sélectionner une celluletables ou même quelques-uns. Un tel «rétro-débogueur» particulier montre comment les cellules sont situées dans la disposition. C'était génial parce que le premier débogueur Firebug normal n'est sorti qu'en 2006 - une décennie entière plus tard!

Le balisage de ce tableau pour une raison inconnue est rempli de lignes vierges, mais si vous les supprimez, il ressemble à ceci:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

Ce sont les deux premières lignes, y compris le logo. Vous avez l'idée. Tout est positionné à l'intérieur des cellules avec alignet valign; souvent appliqué rowspanet colspan, il y a peu <br>pour ajuster le positionnement vertical sur une ligne, si nécessaire.

D'autres artefacts fantastiques peuvent être trouvés sur la page, y compris un en-tête qui contient la syntaxe Apache SSI! Il doit s'être cassé tranquillement pour tout le monde lorsque le site est passé à l'hébergement pendant de nombreuses années de sa vie. Maintenant, il est hébergé sur Amazon S3. Tu connais Amazon? Librairie?

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

D'accord, regardez la page Jam Central . Pour l'authenticité, j'ai réduit la résolution dans le navigateur à 640 × 480 (bien que pour une immersion complète, j'aurais dû réserver un peu plus d'espace vertical pour la barre de titre, la barre des tâches et cinq à six barres d'outils IE).

Faites attention aux cadres: le logo dans le coin supérieur gauche renvoie à la page de destination, enregistrant correctement une place sur l'écran afin de ne pas répéter toute cette navigation, et dans le coin supérieur droit il y a une putain de bannière publicitaire qui a été bloquée de sept manières différentes. Les trois parties sont des pages distinctes.

Notez également le texte rouge complètement illisible sur un fond texturé, l'un des signes les plus sûrs de la conception Web des années 90. Vous pouvez demander, pourquoi ne pas utiliser un arrière-plan normal pour le texte? Tu es un idiot. Comment faire? Après tout, l'attribut backgroundn'est qu'avec <body>! Vous pouvez mettre un tableau, mais les tableaux ne prennent en charge qu'un fond uni, il aura l'air ennuyeux!

Mais attendez, quel est ce nouveau widget de navigation? Comment avez-vous réussi à bloquer tous les liens? Une autre table? Eh bien, non, bien que souvent les concepteurs aient rempli la table de morceaux d'une image tranchée. Mais ici, nous avons imagemap , une fonction HTML depuis longtemps oubliée. Il suffit de vous montrer la source:

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

Je pense que tout est plus ou moins clair ici. L'attribut usemapattache une carte d'image, qui est définie comme un ensemble de zones cliquables magnifiquement codées par certaines coordonnées.

Et ça marche toujours! En HTML! Vous pouvez l'utiliser dès maintenant! Bien que probablement pas.

Grille des vignettes

Considérez une autre page au hasard. Par exemple, "Photo du film". (Attendez, photo ? A cette époque, ne connaissait pas les mots "cadre" et "capture d'écran"? Bon, d'accord ...)

Un autre ensemble de cadres, mais arrangés différemment.

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

Ici, les développeurs ont fait une chose importante: ils ont indiqué non seulement l'image d'arrière-plan (opaque), mais aussi la couleur d'arrière - plan. Sinon, du texte blanc sortirait sur un fond blanc si l'image d'arrière-plan ne se chargeait pas.

(Une autre différence intéressante par rapport au développement moderne. Aujourd'hui, de nombreux concepteurs supposent que toutes les ressources seront téléchargées, et parfois ils présentent le téléchargement comme un inconvénient qui doit être contourné. Mais ils ne restent pas assis sur la connexion à fibre optique de San Francisco à dix mètres de la principale canal).

Mais revenons à la page elle-même. Les grilles de vignettes étaient un problème de conception Web classique de l'époque. Le principal problème est que vous souhaitez placer des images côte à côteet HTML par défaut les empile dans une grande colonne. A cette époque, le designer n'avait qu'un seul outil: une table. Sur notre site, il est structuré comme suit:

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

Une grille de vignettes 3 × 3 formatée à la discrétion du navigateur (la dernière image sur une ligne séparée ne fait pas vraiment partie du tableau). Le nombre de colonnes ne dépend pas de la largeur de l'écran, mais à cette époque, tout le monde avait de petits écrans, donc cela ne dérangeait pas trop le concepteur. Ici, les images n'ont pas de légendes, mais comme chacune d'elles est placée dans une cellule séparée, elles peuvent facilement être ajoutées.

C'était l'approche d'affichage de vignettes la plus avancée en 1996. Nous reviendrons sur ce petit casse-tête de l'interface utilisateur à quelques reprises; Vous pouvez voir de vrais exemples (et du code source avec un exemple de balisage) sur une page séparée .

Jetons un coup d'œil à la taille des images «en taille réelle, en couleur et de qualité Internet» du film par souci d'intérêt.

Hé, oui, ils font moins de 16 Ko! Cette image se chargera plus rapidement qu'en neuf secondes!

(Je me souviens du problème avec la vidéo intégrée, il ne pouvait pas être résolu jusqu'à ce que la balise HTML5 apparaisse <video>quelques années plus tard. Jusque-là, je devais utiliser un plug-in propriétaire, et ils étaient tous terribles).

(Oui, au fait: un cadre de couleur a été ajouté aux images à l'intérieur des liens par défaut. Ici, la présence du lien est évidente, donc le cadre semble redondant et ennuyeux. Avant CSS, ils devraient être désactivés pour chaque image individuelle en utilisant l'attribut <img border=0>).

La disposition habituelle de ces temps

C'est là que nous avons commencé, et ça a été nul. Si vous vouliez un style commun sur plus de quelques pages, vos possibilités étaient très limitées et le copier-coller restait le seul outil. Le site Web Space Jam a choisi de ne pas se soucier de la cohérence de la conception, comme tant d'autres.

Puis vint CSS. Ce fut un vrai miracle . Toutes ces répétitions de code sur chaque page ont disparu. Vous voulez faire tous les gros titres d'une couleur particulière? Aucun problème:

H1 {
    color: #FF0000;
}

Bam! Et c'est tout. Quel que soit le nombre de titres <h1>dans votre document, chacun d'eux sera rouge vif et vous n'aurez plus jamais à y penser. Encore mieux: vous pouvez mettre ce fragment dans votre propre fichier et appliquer ce choix esthétique douteux à chaque page de votre site sans presque aucun effort! La même chose s'applique à votre magnifique arrière-plan, à la couleur du lien et à la taille de la police dans les tableaux.

(N'oubliez pas d'encapsuler le contenu des balises <style>dans des commentaires HTML, sinon les navigateurs plus anciens sans prise en charge CSS les afficheront sous forme de texte).

Il n'est pas nécessaire d'appliquer des balises à tout dans une rangée. CSS a introduit les concepts de «classes» et «ID», donc le style ne s'étend qu'aux éléments spécialement marqués. Sélecteur de typeP.importants'applique uniquement aux paragraphes de la classe <P CLASS="important">, mais #headern'affecte que <H1 ID="header">(la différence est que les identificateurs doivent être uniques dans le document et que les classes peuvent être utilisées autant de fois). En utilisant ces outils, vous créez efficacement vos propres balises, en obtenant une version individuelle de HTML unique à votre site!

C'était un énorme bond en avant, mais à cette époque, personne (probablement) n'avait pensé à utiliser CSS pour la mise en page. Lorsque la recommandation CSS 1 a été publiée en décembre 96 , elle ne touchait guère à la mise en page, elle ne séparait que les fonctions HTML existantes des balises auxquelles elles étaient attachées. Nous avions des couleurs et un fond de police grâce à <FONT COLOR>et<BODY BACKGROUND>. La seule chose qui affectait au moins à distance l'emplacement des objets sur la page était la propriété floatéquivalente <IMG ALIGN>, qui tirait l'image sur le côté et incluait le flux de texte autour d'elle, comme dans un journal. Pas si impressionnant.

Mais ce n'est pas surprenant. Il n'y avait pas de véritables outils de mise en page en HTML, sauf les tableaux, et les propriétés des tableaux sont trop difficiles à généraliser en CSS ou à associer à la structure des balises, donc il n'y avait rien à ajouter à CSS 1. Nous venons juste d'automatiser un peu, par exemple, l'utilisation de balises <FONT>, donc la conception web est devenu moins fastidieux et moins sujet aux erreurs, le code de la page est devenu plus propre et beaucoup plus facile à entretenir. Un très bon pas en avant, et tout le monde l'a accepté avec plaisir, mais les tableaux sont restés le principal outil de mise en page.

Mais c'était normal. Dans l'ensemble, votre blog n'a besoin que d'un titre et d'une barre latérale. Les tableaux font très bien avec cela, et cette structure de base convient à la plupart des situations. Il n'est pas si difficile de copier / coller quelques lignes <TABLE BORDER=0>et <TD WIDTH=20%>.

Pendant plusieurs années, c'était la norme. Tableaux de mise en page, CSS pour ... enfin, pour le style. Couleurs, tailles, gras, souligné. Il y avait même une astuce aussi stupide quand un lien n'était souligné que lorsque le curseur de la souris était dessus. La beauté!

(Fait amusant: le code HTML de la plupart des services de messagerie n'est pas encore venu de cette époque).

(Et puis je suis arrivé dans l'industrie, à l'âge de 11 ans, sans avoir la moindre idée de ce que je faisais, et j'ai essentiellement étudié avec les autres gars de 11 ans, qui n'avaient également aucune idée de ce qu'ils faisaient. Un énorme morceau du réseau a été créé par des adolescents de 11 ans les enfants créent leurs propres sites Web, et c'était génial. Pourquoi aller sur un site commercial si vous pouvez vous familiariser avec un passe-temps très spécifique d'un gars ou d'une fille de l'autre côté de la planète?)

Les temps sombres

Un an et demi plus tard, au milieu de 1998, on nous a présenté CSS 2 (au fait, j'aime le fond de cette page). Il s'agissait d'une modeste mise à jour, qui éliminait certaines lacunes dans divers domaines, mais le plus intéressant était l'ajout d'une paire de primitives de positionnement: la propriété positionvous permettait de placer l'élément en coordonnées exactes et le mode d'affichage inline-blockvous permettait d'organiser les blocs dans une rangée les uns après les autres.

Un fruit tellement alléchant, mais inaccessible! L'utilisation positionsemblait normale, mais le positionnement exact en pixels contredisait sérieusement la conception HTML flexible, et lorsque l'écran a été redimensionné, tout s'est nécessairement effondré ou d'autres défauts graves sont survenus. Cet humble inline-block semblaitplutôt interessant; néanmoins, il a résolu le problème principal de la mise en page HTML, qui consistait à placer des objets en ligne. Mais au début, aucun navigateur n'a implémenté cette propriété, les concepteurs l'ont donc ignorée.

Je ne peux pas dire avec certitude pour quelle raison - peut-être en raison de l'apparence du positionnement ou sous l'influence d'un autre facteur, mais à cette époque, les passionnés ont décidé d'essayer de faire une mise en page en utilisant CSS. Idéalement, vous pouvez séparer complètement le contenu de votre page de son apparence. Il y avait même un site Web CSS Zen Garden (il est toujours vivant), qui a poussé cette idée à l'extrême. Sur celui-ci, le même code HTML est converti en projets complètement différents après avoir appliqué différentes feuilles de style.

Le problème était que le premier support CSS était un sacré buggy. Avec le recul, je soupçonne que les développeurs de navigateurs ont simplement dupliqué le traitement des balises HTML et se sont retrouvés avec cela. Le site Web RichInStyle a toujours une longue liste de bogues CSS dans les navigateurs de ces années. Voici quelques-uns de mes favoris:

IE 3 ignore toutes les balises <style> du document, à l'exception de la dernière.
IE 3 ignore les pseudo-classes, il se a:hoverlit donc .
IE 3 et IE 4 traitent les bordures autocomme nulles. En fait, ce bogue persistait presque jusqu'à la version IE 6. Mais c'était normal, car IE 6 était également mal utilisé text-align: centerpour les éléments de bloc.
Si vous spécifiez une URL absolue pour l'image d'arrière-plan, IE 3 essaiera d'ouvrir l'image dans le programme local, comme si vous l'aviez téléchargée.
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

C'est avec cela que nous devions travailler. Et les gens voulaient-ils faire une mise en page entière en CSS? Ha.

Cependant, la popularité de cette idée grandissait. Il est même devenu une sorte de slogan unificateur pour la partie avancée de l'élite des designers - la meilleure pratique, qui a été citée comme le seul véritable argument dans le débat. L'utilisation de tableaux pour la disposition est mauvaise, ont-ils déclaré. Les tableaux confondent les lecteurs d'écran (lecteurs d'écran), ils sont sémantiquement incorrects, interagissent mal avec le positionnement CSS! Tout cela est vrai, mais c'était très difficile à accepter.

Eh bien, revenons à cela dans une minute. Tout d'abord, regardons une partie de l'atmosphère dans laquelle le développement Web s'est développé dans la zone 2000.

La fin des guerres de navigateurs et la stagnation qui s'ensuit

La version courte est la suivante: Netscape a gagné de l'argent en vendant le navigateur Navigator (payé pour les affaires, gratuit pour un usage personnel), puis Microsoft est entré sur le marché avec Internet Explorer entièrement gratuit, puis Microsoft a eu l'audace de connecter IE à Windows. Peux-tu imaginer? Vous travaillez avec un navigateur ? C'était une grosse affaire. Microsoft a poursuivi , elle a perdu, mais en conséquence, presque rien n'a changé.

De toute façon, Microsoft a fait ce qu'il voulait et cela a fonctionné. Elle a pratiquement détruit Netscape. Les deux navigateurs étaient incroyablement bogués, mais bogués de différentes manières. Par conséquent, un site testé dans un navigateur s'effondrera presque certainement dans un autre. Cela signifiait que lorsque la part de marché de Netscape baissait, les concepteurs de sites Web y accordaient moins d'attention, de sorte que moins de sites Web s'y ouvraient normalement, ce qui entraînait une baisse encore plus importante de la part de Netscape Navigator.

Ce n'est probablement pas une très bonne nouvelle pour les utilisateurs de systèmes d'exploitation autres que Windows. Ce qui est drôle car il y avait IE 5.5 pour Mac, et il était généralement moins bogué qu'IE 6 (à propos, Bill Gates n'était pas tant un brillant geek qu'un homme d'affaires agressif et impitoyable qui a fait fortune pour détruire intentionnellement toute concurrence qui fait obstacle, ce qui a finalement causé des dommages à l'ensemble de l'industrie, c'est le cas d'ailleurs).

Lorsque Windows XP avec Internet Explorer 6 est sorti au milieu de 2001, Netscape Navigator est passé d'un énorme Juggernaut à un minuscule midget pour des applications de niche.

Et puis, ayant complètement et complètement saisi le marché, Microsoft s'est arrêté. Depuis sa création, Internet Explorer est sorti chaque année environ, mais après IE 6, il y a eu un retard de plus de cinq ans. Il restait toujours buggé, mais en l'absence de concurrents ce n'était pas évident. Ainsi, Windows XP semblait également assez bon pour conquérir le marché des ordinateurs de bureau, et la prochaine version de Windows ne sortait pas à la même époque.

A également arrêté les travaux du consortium W3C, qui accepte les normes (à ne pas confondre avec W3Schools, les sangsues SEO). Au milieu des années 90, HTML a été révisé plusieurs fois, puis il a été gelé en HTML 4. CSS a été mis à jour de la première à la deuxième version en seulement un an et demi, mais il a également gelé. Mise à jour mineure CSS 2.1n'atteindra le statut de "recommandation candidate" qu'au début de 2004, et il aura fallu sept autres années pour accepter la version finale.

Dans cette situation de domination complète d'IE 6, il semblait que l'ensemble du réseau semblait figé dans le temps. Les normes importaient peu, car en fait il n'y avait qu'un seul navigateur. Tout ce qu'il a fait est devenu la norme de facto. Alors que l'Internet gagnait en popularité, la poignée d'étranglement d'IE rendait également difficile l'utilisation d'une plate-forme autre que Windows, car IE n'était disponible que pour Windows. Il n'a jamais été possible de garantir que le site Web fonctionnera dans un autre navigateur.

(Il y a une idée que les monopoles sont mauvais. Il doit y avoir une sorte de loi contre eux!)

Dans le même temps, Netscape a aggravé sa position, après avoir entamé une modification à grande échelle du moteur. En conséquence, une norme Netscape 6 beaucoup plus cohérente a été publiée, et le prix était à quelques années d'absence du marché, où à cette époque IE continuait d'augmenter sa part. Le navigateur Netscape 6 n'atteindra jamais même 10%, tandis qu'IE culminera à 96%. D'autre part, le nouveau moteur est sorti avec des sources ouvertes dans le cadre de Mozilla Application Suite, qui jouera plus tard un rôle.

Mais avant cela, il y avait encore quelques années, mais pour l'instant ...

Le mode de compatibilité

Toutes les premières implémentations CSS dans les navigateurs étaient pleines de bogues. Le plus connu d'entre eux est peut-être un bug avec le modèle de conteneur (modèle de boîte).

Vous voyez, un conteneur (l'espace rectangulaire occupé par un élément) a plusieurs dimensions: sa propre largeur et hauteur, puis un rembourrage, puis une bordure facultative, puis le champ qui le sépare des conteneurs voisins. CSS indique que toutes ces distances se cumulent. Par exemple, un conteneur avec les styles suivants:

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... prendra 124 pixels de large, d'une bordure à l'autre.

Cependant, IE 4 et Netscape 4 ont adopté une approche différente: ils considéraient la largeur et la hauteur comme une dimension d'une frontière à l'autre, à partir de laquelle les bordures et les marges sont soustraites pour obtenir la largeur de l'élément lui-même. Le même champ dans ces navigateurs aura une largeur de 100 pixels d'une bordure à l'autre, et 76 pixels resteront pour le contenu.

IE 6 a décidé de corriger cette contradiction avec la spécification. Malheureusement, le simple fait d'apporter des modifications pourrait briser la conception d'un certain nombre de sites Web qui fonctionnaient bien dans IE et Netscape.

Par conséquent, l'équipe IE a trouvé un compromis très étrange: elle a déclaré l'ancien comportement (ainsi que plusieurs autres erreurs majeures) comme le «mode de compatibilité» (mode quirks, littéralement «travaillant avec des bizarreries») et l'a activé par défaut . Pour passer au nouveau "strict" ou "mode standard", il fallait spécifier "doctype" au début du document, avant le tag <html>. Cela ressemblait à ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Pendant de nombreuses années, tout le monde a dû insérer cette ligne stupide au début de chaque document HTML (HTML5 plus tard le simplifierait <!DOCTYPE html>). Si vous y réfléchissez, c'est une façon vraiment bizarre de choisir le bon comportement CSS. La déclaration doctype fait partie de la spécification HTML depuis le milieu des années 90 , mais personne ne l' a utilisée. Je suppose que l'idée de Microsoft était de permettre le choix sans introduire d'extensions propriétaires. L'utilisation d'une telle déclaration peut éviter un comportement initialement incorrect. Sortie pratique pour l'équipe IE!

Le plus drôle, c'est que le mode de compatibilité avec les "bizarreries" existe toujours. Et il est toujours installé par défautdans tous les navigateurs, vingt ans plus tard! La liste exacte des «bizarreries» a changé au fil du temps. En particulier, ni Chrome ni Firefox n'utilisent le modèle de conteneur IE même dans ce mode, mais de nombreuses autres erreurs sont émulées.

Les navigateurs modernes ont également un mode «presque standard» qui n'émule qu'une seule bizarrerie. C'est peut-être la deuxième fonction la plus scandaleuse: si une cellule de tableau ne contient qu'une image, l'espace ci-dessous est supprimé. Conformément aux règles CSS habituelles, l'image se trouve dans la ligne de texte (vide), ce qui nécessite un espace en dessous - pour les éléments interlinéaires des lettres, tels que "y". Les premiers navigateurs ne pouvaient pas gérer cela normalement, cependant, certains sites Web créés après environ 2000 s'appuyaient sur cette fonctionnalité, bien que tout le reste soit entièrement conforme. Par exemple, ils ont découpé une grande image en morceaux, qui ont été placés dans les cellules du tableau les uns à côté des autres. Si, conformément à la norme, ajoutez un espace vide, l'image s'effondrera.

Mais revenons au passé. Bien que les normes aient officiellement prévalu, cela a créé un nouveau problème. Étant donné qu'IE 6 dominait le Web et que les déclarations DOCTYPE étaient facultatives, il n'était pas nécessaire de penser à prendre en charge ces normes dans le "mode strict" du navigateur. D'autres navigateurs l'ont finalement émulé et le comportement personnalisé est devenu la norme de facto. Les concepteurs Web qui se préoccupaient de ces choses (à notre crédit, nous étions nombreux) ont lancé une campagne de haut niveau pour activer le mode strict, car c'était une première étape absolument nécessaire pour assurer la compatibilité avec d'autres navigateurs.

XHTML Rise and Fall

Pendant ce temps, le W3C a perdu tout intérêt pour le HTML au profit du XHTML. Il s'agit d'une tentative de refonte du HTML en utilisant la syntaxe XML plutôt que SGML.

(Qu'est-ce que SGML, demandez-vous? Je ne sais pas. Personne ne sait. C'est la grammaire sur laquelle HTML est construit, et c'est la seule chose qui soit connue à ce sujet).

Au crédit du consortium, à cette époque, il y avait des raisons raisonnablement bonnes pour une telle décision. En règle générale, le HTML a été écrit manuellement (tel qu'il est maintenant), ce qui signifie la présence obligatoire d'erreurs aléatoires. Les navigateurs n'ont pas rejeté le HTML bogué, mais impliquaient diverses méthodes pour corriger les erreurs - et, comme dans tout le reste, différents navigateurs traitaient les erreurs différemment. Le code HTML légèrement déformé semblait bien fonctionner dans IE 6 (où «fonctionnait bien» signifie «a fait ce que vous attendiez de lui»), mais il s'est complètement effondré dans d'autres navigateurs.

Le consortium W3C a choisi XML parce qu'au début des années 2000, ils considéraient XML comme une solution universelle à tous les problèmes. Si vous ne le savez pas, XML a une approche beaucoup plus explicite et agressive de la gestion des erreurs - si votre document contient une erreur d'analyse, alors tout le document n'est pas valide. Cela signifie que si vous avez sélectionné XHTML et effectué une faute de frappe, rien ne s'affichera dans le navigateur . Juste une erreur.

Ça craint. À première vue, tout semble normal, mais gardez à l'esprit: le XML universel est généralement assemblé dynamiquement à l'aide de bibliothèques qui traitent le document comme un arbre que vous manipulez et, à la fin, le transforment en texte. C'est idéal pour une utilisation générale de XML pour la sérialisation de données lorsque vos données sont déjà une arborescence et que la plupart de la structure XML est simple et répétable, il est donc facile de se cacher dans les fonctions.

HTML n'est pas comme ça. Un document HTML a peu de structure répétitive fiable; même cet article sur la page est formaté principalement par des balises <p>, mais contient également inattendu <em>à l'intérieur du texte principal et aléatoire<h3>entre les paragraphes. Ce n'est pas très amusant de coder cela sous la forme d'un arbre. Et c'est important, car à peu près au même moment, le rendu côté serveur gagnait du terrain, et le HTML généré à l'époque et maintenant! - Livré avec des modèles qui le considèrent comme un flux de texte.

Si les pages HTML étaient des documents purement statiques, alors le XHTML pourrait fonctionner - vous écrivez un document, le voyez dans un navigateur et savez que tout fonctionne. Aucun problème. Mais pour créer un document de manière dynamique et risquer que dans une situation limite le site entier soit triché, et le visiteur ne verra qu'une erreur dans le navigateur? Ça craint.

Bien sûr, la propagation de la nouvelle norme Unicode à cette époque a également joué un rôle. Ensuite, il n'était pas toujours clair comment l'utiliser, et une mauvaise séquence d'UTF-8 était suffisante pour considérer l'ensemble du document XML comme déformé et "invalide"!

Donc, après avoir choyé, nous avons presque oublié XHTML. Il n'a laissé que deux pistes:

Tout le monde a cessé d'utiliser des noms de balises en majuscules! Au revoir <BODY>, bonjour <body>! XML est sensible à la casse et toutes les balises XHTML étaient en minuscules, de sorte que les balises de titre ne fonctionnaient tout simplement pas (fait amusant: l'API JavaScript transmet toujours les noms des balises HTML en majuscules). Cela est probablement dû à la popularité croissante de la coloration syntaxique; nous n'écrivons plus dans le Bloc-notes, comme en 1997.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

Une seule chose me manque en XHTML. Là, vous pouvez utiliser le métalangage XSLT pour créer le modèle «à l'intérieur du navigateur» (c'est-à-dire insérer le contenu de la page dans la disposition générale du site) sans écrire de scripts. C'était la seule façon possible de le faire, et c'était vraiment cool si tout fonctionnait. Mais un petit problème pourrait tout gâcher.

L'apparence de la mise en page CSS

Retour à CSS!

Vous êtes un concepteur Web débutant, et pour une raison quelconque, vous voulez essayer d'utiliser des styles CSS pour la mise en page, bien qu'ils ne soient clairement destinés qu'aux couleurs et à d'autres choses. Que faire?

Comme je l'ai mentionné, le principal problème est la position horizontale des objets les uns à côté des autres . Le positionnement vertical n'est pas un problème - c'est un comportement HTML normal. La seule raison pour laquelle tout le monde utilise des tableaux est qu'ils peuvent décomposer le matériau en cellules et les disposer côte à côte en colonnes.

CSS 2 a introduit certains modes d'affichage qui correspondent à des parties du tableau. Mais pour les utiliser, vous avez besoin des trois mêmes niveaux d'imbrication que dans les tableaux réels: le tableau lui-même, puis la ligne, puis la cellule. Ils ne sont pas là, et en tout cas, IE ne commencera pas bientôt à prendre en charge de tels modes.

Il y a plus position, mais il cherche constamment à poser des objets les uns sur les autres. Hmm

Ce qui reste?

En fait, un seul outil: float.

J'ai dit que cela vous floatpermet de faire circuler le journal autour de l'image avec du texte, mais c'est une description très générale. En principe, il peut être appliqué à n'importe quel élément. Si vous avez besoin d'une barre latérale, vous pouvez l'incliner vers le bord gauche, attribuer une largeur de 20% de la page et obtenir quelque chose comme ceci:

+ --------- +
| barre latérale | Bonjour et bienvenue sur mon site internet!
| |
+ --------- +

Malheureusement, les propriétés floatsont telles que le texte va l'entourer. Ainsi, si le texte sur la page est plus long que la barre latérale, il apparaîtra en dessous - et l'illusion sera détruite. Mais il peut être contourné. Les spécifications CSS précisent que le contenu floatne peut pas circuler les uns avec les autres, il suffit donc d'en mettre un de plus float!

+ --------- + + ----------------------------------- +
| barre latérale | | Bonjour et bienvenue sur mon site internet! |
| | | |
+ --------- + | Voici un paragraphe plus long à afficher |
            | que mon cerveau de galaxie CSS flotte |
            | un non-sens empêche l'habillage du texte. |
            + ----------------------------------- +

Cette approche a fonctionné, mais ses limites étaient bien pires que celles de la table. Par exemple, si vous ajoutez un pied de page, il grimpera à droite du texte principal, car pour le navigateur le «curseur» est toujours en haut, à droite des blocs flottants. Par conséquent, vous devez l'utiliser clearpour clouer un élément sous tous les flotteurs. Et si vous avez créé la barre latérale à 20% de la largeur de la page et le corps à 80%, tout espace entre eux poussera la page hors de l'écran et affichera une horrible barre de défilement horizontale. Vous devez toujours vous souvenir de cette arithmétique stupide. Si vous avez des bordures ou des arrière-plans définis des deux côtés, ils seront de hauteurs différentes, vous devez donc faire des choses vraiment grotesques pour querépare le. Et les lecteurs d'écran liront l'intégralité de la barre latérale avant de passer au texte principal, ce qui est assez grossier pour les utilisateurs. Par conséquent, vous devez utiliser une configuration encore plus complexe avec trois colonnes, dont le milieu apparaît d'abord en HTML.

En conséquence, nous obtenons un design qui est beau, fonctionne bien et évolue correctement, mais est décrit par un code CSS extrêmement chaotique. Rien de ce que vous avez écrit ne correspondait réellement à ce que vous vouliez - et ce sont les parties principales de la conception, et non les cadres latéraux! Il était difficile de comprendre comment le code CSS est connecté et ce qui apparaît à l'écran. Et puis la situation va empirer avant de finalement s'améliorer.

Grille de vignettes - 2

Armés d'un nouveau jouet, nous pouvons améliorer notre grille miniature. La disposition originale du tableau était incroyablement fastidieuse, même si vous n'avez pas fourni de sémantique de balise. Maintenant, vous pouvez faire mieux!

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

C'est idéal: HTML stocke le contenu de la page sous une forme raisonnable, puis CSS décrit à quoi il ressemble réellement.

Malheureusement, la mise en œuvre sur floatsera un peu grossière. Cette nouvelle version s'adapte mieux aux différentes tailles d'écran, mais nécessite quelques hacks: les cellules doivent être d'une hauteur fixe, le centrage de la grille entière est assez difficile, et l'effet de grille disparaît avec des éléments plus larges. Il devient clair que nous avons presque le même tableau, mais avec un nombre flexible de colonnes. Nous essayons simplement de l'imiter.

Vous avez également besoin de ce sort étrange clearfix, notoire à cette époque. Puisque float ne déplace pas le "curseur", alors<ul>avec éléments flottants hauteur nulle. Il se termine exactement là où il commence et toutes les miniatures flottantes dorment suffisamment par le bas. Pire encore, puisque tous les éléments suivants n'ont pas de flottants adjacents , ils ignoreront complètement les miniatures, continuant à s'afficher sous une «grille» vide - créant un gâchis!

La solution consiste à ajouter un élément factice à la fin de la liste, qui ne prend pas de place, mais avec un attribut CSS clear: both, qui l'omet sous tous les flottants. Cela pousse efficacement ce dernier <ul>sous les vignettes et il y adhère parfaitement par le bas.

Plus tard, les navigateurs commenceront à prendre en charge les pseudo-éléments du «contenu généré» ::beforeet::after, qui abandonnera complètement l'élément factice. Les feuilles de style du milieu des années 2000 comprenaient souvent les lignes suivantes:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

Et pourtant, c'était mieux que les tables.

DHTML

En tant que brève digression dans le monde de JavaScript, la nouvelle propriété a position vraiment permis une mise en page quelque peu dynamique. Je m'oppose de tout cœur à une telle hérésie, notamment parce que personne ne l'a jamais bien fait, mais c'était amusant de jouer.

C'est ainsi qu'a commencé l'ère du «HTML dynamique», c'est-à-dire du HTML avec des effets JavaScript. Maintenant, ce terme est complètement passé de mode, car maintenant nous ne pouvons même pas créer un putain de blog statique sans JavaScript. Tout a commencé de manière beaucoup plus inoffensive: des adolescents ont inséré des paillettes sur la page qui suivait le curseur de la souris, ou une petite horloge analogique qui a fonctionné en temps réel.

La collection la plus populaire de ces scripts était Dynamic Drive. - Ce site existe miraculeusement encore. Il contient probablement des centaines de jouets qui n'ont pas été mis à jour depuis le début des années 2000.

Si vous ne voulez pas vous plonger dans cette collection, voici un exemple: chaque année (sauf celle actuelle, quand j'ai oublié, désolé) le jour de mon anniversaire, j'aime ajouter des confettis et autres bêtises à mon blog. Je suis très paresseux, j'ai donc commencé la tradition à l'aide de ce script, que j'ai trouvé quelque part . Il était à l'origine destiné aux flocons de neige et placé sur la page un tas d'images avec position: absolute, puis changeant à plusieurs reprises leurs coordonnées.

Comparez cela à la version que j'ai écrite à partir de zéro il y a quelques années : voici seulement un petit code JSpour personnaliser les images, puis le navigateur les anime en utilisant CSS. Il s'agit d'un script légèrement moins fonctionnel, mais il permet au navigateur de faire tout le travail, peut-être même avec une accélération matérielle. Voilà jusqu'où nous sommes arrivés.

Web 2.0

Les temps sombres ne peuvent pas durer éternellement. Une série d'événements a eu lieu qui nous a mis dans la lumière.

L'un des principaux événements a été la sortie de Firefox - ou, pour les plus avancés, initialement Phoenix, puis Firebird. La version 1.0 est apparue en novembre 2004 - et a commencé à bien grignoter IE. Le navigateur a travaillé sur le noyau réécrit de Netscape 6, qui est extrait du cœur de la suite Mozilla vers une application distincte. Il était rapide, simple et bien meilleur dans le maintien des normes, bien que rien de tout cela n'ait d'importance.

La vraie chose était que Firefox avait des onglets. Dans IE 6, ce n'était pas le cas. Si vous vouliez ouvrir une deuxième page Web, vous avez ouvert une nouvelle fenêtre. Ça craint les gars. Firefox est devenu un vrai miracle.

Bien sûr, Firefox n'était pas le premier navigateur à onglets; dans le navigateur complet de la suite Mozilla, ils existaient également, et dans l'Opera avancé, ils existent depuis des siècles. Mais pour diverses raisons, c'est Firefox qui a décollé, notamment en raison du fait qu'il n'avait pas de panneau publicitaire géant au sommet, comme Opera.

Bien sûr, les concepteurs ont fait la promotion de Firefox en relation avec le support des normes, mais cet argument n'a attiré que d'autres concepteurs, pas leurs parents. L'une des démonstrations les plus populaires et les plus spectaculaires a été le test Acid2 , conçu pour tester les normes Web modernes. Il a montré un joli smiley, si les normes ont été élaborées correctement, et une image infernale dans IE 6 .

Résultat du test Acid2 dans le navigateur IE 6

Firefox au début n'était pas parfait. Mais bien sûr, il supportait les normes beaucoup mieux, et vous pouviez voir des progrès jusqu'à ce que le navigateur réussisse complètement tous les tests avec la sortie de Firefox 3.

Firefox était également aidé par le moteur JavaScript plus rapide: c'était avant JIT. C'était beaucoup, beaucoup plus rapide qu'IE. Par exemple, pour autant que je m'en souvienne, IE 6 a implémenté l' getElementByIditération dans tout le document, même dans le cas d'identificateurs uniques. Jetez un œil aux anciennes annonces de la version jQuery , elles étaient généralement accompagnées de graphiques de performances, et tous les navigateurs sont d' un ordre de grandeur plus rapides que IE 6-8.

Oh, puis IE 6 était un trou de sécurité géant, en particulier avec la prise en charge native des composants binaires arbitraires qui n'avaient besoin que de cliquer sur «Oui» dans la boîte de dialogue abstruse pour obtenir un accès complet et illimité à votre système. Cela n'a probablement pas contribué à la réputation d'IE.

En tout cas, avec l'avènement de la moindre alternative à IE, même les concepteurs les plus vicieux ne pouvaient pas simplement optimiser le site pour IE 6 et s'arrêter là. Maintenant, il y avait une raison d'utiliser le mode strict, il y avait une raison de se soucier de la compatibilité et des normes, et Firefox faisait des efforts constants pour les respecter autant que possible, tandis qu'IE 6 restait en stagnation.

(Je dirais que cet effet a ouvert la porte à OS X, ainsi qu'à l'iPhone. Je ne plaisante pas! Pensez-y: si le navigateur iPhone ne fonctionnait pas avec quoi que ce soit, parce que tout le monde faisait encore des sites pour IE 6, il resterait juste une alternative coûteuse à Palm. Rappelez-vous qu'au début, Apple ne voulait même pas publier ses propres applications - il comptait sur Internet).

(Soit dit en passant, Safari est sorti en janvier 2003, basé sur le fork KHTML du navigateur KDE Konqueror. Je pense que j'utilisais KDE à cette époque, donc c'était très intéressant, mais personne n'a vraiment pensé à OS X avec part de marché ridicule de 2%).

Un autre facteur important est apparu le 1er avril 2004, lorsque Google a annoncé Gmail. Haha C'est ridicule. Interface Web pratique pour le courrier? Bonne blague, google.

Oh merde. Ils ne plaisantent pas.Comment fonctionne ce truc interactif?

Aujourd'hui, chaque développeur Web connaît la réponse - il s'agit de XMLHttpRequest, ainsi nommé car personne ne l'a jamais utilisé pour des requêtes XML. Il a été inventé par Microsoft pour le courrier Exchange, puis cloné par Mozilla (je cite simplement Wikipedia ).

L'important est que XMLHttpRequest vous permet de faire une requête HTTP à partir de JavaScript. Vous pouvez désormais actualiser uniquement une partie de la page avec les nouvelles données, complètement en arrière-plan, sans recharger. Personne n'avait entendu parler de cette chose auparavant, et lorsque Google a déployé un client de messagerie entier dessus, c'était une magie absolue.

Peut-être que tout cela est une erreur qui mènera à un avenir infernal où les pages statiques chargent trois paragraphes de texte en arrière-plan en utilisant XHR sans raison apparente, mais c'est le sujet d' un autre article .

Dans la même veine, jQuery, un miracle similaire, est sorti en août 2006. Il a non seulement décrit les différences entre les API IE «JScript» et les approches standard adoptées par toutes les autres (ce qui a été fait plus tôt par d'autres bibliothèques), mais a également grandement simplifié le travail avec des groupes d'éléments entiers en même temps, ce qui historiquement restait une énorme douleur dans le cul. Maintenant, il est assez facile d'appliquer CSS partout depuis JavaScript! C'est une mauvaise idée, mais dans cette situation, il n'y avait pas de meilleure option!

Je vous entends bien: JavaScript à nouveau! Est-ce un article sur CSS?

Tu as tout à fait raison! Je mentionne la popularité croissante de JavaScript, car c'est elle qui a directement conduit à l'état moderne du CSS, grâce à un autre grand facteur:

Ambition

Firefox a montré que les navigateurs peuvent se développer assez rapidement - chaque nouvelle amélioration d'Acid2 était excitante. Gmail nous a montré que le Web pouvait afficher plus que du texte brut avec des flocons de neige tombant.

Et les gens ont commencé à fantasmer .

Le problème était que les navigateurs ne s'amélioraient pas. À certains égards, Firefox adhérait plus rapidement et plus précisément à la spécification CSS, mais il n'a fondamentalement rien de nouveau. Seule la boîte à outils s'est améliorée , ce qui a principalement affecté JavaScript. CSS est un langage statique, vous ne pouvez donc pas écrire de bibliothèque pour l'améliorer. La création de CSS à l'aide de JavaScript était possible, mais bon sang, c'est toujours une mauvaise idée.

Un autre problème était que CSS 2 n'est vraiment bon que pour styliser des rectangles. C'était merveilleux dans les années 90, lorsque chaque système d'exploitation avait une interface de style rectangulaire. Mais le moment est venu pour Windows XP et OS X, où tout est devenu brillant, brillant et arrondi. Il était un peu gênant que les coins arrondis et les coches soignées avec des ombres soient dans votre navigateur de fichiers , mais nulle part sur Internet.

Les temps sombres sont donc revenus.

L'âge CSS Hack

Les concepteurs voulaient beaucoup de ce que CSS ne pouvait tout simplement pas offrir.

Coins arrondis. Les carrés sont passés de mode, et maintenant tout le monde voulait des boutons à coins ronds, car "l'avenir leur appartient" (les boutons natifs sont également passés de mode pour une raison quelconque). Hélas, CSS ne pouvait pas faire cela. Vos options:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

Mais ce ne sont là que des considérations purement esthétiques. Si vous étiez intéressé par la mise en page, eh bien, l'apparition de Firefox vous a immédiatement rendu la vie beaucoup plus facile et beaucoup plus compliquée.

Tu te souviens inline-block? Firefox 2 le prend en charge! Il était bogué et caché derrière le préfixe du fournisseur, mais cela a plus ou moins fonctionné, ce qui a permis aux concepteurs d'essayer de l'utiliser. Et puis Firefox 3 est sorti, qui le supportait plus ou moins normalement, ce qui semblait être un miracle. La troisième version de notre grille de vignettes n'est pas plus compliquée que la largeur et inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

L'idée générale inline-blockest que l' intérieur agit comme un bloc, mais le bloc lui-même est placé en texte brut, comme une image. Ainsi, chaque vignette est placée dans un conteneur, mais tous ces conteneurs se trouvent côte à côte et, en raison de leur largeur égale, ils entrent dans la grille. Et comme il s'agit fonctionnellement d'une ligne de texte, il n'y a pas d'effet étrange sur le reste de la page, comme c'était le cas avec float.

Bien sûr, il y avait quelques inconvénients. Par exemple, rien ne peut être fait avec l'espace restant, il y avait donc un risque qu'un grand champ apparaisse à droite sur les grands écrans non standard. Il y avait aussi le problème de la rupture du maillage par une large cellule. Mais au moins ce n'est pas un flotteur.

Un petit problème subsistait: IE 6. Il était techniquementinline-block, mais uniquement sur des éléments naturellement intégrés tels que <b>et <i>, mais pas <li>. Ce n'est pas comme ça que vous voulez vraiment (ou pensez) utiliser inline-block. Eh.

Heureusement, à un moment donné, un génie absolu a découvert une hasLayoutoptimisation interne dans IE qui indique si l'élément a ... euh ... un balisage. Écoutez, je ne sais pas. Fondamentalement, cela change le chemin de rendu des éléments - ce ne sont donc pas ces derniers mais d' autres bogues qui apparaissent , comme le mode de compatibilité basé sur chaque élément! En conséquence, il s'avère que tout ce qui précède fonctionne dans IE 6, si vous ajoutez quelques lignes:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

Les astérisques au début rendent la propriété invalide, donc les navigateurs doivent ignorer la chaîne entière ... mais pour une raison inconnue, IE 6 ignore les astérisques et accepte le reste de la règle (presque toute ponctuation a fonctionné, y compris un trait d'union ou - mon favori personnel - le soulignement). Une propriété zoom est une extension Microsoft qui met tout à l'échelle, avec pour effet secondaire de définir la propriété de disposition sur l'élément. Et cela display: inline devrait forcer chaque élément à insérer son contenu dans une grande ligne de texte, mais IE traite l'élément inlineavec la propriété «balisage» quelque chose comme inline-block.

Et ici, nous voyons le vrai potentiel des hacks CSS. Les règles spécifiques au navigateur, avec une syntaxe intentionnellement médiocre qu'un navigateur ignorerait, reproduisent un effet qui est toujours incompréhensible à partir de ce que vous écrivez. Des manuels entiers expliquaient comment faire quelque chose de simple, comme une grille, mais pour que cela fonctionne dans la plupart des navigateurs de l'époque. Vous verrez également * html, html > /**/ bodyet toutes sortes d'autres bêtises. Voici la liste complète ! Et rappelez-vous le hack "clearfix"? La version complète , compatible avec tous les navigateurs, est légèrement pire:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Faut-il s'étonner que les gens aient commencé à se plaindre des CSS?

C'était une époque de copier-coller aveugle dans des tentatives futiles pour faire fonctionner cette fichue chose. Exemple: quelqu'un (j'ai déterré le code source, mais je ne le trouve pas maintenant) a eu l'étrange idée de toujours installer body { font-size: 62.5% }, car les unités relatives sont censées être «bonnes», par désir de remplacer la taille de police par défaut du navigateur de 16 pixels (qui, il se trouve à droite) et la nécessité de traiter les erreurs IE. Après un certain temps, il a cessé de le faire, mais le mal a été fait, et des milliers de sites Web ont agi de cette façon, les considérant comme des "meilleures pratiques". Cela signifie que si vous souhaitez modifier la taille de police par défaut de votre navigateur dans n'importe quelle direction, vous obtiendrez un non-sens - si vous la réduisez et qu'un tas de pages Web deviennent microscopiques, si vous l'augmentez, alors tout restera petit si vous l'augmentez encore plus , alors les sites qui respectent votre décision deviendront énormes. Au moins aujourd'hui, nous avons une meilleure mise à l'échelle, je pense.

Oui, et rappelez-vous: StackOverflow n'est pas encore apparu. Toutes les connaissances ont été transmises de bouche en bouche. Si vous êtes chanceux, vous connaissez certains sites avec des conseils comme QuirksMode et Eric Meyer.

En fait, consultez le site css / edge de Mayer . Il y a quelques exemples extravagants que les gens ont fait, même avec seulement CSS 1, en 2002. Je pense toujours que Complexspiral est un pur génie, bien que ces jours-ci, tout soit fait avec opacityune seule image. Les méthodes de raggedfloat n'ont reçu le support CSS natif il y a seulement quelques années, avec l'avènement de shape-outside! Cet auteur nous a également donné une réinitialisation CSS , éliminant les différences entre les styles de navigateur par défaut.

(Le rôle d'Eric Meyer dans CSS est difficile à surestimer. Lorsque sa petite fille Rebecca est décédée il y a six ans, elle a été immortalisée avec sa propre couleur CSS, rebeccapurple, un cas unique. Voilà à quel point sa communauté en ligne apprécie! Eh bien, maintenant je dois pleurer un peu sur cette histoire.)

L'avenir arrive, mais progressivement

Les concepteurs et les développeurs ont progressivement repoussé les limites de ce dont les navigateurs sont capables. Jusqu'à présent, les navigateurs se sont quelque peu mal débrouillés. Tous les correctifs, solutions de contournement et bibliothèques étaient secrets, fragiles, sujets aux erreurs et / ou lourds.

De toute évidence, les navigateurs avaient besoin de nouvelles fonctionnalités. Mais le publier n'était pas suffisant; Microsoft a fait beaucoup de cela, et fondamentalement, cela a conduit à un nouveau gâchis.

Mais plusieurs tentatives désespérées ont eu lieu. Comme la tête du W3C était toujours assise dans ses propres fesses - rejetant même les améliorations HTML proposées en faveur de XML - certains des développeurs de navigateurs actifs (Apple, Mozilla et Opera) ont décidé de créer leur propre club. En juin 2004, le groupe de travail WHATWG a été formé et a commencé à travailler sur la norme HTML5. En fin de compte, il élimine complètement le besoin de XHTML et élimine un certain nombre de problèmes de sécurité lorsque vous travaillez avec du HTML standard. En outre, il a fourni de nouveaux avantages, tels que la prise en charge native des contrôles audio, vidéo et de formulaire pour les dates et les couleurs. Et d'autres choses qui sont maladroitement prises en charge par les contrôles JavaScript. Et, euh, ils y sont toujours maladroitement soutenus.

Puis vint CSS 3. Je ne sais pas à quel moment cela s'est produit. Il apparut lentement, de toutes ses forces, comme un poussin éclos d'un œuf et pas pressé, bon sang, d'aller nulle part.

Je peux faire beaucoup d'hypothèses raisonnables. Je pense que cela a commencé avec border-radius. Plus précisément, avec -moz-border-radius. Je ne sais pas quand il a été introduit pour la première fois, mais le traqueur de bogues de Mozilla le mentionne en 1999.

Voir, la propre interface utilisateur de Firefox est rendue en utilisant CSS. Si Mozilla voulait faire quelque chose qui ne pouvait pas être fait avec CSS, elle a ajouté sa propre propriété avec un préfixe -mozpour indiquer que c'était leur propre invention. Et s'il n'y a pas vraiment de mal à cela, cela a rendu la propriété disponible pour les sites Web.

Je suppose que la poussée pour CSS 3 a vraiment commencé lorsque Firefox a décollé - et les concepteurs ont découvert la propriété -moz-border-radius. Des coins arrondis soudainement intégrés sont apparus! Plus de chichi dans Photoshop, il suffit d'écrire une ligne! Presque du jour au lendemain, des coins ronds et ronds ont été sciés partout.

Et à partir de là, tout a roulé comme une boule de neige. Les problèmes courants ont été résolus un par un à l'aide de nouvelles fonctions CSS, qui ont été combinées dans une nouvelle version de CSS - CSS 3. Les principales ont résolu les problèmes de conception mentionnés précédemment:

Coins arrondis avec border-radius.
Dégradés utilisant linear-gradient(), etc.
Le contexte multiple en soi n'était pas un problème, mais a facilité d'autres choses.
Transparence en utilisant opacityet canal alpha en couleurs.
Ombres sur les conteneurs.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
Polices Web qui sont en CSS depuis un certain temps, mais implémentées uniquement dans IE et uniquement avec certaines polices stupides chargées par DRM. Maintenant, nous ne sommes pas limités aux quatre polices incorrectes fournies avec Windows et que personne d'autre n'a!

C'était tout simplement génial! Ces fonctionnalités n'ont résolu aucun problème de mise en page, mais elles ont résolu des problèmes esthétiques que les concepteurs avaient l'habitude de contourner maladroitement en utilisant de nombreuses images et / ou JavaScript. Cela signifiait moins de téléchargements et moins d'images utilisées à la place du texte, ce qui était plutôt bon pour le Web.

La grande ironie est que ces effets de design sont passés de mode presque immédiatement, et maintenant nous sommes de retour aux rectangles plats.

Préfixes des fournisseurs d'enfer dans les navigateurs

Hélas! Le monde n'était pas encore bien.

Certains de ces nouveaux gadgets ont été développés à l'origine par des fabricants de navigateurs et sont préfixés. Certains des derniers ont été développés par le comité CSS, puis mis en œuvre par les navigateurs lorsque le design était encore en cours de développement. Il y avait donc des préfixes ici aussi.

Et l' enfer des préfixes a commencé , qui continue jusqu'à ce jour.

Mozilla était -moz-border-radiusdonc, lorsque Safari l'a implémenté, il l'a appelé -webkit-border-radius(«WebKit» est le nom du fork Apple KHTML). Ensuite, la spécification CSS 3 l'a normalisée et l'a nommée simplement border-radius. Cela signifie que si vous souhaitez utiliser des bordures arrondies, vous devez en fait énoncer trois règles:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Les deux premiers incluaient en fait l'effet dans les navigateurs actuels, et le dernier est enregistré pour l'avenir: lorsque les navigateurs implémentent la vraie règle et suppriment les préfixes, elle prend effet.

Vous deviez le faire à chaque fois, car CSS n'est pas un langage de programmation et n'a pas de macros, de fonctions ou similaires. Parfois, Opera et IE ont introduit leurs propres implémentations avec des préfixes -o-et -ms-, par conséquent, le nombre total de lignes a atteint cinq. Avec les dégradés, cela a empiré; la syntaxe a subi un certain nombre de révisions incompatibles graves, vous ne pouvez donc même pas vous fier au copier / coller et au changement de nom de la propriété!

Et de nombreux designers, eh bien, foirés. Je ne peux pas trop les blâmer; Je veux dire, ça craint. Mais de nombreuses pages n'indiquaient que des formulaires de préfixe, pas la version finale, donc les navigateurs devaient conserver les formulaires de préfixe plus longtemps qu'ils ne voudraient rien casser. Et si le formulaire de préfixe fonctionne toujours et que vous avez l'habitude de l'utiliser, alors peut-être n'avez-vous pas vraiment besoin d'une option universelle.

Pire, certains n'utiliseront que le formulaire qui fonctionne dans leur navigateur préféré. Les choses se sont particulièrement détériorées avec l'essor des navigateurs Web mobiles. Les navigateurs intégrés sur iOS et Android sont Safari (WebKit) et Chrome (à l'origine WebKit, maintenant fork), vous n'avez donc besoin que du préfixe -webkit-. Ce qui a rendu Mozilla plus difficile lors de la sortie de Firefox pour Android.

Rappelez-vous cet échec avec IE 6? Nous y revoilà! La situation était tellement minable que Mozilla a finalement décidé d' implémenter un certain nombre de fonctionnalités -webkit-qui sont toujours prises en charge même sur Firefox de bureau. La situation est tellement stupide que Firefox ne prend désormais en charge que certains effets via ces propriétés, telles que -webkit-text-stroke , qui n'est pas normalisé.

De plus, le moteur Chrome à fourche actuel s'appelle Blink, donc techniquement il ne devrait pas utiliser de propriétés -webkit-. Et pourtant ils le sont. Au moins, ce n'est pas aussi mauvais que de confondre les chaînes d'agent utilisateur .

Maintenant, les créateurs de navigateurs ont largement abandonné les préfixes; au lieu de cela, ils cachent les fonctions expérimentales derrière les drapeaux (par conséquent, ils ne fonctionneront que sur les machines de développement qui les forceront). Les nouvelles fonctionnalités devraient théoriquement être plus petites et plus faciles à stabiliser.

Tout ce gâchis est probablement devenu un énorme facteur de motivation pour le développement de Sass et LESS , les deux langages qui produisent du code CSS (préprocesseurs). Ils ont des objectifs très similaires: ajouter des variables, des fonctions et certaines formes de macros à CSS, ce qui vous permet d'exclure de votre code de nombreuses répétitions, hacks de navigateur et autres absurdités. Enfer, j'utilise toujours SCSS moi - même , bien que l'industrie diminue progressivement son utilisation.

Flexbox

Mais alors, comme si un ange était descendu du ciel ... flexbox .

Flexbox existe depuis très longtemps - un support partiel aurait été de retour dans Firefox 2, déjà en 2006! Il a subi plusieurs révisions incompatibles et il lui a fallu une éternité pour se stabiliser. Dans ce cas, IE n'a pas pu implémenter le support pendant des années et vous ne voulez pas vous fier à une mise en page qui ne fonctionne que pour la moitié de votre audience. Ce n'est que relativement récemment (2015? Plus tard?) Que Flexbox a obtenu un support suffisamment large pour une utilisation sûre. Et je peux jurer que je rencontre toujours des gens dont Safari ne le reconnaît pas du tout sans préfixes, bien que Safari semble avoir abandonné les préfixes il y a cinq ans ...

Quoi qu'il en soit, flexbox est une implémentation CSS d'un outil de mise en page GUI assez commun: vous avez un parent avec plusieurs enfants, et le parent a de l'espace libre, et il est automatiquement partagé entre les enfants. Et cela met les objets côte à côte .

L'idée générale est que le navigateur calcule la quantité d'espace libre du parent et la «taille initiale» de chaque enfant, calcule la quantité d'espace supplémentaire disponible et la distribue en fonction de la flexibilité de chaque enfant. Imaginez une barre d'outils: vous pouvez donner à chaque bouton une taille fixe (flex 0), mais ajoutez des espaceurs qui divisent également l'espace restant, alors donnez-leur flex 1.

Une fois cela fait, vous aurez également plusieurs options pour des options pratiques: vous pouvez répartir l'espace supplémentaire entre les enfants, vous pouvez les étirer à la même hauteur ou les aligner de différentes manières, vous pouvez même les transférer sur plusieurs rangées si toutes ne correspondent pas!

Avec cela, nous pouvons encore optimiser notre grille de miniatures :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

Ce n'est qu'un miracle. Vous pouvez immédiatement oublier inline-block. Ce code exprime très clairement ce dont nous avons besoin.

…presque. Il a toujours le problème que les cellules trop larges déchireront la grille, car il s'agit toujours d'une rangée horizontale enroulée sur plusieurs lignes indépendantes. Mais c'est toujours assez cool et résout un certain nombre d'autres problèmes de mise en page. C'est probablement suffisant. Si seulement ...

Je dirais que l'introduction massive de flexbox a inauguré l'ère moderne du CSS. Il n'y avait qu'un seul problème non résolu. ...

Mort lente et douloureuse d'IE

IE 6 a quitté le marché pendant très longtemps. Jusqu'au début de l'année 2010 environ, il ne pouvait pas tomber en dessous de 10% du marché (encore une grosse part).

Firefox a atteint la version 1.0 fin 2004. IE 7 est sorti seulement deux ans plus tard, il n'a offert que des améliorations modestes, a souffert de problèmes de compatibilité avec les sites pour IE 6, et de nombreux utilisateurs d'IE 6 (pour la plupart des utilisateurs inexpérimentés) n'ont vu aucune raison de la mise à jour. Vista est livré avec IE 7, mais Vista s'est avéré être une sorte d'échec - je ne pense pas que de toute ma vie il ait été proche de dépasser XP.

D'autres facteurs incluent les politiques informatiques d'entreprise, qui prennent souvent la forme de «ne jamais rien mettre à jour» - et souvent pour une bonne raison, car j'ai entendu des histoires sans fin sur des applications internes qui ne fonctionnaient que dans IE 6 pour toutes sortes de raisons horribles. Ensuite, il y avait toute la Corée du Sud , qui était légalement tenue d'utiliser IE 6 parce qu'elle consacrait dans la loi certaines exigences de sécurité qui ne pouvaient être mises en œuvre qu'en utilisant le contrôle ActiveX dans IE 6.

Par conséquent, si vous souteniez le site Web utilisé - ou pire, requispour une utilisation - par des gens d'affaires ou d'autres pays, vous êtes à peu près coincé avec le support d'IE 6. Les personnes qui fabriquent de petits outils personnels et des sites Web ont immédiatement abandonné la compatibilité IE 6 et affiché des bannières de plus en plus désagréables sur les sites Web pour les utilisateurs d'IE 6 ... Mais si vous êtes un homme d'affaires, comment expliquer la perte instantanée de 20% d'audience potentielle? Travaillez plus dur!

Au fil des ans, le stress a augmenté à mesure que le CSS est devenu de plus en plus fonctionnel et IE 6 est resté un point d'ancrage. Il ne comprenait toujours pas PNG alphasans solutions de contournement, et en attendant, nous avions de plus en plus de fonctions importantes, comme la vidéo native en HTML5. Les solutions de contournement sont devenues de plus en plus confuses, et la liste des fonctions que vous ne pouviez tout simplement pas utiliser s'allongeait. Je montrerais à quoi ressemble mon blog dans IE 6, mais il est peu probable que vous vous y connectiez même - le TLS qu'il prend en charge est si ancien et cassé qu'il est déjà désactivé sur la plupart des serveurs!

Des demandes distinctes sont venues de développeurs individuels de l'équipe YouTube. Sans demander la permission à personne, en juillet 2009, ils ont ajouté une bannière d'avertissement invitant les utilisateurs d'IE 6 à passer à quelque choseun autre, car la prise en charge du navigateur hérité prendra bientôt fin. En un mois, la part mondiale du trafic IE6 a baissé de plus de 10%. Tous les héros ne portent pas d'imperméables.

Je marquerais le début de la fin d'IE6 ce jour-là où YouTube a vraiment désactivé la prise en charge d'IE 6. Cela s'est produit le 13 mars 2010, près de neuf ans après la sortie de cette version du navigateur. Je ne sais pas dans quelle mesure YouTube affecte les utilisateurs d'entreprise ou le gouvernement sud-coréen, mais le refus d'une grande entreprise Web de prendre en charge un navigateur entier envoie un message assez fort.

Bien sûr, il y avait d'autres versions d'IE, et beaucoup d'entre elles étaient en elles-mêmes un casse-tête différent. Mais chaque suite est devenue moins douloureuse, et maintenant vous n'avez plus besoin de trop réfléchir aux tests dans IE (maintenant Edge). Il est temps que Microsoft abandonne son propre moteur de rendu et passe au clone Chrome.

Maintenant

CSS est très bon en ce moment. Vous n'avez pas besoin de hacks étranges pour simplement placer des objets à proximité. Les outils de développement de navigateur sont désormais intégrés et sacrément incroyables - Firefox a commencé à vous avertir spécifiquement lorsque certaines propriétés CSS ne prennent pas effet en raison des valeurs d'autres propriétés! Les effets secondaires implicites peu clairs comme les «contextes d'empilement» peuvent désormais être définis de manière explicite, comme des propriétés isolation: isolate.

En fait, permettez-moi de lister tout ce qui me vient à l'esprit au sujet des fonctionnalités CSS modernes. Ce n'est pas un guide pour toutes les utilisations possibles des styles, mais si vos connaissances CSS n'ont pas été mises à jour depuis 2008, j'espère que cela stimulera votre appétit. Et tout cela n'est que CSS! Tant de choses qui étaient auparavant impossibles, douloureuses ou nécessitaient des plug-ins maladroits sont désormais prises en charge initialement - audio, vidéo, dessin à main levée, rendu 3D ... sans parler des énormes améliorations ergonomiques de JavaScript.

Disposition

Le conteneur de grille peut faire presque tout ce que les tables ont fait, et plus encore, y compris déterminer automatiquement le nombre de colonnes. C'est vraiment incroyable. Plus d'informations ci-dessous.

Le conteneur flexbox décompose ses enfants dans une ligne ou une colonne, permettant à chacun de déclarer sa taille par défaut et la quantité d'espace qu'il souhaite utiliser. Vous pouvez envelopper ces conteneurs, réorganiser les enfants sans modifier l'ordre de la source et aligner les enfants de plusieurs manières.

Les colonnes peuvent diviser le texte en plusieurs colonnes.

Propriétébox-sizingvous permet de sélectionner le modèle de conteneur IE pour des éléments individuels si vous avez besoin que l'élément entier occupe un espace fixe et que les bordures et les marges sont soustraites de la largeur totale .

display: contentsvide le contenu d'un élément dans son élément parent, comme s'il n'y était pas du tout. display: flow-root- Il s'agit essentiellement d'un correctif automatique, seulement une décennie plus tard.

widthpeut maintenant être défini sur min-content, max-contentou une fonction fit-content()pour un comportement plus flexible.

white-space: pre-wrapconserve les espaces, mais rompt les lignes si nécessaire pour éviter le débordement. Également utile pre-line, qui réduit les espaces à un, mais préserve les nouvelles lignes littérales.

text-overflowcoupe le texte prolixe en utilisant des points de suspension (ou un caractère personnalisé) lorsque la limite est dépassée, et pas seulement la tronque. Dans les spécifications se trouve également la fonction de masquer le texte en douceur (fondu), mais il n'a pas encore été implémenté.

shape-outsidemodifie la forme du flux de texte. Il peut même utiliser le canal alpha de l'image comme formulaire.

resizedonne à un élément arbitraire un descripteur de redimensionnement (s'il a un débordement).

writing-modedéfinit la direction de la lettre. Si votre conception doit fonctionner dans plusieurs modes, certaines propriétés CSS le prennent en charge, vous pouvez les utiliser comme alternative aux propriétés standard: inset-blocket inset-inlinepour le positionnement, block-sizeet inline-sizepour la largeur / hauteur, border-blocket border-inlinepour les bordures, et des propriétés similaires à mettre en retrait.

Esthétique

CSS Transitions interpole en douceur une valeur chaque fois qu'elle change, que ce soit en raison d'un effet de type :hoverou, par exemple, d'une classe ajoutée à partir de JavaScript. Les animations CSS sont similaires, mais jouent automatiquement des animations prédéfinies. Les deux peuvent appliquer un certain nombre de fonctions de «fluidité» différentes .

border-radiusarrondit les coins du récipient. Tous les coins peuvent être de tailles différentes et peuvent également être ronds ou elliptiques. La courbe s'applique également à la bordure, à l'arrière-plan et aux ombres du rectangle.

Les ombres des conteneurs peuvent être utilisées pour l'effet évident de créer des ombres. Vous pouvez également utiliser plusieurs ombres et ombres insetpour divers effets intelligents.

text-shadowfait ce qu'il dit, mais vous pouvez également ajouter quelques ombres pour créer une sorte de contour de texte.

transformvous permet d'appliquer une transformation arbitraire en plusieurs étapes à un élément, c'est-à-dire de mettre à l'échelle, de faire pivoter, d'incliner, de déplacer et / ou d'effectuer une transformation de perspective sans affecter la disposition.

filter(différent d'IE 6) propose plusieurs filtres visuels spéciaux qui peuvent être appliqués à un élément. La plupart d'entre eux changent de couleur, mais il y en a aussi blur(), et drop-shadow()(contrairement à box-shadowcela, il est appliqué à l'esprit de l'élément externe, et non à son conteneur).

linear-gradient(). radial-gradient(), nouveaux et moins supportés conic-gradient(), leurs optionsrepeating-* - Tous créent des images en dégradé et peuvent être utilisés n'importe où dans CSS où l'image est attendue, généralement comme background-image.

scrollbar-colorchange la couleur de la barre de défilement, avec un effet secondaire désagréable de vitesses de défilement considérablement plus faibles dans les navigateurs actuels.

background-size: coveretcontain ils redimensionneront l'image d'arrière-plan de façon à ce qu'elle devienne soit assez grande pour couvrir complètement l'élément (même si elle est rognée), soit suffisamment petite pour tenir à l'intérieur (même si l'élément ne couvre pas tout l'arrière-plan).

object-fit Est une idée similaire, mais pour d'autres objets comme <img>. Des object-positiontravaux appropriés comme background-position.

Il est possible d'utiliser plusieurs arrière-plans, ce qui est particulièrement utile pour les dégradés - vous pouvez empiler plusieurs dégradés, d'autres images d'arrière-plan et une couleur unie en bas.

text-decorationest devenu plus bizarre qu'auparavant; Vous pouvez maintenant définir la couleur de la ligne et utiliser plusieurs types de lignes différentes, y compris celles en pointillés, en pointillés et ondulées.

Les compteurs CSS peuvent être utilisés pour la numérotation arbitraire d'éléments arbitraires, offrant la possibilité d'utiliser <ol> sur n'importe quel ensemble d'éléments.

Le pseudo-élément vous ::markerpermet de styliser le conteneur de marqueur d'un élément de liste ou même de le remplacer complètement par un compteur personnalisé. Le support du navigateur est incomplet mais s'améliore. De même, la règle@counter-styleimplémente un tout nouveau style de compteur (par exemple, 1 2 3, i ii iii, ABC, etc.) que vous pouvez utiliser n'importe où, bien que jusqu'à présent, seul Firefox le supporte.

image-set()fournit une liste d'images possibles et permet au navigateur de sélectionner la plus appropriée en fonction de la densité de pixels de l'écran de l'utilisateur.

@font-facedéfinit une police qui peut être téléchargée à partir d'une source externe, bien que vous puissiez utiliser Google Fonts .

pointer-events: nonefait que l'élément ignore complètement la souris; il ne répond pas aux instructions et les clics le parcourent directement jusqu'à l'élément ci-dessous.

image-renderingpeut changer la méthode d'interpolation de l'image en voisin le plus proche, bien que la prise en charge du navigateur soit toujours hétérogène, et vous devrez peut-être également activer certaines propriétés spécifiques au navigateur.

clip-pathajuste un élément à une forme arbitraire. Il existe également maskun masque alpha arbitraire, mais la prise en charge du navigateur n'est pas uniforme, et c'est généralement une procédure assez compliquée.

Syntaxe et trucs

@supportsvous permet d'écrire différents codes CSS en fonction de ce que le navigateur prend en charge, bien qu'à l'heure actuelle, il soit loin d'être aussi utile qu'il le serait en 2004.

A > Bsélectionne les enfants immédiats. A + Bchoisit ses frères et sœurs. A ~ Bsélectionne les frères et sœurs immédiats (par élément). Les crochets peuvent faire un tas de choses à choisir en fonction des attributs; le plus évident est input[type=checkbox], bien que des choses intéressantes puissent être faites avec les pièces correspondantes <a href>.

Maintenant, il y a tout un tas de pseudo-classes. Beaucoup d'entre eux concernent des éléments de formulaire: :enabledet :disabled; :checkedet :indeterminate(s'applique également à <option>); :requiredet :optional; :read-writeet :read-only; :in-range/ :out-of-rangeet :valid/:invalid(à utiliser avec la validation de formulaire côté client HTML5); :focuset :focus-within; et :default(qui sélectionne le bouton de formulaire par défaut et les cases à cocher, boutons radio et <option>') prédéfinis .

Pour une application à des éléments spécifiques dans un ensemble d'éléments liés :first-child, :last-childainsi que :only-child; :first-of-type, :last-of-typeet :only-of-type(où «type» signifie le nom de la balise); est :nth-child(), :nth-last-child(), :nth-of-type()et :nth-last-of-type()(pour sélectionner chacun des deuxième, troisième, et ainsi de suite éléments).

:not()inverse le sélecteur. :emptySélectionne des éléments sans enfants et sans texte. :targetsélectionne l'élément auquel le fragment d'URL a sauté (par exemple, si la barre d'adresse afficheindex.html#foo, en même temps, l'élément dont l'identifiant est égal à est sélectionné foo).

::beforeet ::aftermaintenant avec deux deux-points pour indiquer qu'ils créent des pseudo-éléments, et pas seulement définir la zone du sélecteur à laquelle ils sont attachés. ::selectionajuste la façon dont le texte sélectionné est affiché; ::placeholderModifie l'apparence du texte de remplacement (dans les champs de texte).

Les requêtes multimédias font tout un tas de choses pour que votre page puisse s'adapter en fonction de la façon dont elle est affichée. La requête multimédia prefers-color-schemevous indique si le système de l'utilisateur est installé sur un sujet clair ou sombre, vous pouvez donc le configurer automatiquement en conséquence.

Vous pouvez écrire des couleurs translucides comme #rrggbbaaou#rgba, ainsi que l'utilisation des fonctions rgba()et hsla().

Les angles peuvent être décrits comme des fractions d'un cercle complet avec turn. Bien sûr, deget rad(et grad) sont également disponibles.

Les variables CSS (officiellement «propriétés personnalisées») vous permettent de définir des valeurs nommées personnalisées qui peuvent être utilisées n'importe où. Vous pouvez l'utiliser pour réduire la quantité de manipulation CSS nécessaire en JavaScript (par exemple, pour repeindre une partie complexe d'une page en définissant une variable CSS au lieu de définir manuellement un certain nombre de propriétés), ou pour avoir un composant générique qui répond aux variables définies par le composant parent.

calc()calcule une expression arbitraire et la met à jour automatiquement (bien que la nécessité de tels calculs élimine partiellementbox-sizing)

vw, vh, vmin, Etvmax vous permettent de spécifier la longueur en pourcentage de la largeur ou la hauteur de la fenêtre, ou selon le plus élevé / moins.

Fuh! Je suis sûr que j'ai beaucoup oublié et mes collègues compléteront la liste dans les commentaires. Maintenant, je peux échapper à l'affichage de MDN et passer à la dernière partie amusante de l'article.

Grille moderne de vignettes

En fin de compte, nous arrivons à la manière finale et objectivement correcte de construire une grille de vignettes: en utilisant la grille CSS . Le bon choix peut être compris même s'il a une grille dans le nom. Les fonctionnalités CSS modernes sont plutôt bonnes: elles vous permettent de dire ce que vous voulez - et cela fonctionnera comme vous l'avez dit, plutôt que d'utiliser des sorts vaudous obscurs.

Et voici à quel point c'est simple:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

Terminé! Cela nous donne une grille . Et vous avez une myriade d'autres options pour jouer avec eux, tout comme la flexbox, mais c'est l'idée principale. Vous n'avez même pas besoin de styliser les éléments eux-mêmes; la plupart des travaux de mise en page sont effectués dans le conteneur.

La propriété Shorthand gridsemble un peu intimidante, mais uniquement parce qu'elle est flexible. Il dit: remplissez la grille une ligne à la fois, en générant autant de lignes que nécessaire; créez autant de colonnes de 250 pixels que vous le souhaitez et divisez également l'espace restant entre elles.

Les grilles CSS sont également pratiques pour placer les <dl>, ce qui a toujours été un énorme casse-tête: un <dl> contient n'importe quel nombre de <dt>, suivi par n'importe quel nombre de <dd> (y compris zéro). Auparavant, la seule façon de le coiffer étaitfloat, ce qui signifiait une largeur fixe. Maintenant, vous pouvez simplement spécifier <dt> dans la première colonne et <dd> dans la seconde, et la grille CSS s'occupe du reste.

À quoi cela ressemble-t-il sur une vraie page? Cette histoire avec la barre latérale? Voyez comme c'est simple:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

Terminé. Facile. Peu importe également l'ordre dans lequel répertorier les détails dans le balisage.

D'autre part

Le Web est toujours un peu un désastre. Beaucoup ne savent même pas que la flexbox et la grille sont désormais prises en charge presque universellement ; mais étant donné le temps qu'il a fallu pour passer d'une première spécification à une large implémentation, je ne peux pas leur en vouloir. Pas plus tard qu'hier, j'ai vu un tout nouveau petit site, qui consistait principalement en une énorme liste de «vignettes» de différentes largeurs, et il utilisait des flotteurs! Pas même inline-block! Je ne sais pas qui leur a appris ces hacks délicats et pourquoi il n'a pas dit un mot sur la flexbox.

Mais bien pire, je rencontre toujours régulièrement des sites qui font la mise en page entière en utilisant JavaScript . Si vous utilisez le bloqueur de scripts uMatrixVotre première expérience est un tas de texte chevauchant un autre tas de texte. Est-ce vraiment un pas en arrière? Qu'est-ce que le titre et la barre latérale sont correctement positionnés uniquement lorsque le script est exécuté? Ce n'est pas comme charger une page sans CSS - en HTML simple, rien ne peut se chevaucher par défaut! Vous devez indiquer intentionnellement de le faire!

Et puis il y a le web mobile qui, malgré toutes les bonnes intentions, s'est avéré être essentiellement une mauvaise idée. L'idée était d'utiliser des requêtes multimédia CSS sur l'écran d'un téléphone mobile qui correspondent à un site normal, mais à la place, la plupart des grands sites ont des versions mobiles complètement distinctes. Cela signifie que le site mobile n'a pas un tas de fonctions importantes et que vous devez le naviguer maladroitement sur votre téléphone, ou que la version complète du site est pleine de conneries dont personne n'a vraiment besoin.

Même dans les versions de Google Docs / Sheets / etc. pour Android, par exemple, seulement 5% des capacités des versions Web. Je ne sais pas quoi en faire.

Options non réalisées pour l'avenir

Je ne sais pas comment CSS évoluera, surtout maintenant que la flexbox et la grille ont résolu tous nos problèmes. Je suis vaguement conscient que certains travaux sont en cours sur un support mathématique plus étendu, et éventuellement sur certaines fonctions pour changer les couleurs, comme dans Sass. Il existe une API de peinture qui vous permet de générer un arrière-plan à la volée en utilisant JavaScript à l'aide de l'API Canvas, ce qui est ... plutôt cool. Apparemment, dans la spécification, j'ai déjà pu attr()calculer la valeur d'une propriété. Cela semble cool et peut même vous permettre d'implémenter des tableaux HTML entièrement en CSS, mais vous pouvez faire de même avec des variables. Je veux dire, bien, "propriétés personnalisées" (nom officiel). Je suis plus préoccupé :is()par la correspondance des listes de sélecteurs et des sous - grillespour les sous-réseaux imbriqués.

Il est beaucoup plus facile d'énumérer les éléments qui figuraient dans les plans, mais qui n'ont pas été mis en œuvre.

affichage: le run-in fait partie de CSS depuis la version 2 (en 98e), mais il n'est généralement pas pris en charge. L'idée est qu'un bloc soit inséré dans le suivant. Par exemple, ce code:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
Correspond à une telle sortie:

Titre paragraphe
paragraphe

Et, hmm, je commence à comprendre pourquoi cela n'est pas pris en charge. Il existait auparavant dans WebKit, mais il était probablement tellement inutilisable qu'il a été supprimé il y a six ans.
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

Vous êtes encore là? Tout est fini maintenant. Il est temps de rentrer à la maison.

Et, peut-être, apportez votre contribution à la confrontation avec la monoculture Blink en utilisant Firefox , y compris au téléphone , si pour une raison quelconque vous n'utilisez pas d'iPhone, ce qui interdit généralement les autres moteurs de navigation. C'est bien pire que tout ce que Microsoft a jamais fait, mais nous l'acceptons pour une raison quelconque ...

Anciens et nouveaux CSS. Histoire de la conception Web