CSS

Le navigateur détermine les styles à afficher sur un élément en fonction de la spécificité des règles CSS. Nous supposons que le navigateur a déjà déterminé les règles qui correspondent à un élément particulier. Parmi les règles correspondantes, la spécificité, quatre valeurs séparées par des virgules, a, b, c, d sont calculées pour chaque règle en fonction des éléments suivants :

1. a indique si des styles en ligne sont utilisés. Si la déclaration de propriété est un style en ligne sur l'élément, a est 1, sinon 0.
2. b est le nombre de sélecteurs d'ID.
3. c est le nombre de classes, d'attributs et de sélecteurs de pseudo-classes.
4. d est le nombre de balises et de sélecteurs de pseudo-éléments.

La spécificité résultante n'est pas un score, mais une matrice de valeurs qui peuvent être comparées colonne par colonne. Lors de la comparaison des sélecteurs pour déterminer lequel a la spécificité la plus élevée, regardez de gauche à droite et comparez la valeur la plus élevée de chaque colonne. Ainsi, une valeur dans la colonne b annulera les valeurs dans les colonnes c et d, quoi qu'elles puissent être. Ainsi, une spécificité de 0,1,0,0 serait supérieure à celle de 0,0,10,10.

Dans les cas de spécificité égale : la règle la plus récente est celle qui compte. Si vous avez écrit la même règle dans votre feuille de style (qu'elle soit interne ou externe) deux fois, alors la règle la plus basse dans votre feuille de style est plus proche de l'élément à styliser, elle est considérée comme plus spécifique et sera donc appliquée.

J'écrirais des règles CSS avec une faible spécificité afin qu'elles puissent être facilement remplacées si nécessaire. Lors de l'écriture de code de bibliothèque de composants d'interface utilisateur CSS, il est important qu'ils aient de faibles spécificités afin que les utilisateurs de la bibliothèque puissent les remplacer sans utiliser des règles CSS trop compliquées juste pour augmenter la spécificité ou recourir à !important.

• Réinitialisation (Resetting) - La réinitialisation vise à supprimer tous les styles par défaut du navigateur sur les éléments. Par exemple, les margins, paddings, font-sizes de tous les éléments sont réinitialisés pour être les mêmes. Vous devrez redéclarer le style pour les éléments typographiques courants.
• Normalisation (Normalizing) - La normalisation préserve les styles par défaut utiles plutôt que de tout "dé-styliser". Elle corrige également les bogues pour les dépendances courantes du navigateur.

Je choisirais la réinitialisation lorsque j'ai une conception de site très personnalisée ou non conventionnelle, de sorte que je doive faire beaucoup de mon propre style et que je n'aie pas besoin de conserver de style par défaut.

float est une propriété de positionnement CSS. Les éléments flottants restent une partie du flux de la page et affecteront le positionnement d'autres éléments (par exemple, le texte flottera autour des éléments flottants), contrairement aux éléments position: absolute, qui sont supprimés du flux de la page.

La propriété CSS clear peut être utilisée pour être positionnée en dessous des éléments flottants left/right/both.

Si un élément parent ne contient que des éléments flottants, sa hauteur sera réduite à zéro. Cela peut être corrigé en annulant le flottement après les éléments flottants dans le conteneur mais avant la fermeture du conteneur.

L'astuce .clearfix utilise un astucieux pseudo-sélecteur CSS (::after) pour annuler les flottements. Plutôt que de définir le dépassement sur le parent, vous lui appliquez une classe supplémentaire clearfix. Puis appliquez ce CSS :

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternativement, donnez la propriété overflow: auto ou overflow: hidden à l'élément parent, ce qui établira un nouveau contexte de formatage de bloc à l'intérieur des enfants et il s'étendra pour contenir ses enfants.

La propriété z-index en CSS contrôle l'ordre d'empilement vertical des éléments qui se chevauchent. z-index n'affecte que les éléments dont la valeur de position n'est pas static.

Sans aucune valeur z-index, les éléments s'empilent dans l'ordre où ils apparaissent dans le DOM (celui qui est le plus bas au même niveau de hiérarchie apparaît au-dessus). Les éléments avec un positionnement non statique (et leurs enfants) apparaîtront toujours au-dessus des éléments avec un positionnement statique par défaut, quelle que soit la hiérarchie HTML.

Un contexte d'empilement est un élément qui contient un ensemble de couches. Au sein d'un contexte d'empilement local, les valeurs z-index de ses enfants sont définies par rapport à cet élément plutôt qu'à la racine du document. Les couches en dehors de ce contexte — c'est-à-dire les éléments frères d'un contexte d'empilement local — ne peuvent pas s'intercaler entre les couches qu'il contient. Si un élément B se trouve au-dessus d'un élément A, un élément enfant de l'élément A, l'élément C, ne peut jamais être plus haut que l'élément B même si l'élément C a un z-index plus élevé que l'élément B.

Chaque contexte d'empilement est autonome - une fois que le contenu de l'élément est empilé, l'élément entier est considéré dans l'ordre d'empilement du contexte d'empilement parent. Quelques propriétés CSS déclenchent un nouveau contexte d'empilement, telles que opacity inférieure à 1, filter qui n'est pas none, et transform qui n'est pas none.

_Note : Ce qui qualifie exactement un élément pour créer un contexte d'empilement est listé dans cette longue liste de [règles].

Un Contexte de Formatage de Bloc (BFC) fait partie du rendu visuel CSS d'une page web dans lequel les boîtes de bloc sont agencées. Les flottants, les éléments positionnés absolument, les inline-blocks, les table-cells, les table-captions et les éléments avec un overflow autre que visible (sauf lorsque cette valeur a été propagée à la fenêtre d'affichage) établissent de nouveaux contextes de formatage de bloc.

Savoir comment établir un contexte de formatage de bloc est important, car sans cela, la boîte contenante ne contiendra pas [d'enfants flottants]. C'est similaire à l'effondrement des marges, mais plus insidieux car vous trouverez des boîtes entières s'effondrant de manières étranges.

Un BFC est une boîte HTML qui satisfait au moins une des conditions suivantes :

• La valeur de float n'est pas none.
• La valeur de position n'est ni static ni relative.
• La valeur de display est table-cell, table-caption, inline-block, flex, ou inline-flex, grid, ou inline-grid.
• La valeur de overflow n'est pas visible.

Dans un BFC, le bord extérieur gauche de chaque boîte touche le bord gauche du bloc contenant (pour le formatage de droite à gauche, les bords droits se touchent).

Les marges verticales entre les boîtes de niveau bloc adjacentes dans un BFC s'effondrent. En savoir plus sur [l'effondrement des marges].

• Méthode du div vide - <div style="clear:both;"></div>.
• Méthode Clearfix - Se référer à la classe .clearfix ci-dessus.
• Méthode overflow: auto ou overflow: hidden - Le parent établira un nouveau contexte de formatage de bloc et s'étendra pour contenir ses enfants flottants.

Dans les grands projets, j'écrirais une classe utilitaire .clearfix et je les utiliserais là où j'en ai besoin. overflow: hidden pourrait rogner les enfants si les enfants sont plus grands que le parent et n'est pas très idéal.

Les sprites CSS combinent plusieurs images en une seule image plus grande. C'est une technique couramment utilisée pour les icônes (Gmail l'utilise). Comment l'implémenter :

1. Utilisez un générateur de sprites qui regroupe plusieurs images en une seule et génère le CSS approprié.
2. Chaque image aurait une classe CSS correspondante avec les propriétés background-image, background-position et background-size définies.
3. Pour utiliser cette image, ajoutez la classe correspondante à votre élément.

Avantages :

• Réduit le nombre de requêtes HTTP pour plusieurs images (une seule requête est nécessaire par feuille de sprite). Mais avec HTTP2, le chargement de plusieurs images n'est plus un problème majeur.
• Téléchargement anticipé des ressources qui ne seraient pas téléchargées avant d'être nécessaires, comme les images qui n'apparaissent qu'aux pseudo-états :hover. Le scintillement ne serait pas visible.

• Après avoir identifié le problème et le navigateur en cause, utilisez une feuille de style distincte qui ne se charge que lorsque ce navigateur spécifique est utilisé. Cette technique nécessite cependant un rendu côté serveur.
• Utilisez des bibliothèques comme Bootstrap qui gèrent déjà ces problèmes de style pour vous.
• Utilisez autoprefixer pour ajouter automatiquement les préfixes de fournisseur à votre code.
• Utilisez Reset CSS ou Normalize.css.
• Si vous utilisez Postcss (ou une bibliothèque de transpilation similaire), il peut y avoir des plugins qui vous permettent d'opter pour l'utilisation de la syntaxe CSS moderne (et même des propositions W3C) qui transformeront ces sections de votre code en un code sûr correspondant qui fonctionnera dans les cibles que vous avez utilisées.

• Dégradation gracieuse (Graceful degradation) - La pratique de construire une application pour les navigateurs modernes tout en s'assurant qu'elle reste fonctionnelle dans les navigateurs plus anciens.
• Amélioration progressive (Progressive enhancement) - La pratique de construire une application pour un niveau de base d'expérience utilisateur, mais en ajoutant des améliorations fonctionnelles lorsqu'un navigateur le supporte.
• Utilisez [caniuse.com] pour vérifier le support des fonctionnalités.
• Autoprefixer pour l'insertion automatique des préfixes de fournisseur.
• Détection des fonctionnalités à l'aide de [Modernizr].
• Utilisez les requêtes de fonctionnalités CSS [@support]

Ces techniques sont liées à l'accessibilité (a11y).

• width: 0; height: 0. L'élément n'occupe plus d'espace sur l'écran, ce qui le rend invisible.
• position: absolute; left: -99999px. Le positionner en dehors de l'écran.
• text-indent: -9999px. Cela ne fonctionne que sur le texte à l'intérieur des éléments block. C'est une astuce largement utilisée et célèbre, mais elle présente [certains inconvénients] comme la cause de problèmes de performances, vous pourriez donc envisager d'utiliser text-indent: 100% à la place.
• Meta tags. Par exemple en utilisant Schema.org, RDF et JSON-LD.
• WAI-ARIA. Une spécification technique du W3C qui précise comment augmenter l'accessibilité des pages web.

Même si WAI-ARIA est la solution idéale, j'opterais pour l'approche de positionnement absolute, car elle présente le moins d'inconvénients, fonctionne pour la plupart des éléments et est une technique facile.

Avant que Flex ne devienne populaire (autour de 2014), le système de grille basé sur float était le plus fiable car il bénéficiait encore du plus grand support navigateur parmi les systèmes alternatifs existants (flex, grid). Bootstrap utilisait l'approche float jusqu'à Bootstrap 4 qui est passé à l'approche basée sur flex. Au moment de la rédaction (2020), flex est l'approche recommandée pour la construction de systèmes de grille et bénéficie d'un [bon support navigateur].

Pour les plus aventureux, ils peuvent se pencher sur [CSS Grid Layout], qui utilise la toute nouvelle propriété grid ; c'est encore mieux que flex pour construire des mises en page en grille et ce sera la façon de facto de le faire à l'avenir.

Oui. Un exemple serait la transformation d'une navigation à onglets empilés en une navigation à onglets fixe en bas au-delà d'un certain point de rupture.

Oui, il existe plusieurs façons de colorer des formes (y compris en spécifiant des attributs sur l'objet) en utilisant du CSS en ligne, une section CSS intégrée ou un fichier CSS externe. La plupart des SVG que vous trouverez sur le web utilisent du CSS en ligne, mais il y a des avantages et des inconvénients associés à chaque type.

La coloration de base peut être effectuée en définissant deux attributs sur le nœud : fill et stroke. fill définit la couleur à l'intérieur de l'objet et stroke définit la couleur de la ligne tracée autour de l'objet. Vous pouvez utiliser les mêmes schémas de nommage de couleurs CSS que vous utilisez en HTML, qu'il s'agisse de noms de couleurs (c'est-à-dire red), de valeurs RGB (c'est-à-dire rgb(255,0,0)), de valeurs Hex, de valeurs RGBA, etc.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Le fill="purple" ci-dessus est un exemple d'attribut de présentation. Fait intéressant, et contrairement aux styles en ligne comme style="fill: purple" qui se trouve également être un attribut, les attributs de présentation peuvent être [annulés par les styles CSS] définis dans une feuille de style. Ainsi, si vous faites quelque chose comme svg { fill: blue; }, cela annulera le remplissage violet que nous avons défini.

Oui, il existe quatre types de propriétés @media (y compris screen) :

• all - pour tous les types de périphériques média
• print - pour les imprimantes
• speech - pour les lecteurs d'écran qui « lisent » la page à voix haute
• screen - pour les écrans d'ordinateur, les tablettes, les smartphones, etc.

Voici un exemple d'utilisation du type de média print :

@media print {
  body {
    color: black;
  }
}

Tout d'abord, comprenez que les navigateurs font correspondre les sélecteurs de droite à gauche (sélecteur clé). Les navigateurs filtrent les éléments dans le DOM selon le sélecteur clé et remontent ses éléments parents pour déterminer les correspondances. Plus la longueur de la chaîne de sélecteurs est courte, plus vite le navigateur peut déterminer si cet élément correspond au sélecteur. Évitez donc les sélecteurs clés qui sont des balises et des sélecteurs universels. Ils correspondent à un grand nombre d'éléments et les navigateurs devront faire plus de travail pour déterminer si les parents correspondent.

La méthodologie [BEM (Block Element Modifier)] recommande que tout ait une seule classe, et, là où vous avez besoin d'une hiérarchie, cela est également intégré dans le nom de la classe, ce qui rend naturellement le sélecteur efficace et facile à annuler.

Soyez conscient des propriétés CSS qui [déclenchent] le reflow, le repaint et le compositing. Évitez d'écrire des styles qui modifient la mise en page (déclenchent le reflow) lorsque cela est possible.

Avantages :

• Le CSS est plus maintenable.
• Facile d'écrire des sélecteurs imbriqués.
• Variables pour un thème cohérent. Peut partager des fichiers de thème entre différents projets.
• Mixins pour générer du CSS répété.
• Les fonctionnalités de Sass comme les boucles, les listes et les cartes peuvent faciliter la configuration et la rendre moins verbeuse.
• Diviser votre code en plusieurs fichiers. Les fichiers CSS peuvent également être divisés, mais cela nécessitera une requête HTTP pour télécharger chaque fichier CSS.

Inconvénients :

• Nécessite des outils de prétraitement. Le temps de recompilation peut être lent.
• Ne pas écrire de CSS actuellement et potentiellement utilisable. Par exemple, en utilisant quelque chose comme [postcss-loader] avec [webpack], vous pouvez écrire du CSS potentiellement compatible avec l'avenir, vous permettant d'utiliser des choses comme les variables CSS au lieu des variables Sass. Ainsi, vous apprenez de nouvelles compétences qui pourraient être rentables si/quand elles deviennent standardisées.

Ce que j'aime :

• Principalement les avantages mentionnés ci-dessus.
• Moins est écrit en JavaScript, ce qui fonctionne bien avec Node.

Ce que je n'aime pas :

• J'utilise Sass via node-sass, qui est une liaison pour LibSass écrite en C++. Je dois fréquemment le recompiler lorsque je change de version de Node.
• Dans Less, les noms de variables sont préfixés par @, ce qui peut être confondu avec des mots-clés CSS natifs comme @media, @import et la règle @font-face.

Utilisez @font-face et définissez font-family pour différentes font-weights.

Cette partie est liée à ce qui précède concernant l'écriture de CSS efficace. Les navigateurs font correspondre les sélecteurs de droite à gauche (sélecteur clé). Les navigateurs filtrent les éléments dans le DOM selon le sélecteur clé et remontent ses éléments parents pour déterminer les correspondances. Plus la longueur de la chaîne de sélecteurs est courte, plus vite le navigateur peut déterminer si cet élément correspond au sélecteur.

Par exemple, avec ce sélecteur p span, les navigateurs trouvent d'abord tous les éléments <span> et remontent leur parent jusqu'à la racine pour trouver l'élément <p>. Pour un <span> particulier, dès qu'il trouve un <p>, il sait que le <span> correspond et peut arrêter sa correspondance.

Un pseudo-élément CSS est un mot-clé ajouté à un sélecteur qui vous permet de styliser une partie spécifique du ou des éléments sélectionnés. Ils peuvent être utilisés pour la décoration (:first-line, :first-letter) ou l'ajout d'éléments au balisage (combiné avec content: ...) sans avoir à modifier le balisage (:before, :after).

• :first-line et :first-letter peuvent être utilisés pour décorer le texte.
• Utilisé dans l'astuce .clearfix comme montré ci-dessus pour ajouter un élément à espace nul avec clear: both.
• Les flèches triangulaires dans les info-bulles utilisent :before et :after. Cela favorise la séparation des préoccupations car le triangle est considéré comme faisant partie du style et non vraiment du DOM.

Le modèle de boîte CSS décrit les boîtes rectangulaires qui sont générées pour les éléments dans l'arbre du document et agencées selon le modèle de formatage visuel. Chaque boîte a une zone de contenu (par exemple, du texte, une image, etc.) et des zones facultatives de padding, border et margin environnantes.

Le modèle de boîte CSS est responsable du calcul de :

• L'espace qu'occupe un élément de bloc.
• Si les bordures et/ou les marges se chevauchent ou s'effondrent.
• Les dimensions d'une boîte.

Le modèle de boîte a les règles suivantes :

• Les dimensions d'un élément de bloc sont calculées par width, height, padding, borders et margins.
• Si aucune height n'est spécifiée, un élément de bloc sera aussi haut que le contenu qu'il contient, plus le padding (sauf s'il y a des flottants, pour lesquels voir ci-dessous).
• Si aucune width n'est spécifiée, un élément de bloc non flottant s'étendra pour s'adapter à la largeur de son parent moins le padding.
• La height d'un élément est calculée par la height du contenu.
• La width d'un élément est calculée par la width du contenu.
• Par défaut, les paddings et les borders ne font pas partie de la width et de la height d'un élément.

• Par défaut, les éléments ont box-sizing: content-box appliqué, et seule la taille du contenu est prise en compte.
• box-sizing: border-box modifie la façon dont la width et la height des éléments sont calculées, le border et le padding étant également inclus dans le calcul.
• La height d'un élément est maintenant calculée par la height du contenu + padding vertical + border vertical.
• La width d'un élément est maintenant calculée par la width du contenu + padding horizontal + border horizontal.
• Prendre en compte les paddings et les borders comme faisant partie de notre modèle de boîte correspond mieux à la façon dont les designers imaginent réellement le contenu dans les grilles.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Description | | :-- | :-- | | none | N'affiche pas un élément (l'élément n'affecte plus la mise en page du document). Tous les éléments enfants ne sont également plus affichés. Le document est rendu comme si l'élément n'existait pas dans l'arbre du document | | block | L'élément consomme toute la ligne dans la direction du bloc (qui est généralement horizontale) | | inline | Les éléments peuvent être agencés côte à côte | | inline-block | Similaire à inline, mais permet certaines propriétés de block comme la définition de width et height | | table | Se comporte comme l'élément <table> | | table-row | Se comporte comme l'élément <tr> | | table-cell | Se comporte comme l'élément <td> | | list-item | Se comporte comme un élément <li> ce qui lui permet de définir list-style-type et list-style-position |

Je vais y ajouter une comparaison avec block pour la bonne mesure.

| | block | inline-block | inline | | --- | --- | --- | --- | | Taille | Remplit la largeur de son conteneur parent. | Dépend du contenu. | Dépend du contenu. | | Positionnement | Commence sur une nouvelle ligne et ne tolère aucun élément HTML à côté de lui (sauf si vous ajoutez float) | Se déplace avec les autres contenus et permet d'autres éléments à côté de lui. | Se déplace avec les autres contenus et permet d'autres éléments à côté de lui. | | Peut spécifier width et height | Oui | Oui | Non. Sera ignoré si défini. | | Peut être aligné avec vertical-align | Non | Oui | Oui | | Marges et paddings | Tous les côtés sont respectés. | Tous les côtés sont respectés. | Seuls les côtés horizontaux sont respectés. Les côtés verticaux, s'ils sont spécifiés, n'affectent pas la mise en page. L'espace vertical qu'il occupe dépend de line-height, même si la border et le padding apparaissent visuellement autour du contenu. | | Float | - | - | Devient comme un élément block où vous pouvez définir des marges et des paddings verticaux. |

Un élément positionné est un élément dont la propriété position calculée est relative, absolute, fixed ou sticky.

• static - La position par défaut ; l'élément s'insérera dans la page comme il le ferait normalement. Les propriétés top, right, bottom, left et z-index ne s'appliquent pas.
• relative - La position de l'élément est ajustée par rapport à lui-même, sans modifier la mise en page (et laissant ainsi un espace pour l'élément où il aurait été s'il n'avait pas été positionné).
• absolute - L'élément est retiré du flux de la page et positionné à un endroit spécifié par rapport à son ancêtre positionné le plus proche, le cas échéant, ou sinon par rapport au bloc de conteneur initial. Les boîtes positionnées absolument peuvent avoir des marges, et elles ne s'effondrent pas avec d'autres marges. Ces éléments n'affectent pas la position des autres éléments.
• fixed - L'élément est retiré du flux de la page et positionné à un endroit spécifié par rapport à la fenêtre d'affichage et ne bouge pas lors du défilement.
• sticky - Le positionnement collant est un hybride de positionnement relatif et fixe. L'élément est traité comme positionné relative jusqu'à ce qu'il franchisse un seuil spécifié, moment auquel il est traité comme positionné fixed.

• Bootstrap - Cycle de publication lent. Bootstrap 4 est en alpha depuis près de 2 ans. J'ajouterais un composant de bouton avec un spinner, car il est très utilisé.
• Semantic UI - La structure du code source rend la personnalisation du thème extrêmement difficile à comprendre. Son système de thème non conventionnel est une plaie à personnaliser. Chemin de configuration codé en dur dans la bibliothèque du fournisseur. Pas bien conçu pour annuler les variables contrairement à Bootstrap.
• Bulma - Beaucoup de classes et de balisage non sémantiques et superflus requis. Pas rétrocompatible. La mise à niveau des versions casse l'application de manière subtile.

Oui. Flexbox est principalement destiné aux mises en page unidimensionnelles tandis que Grid est destiné aux mises en page bidimensionnelles.

Flexbox résout de nombreux problèmes courants en CSS, tels que le centrage vertical des éléments dans un conteneur, le pied de page collant, etc. Bootstrap et Bulma sont basés sur Flexbox, et c'est probablement la méthode recommandée pour créer des mises en page de nos jours. J'ai déjà essayé Flexbox, mais j'ai rencontré des problèmes d'incompatibilité avec certains navigateurs (Safari) lors de l'utilisation de flex-grow, et j'ai dû réécrire mon code en utilisant des inline-blocks et des calculs pour déterminer les largeurs en pourcentages, ce n'était pas une bonne expérience.

Grid est de loin l'approche la plus intuitive pour créer des mises en page basées sur des grilles (il vaut mieux qu'elle le soit !), mais le support des navigateurs n'est pas très répandu pour le moment.

Notez que ces deux approches ne sont pas exclusives.

Rendre un site web réactif signifie que certains éléments réagiront en adaptant leur taille ou d'autres fonctionnalités en fonction de la taille de l'écran de l'appareil, généralement la largeur de la fenêtre d'affichage, via les media queries CSS, par exemple, en réduisant la taille de la police sur les petits appareils.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Une stratégie mobile-first est également réactive, mais elle convient que nous devrions définir par défaut tous les styles pour les appareils mobiles, et n'ajouter des règles réactives spécifiques aux autres appareils que plus tard. En suivant l'exemple précédent :

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Une stratégie mobile-first présente 2 avantages principaux :

• Elle est plus performante sur les appareils mobiles, car toutes les règles qui leur sont appliquées n'ont pas besoin d'être validées par rapport à des media queries.
• Elle oblige à écrire un code plus propre en ce qui concerne les règles CSS réactives.

Le design réactif et le design adaptatif tentent tous deux d'optimiser l'expérience utilisateur sur différents appareils, en s'adaptant à différentes tailles de fenêtre d'affichage, résolutions, contextes d'utilisation, mécanismes de contrôle, etc.

Le design réactif fonctionne sur le principe de la flexibilité - un seul site web fluide qui peut avoir une belle apparence sur n'importe quel appareil. Les sites web réactifs utilisent des requêtes média, des grilles flexibles et des images réactives pour créer une expérience utilisateur qui s'adapte et change en fonction d'une multitude de facteurs. C'est comme une seule balle qui grandit ou rétrécit pour passer à travers plusieurs cerceaux différents.

Le design adaptatif ressemble davantage à la définition moderne de l'amélioration progressive. Au lieu d'un seul design flexible, le design adaptatif détecte l'appareil et d'autres caractéristiques, puis fournit la fonctionnalité et la mise en page appropriées basées sur un ensemble prédéfini de tailles de fenêtre d'affichage et d'autres caractéristiques. Le site détecte le type d'appareil utilisé et fournit la mise en page prédéfinie pour cet appareil. Au lieu d'une seule balle passant à travers plusieurs cerceaux de tailles différentes, vous auriez plusieurs balles différentes à utiliser en fonction de la taille du cerceau.

Ces deux méthodes présentent des problèmes qui doivent être pesés :

• Le design réactif peut être assez difficile, car vous utilisez essentiellement une seule mise en page, bien que réactive, pour s'adapter à toutes les situations. Comment définir les points d'arrêt des requêtes média est l'un de ces défis. Utilisez-vous des valeurs de point d'arrêt standardisées ? Ou utilisez-vous des points d'arrêt qui ont un sens pour votre mise en page particulière ? Que se passe-t-il si cette mise en page change ?
• Le design adaptatif nécessite généralement la détection de l'agent utilisateur, ou la détection des DPI, etc., tout cela pouvant s'avérer peu fiable.

Retina n'est qu'un terme marketing pour désigner les écrans haute résolution avec un rapport de pixels supérieur à 1. L'essentiel à savoir est que l'utilisation d'un rapport de pixels signifie que ces écrans émulent un écran à résolution inférieure afin d'afficher des éléments de la même taille. Aujourd'hui, nous considérons tous les appareils mobiles comme des écrans Retina de facto.

Les navigateurs rendent par défaut les éléments du DOM en fonction de la résolution de l'appareil, à l'exception des images.

Afin d'avoir des graphiques nets et esthétiques qui tirent le meilleur parti des écrans Retina, nous devons utiliser des images haute résolution chaque fois que possible. Cependant, l'utilisation systématique des images de la plus haute résolution aura un impact sur les performances, car davantage d'octets devront être transférés.

Pour surmonter ce problème, nous pouvons utiliser des images réactives, telles que spécifiées dans HTML5. Cela nécessite de mettre à disposition du navigateur différents fichiers de résolution de la même image et de le laisser décider quelle image est la meilleure, en utilisant l'attribut html srcset et éventuellement sizes, par exemple :

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Il est important de noter que les navigateurs qui ne prennent pas en charge srcset de HTML5 (par exemple, IE11) l'ignoreront et utiliseront src à la place. Si nous avons vraiment besoin de prendre en charge IE11 et que nous voulons fournir cette fonctionnalité pour des raisons de performances, nous pouvons utiliser un polyfill JavaScript, par exemple.

Pour les icônes, j'opterais également pour l'utilisation de SVG et de polices d'icônes lorsque cela est possible, car elles s'affichent de manière très nette quelle que soit la résolution.

translate() est une valeur de la propriété CSS transform. Modifier transform ou opacity ne déclenche pas de reflow ou de repaint du navigateur, mais déclenche des compositions ; tandis que modifier le positionnement absolu déclenche un reflow. transform fait en sorte que le navigateur crée une couche GPU pour l'élément, mais la modification des propriétés de positionnement absolu utilise le CPU. Par conséquent, translate() est plus efficace et entraînera des temps de peinture plus courts pour des animations plus fluides.

Lorsque vous utilisez translate(), l'élément occupe toujours son espace d'origine (un peu comme position: relative), contrairement à la modification du positionnement absolu.