Quelle est la définition d'un 'hack CSS'?

Si vous écrivez CSS depuis au moins quelques années, vous avez très certainement utilisé un hack CSS. Mais si vous êtes relativement nouveau dans CSS, il est possible que vous ayez entendu le terme mais que vous ne savez pas exactement ce que cela signifie.

Dans ce post, je vais expliquer ce que signifie exactement le terme hack CSS et comment un hack CSS est utilisé. Mais d'abord, quelques antécédents pour expliquer pourquoi je pensais que ce post était même nécessaire.

Les plats clés

• Un hack CSS est une technique qui applique des styles à des versions de navigateur spécifiques tout en étant ignorés par d'autres. Il est souvent utilisé pour surmonter les incohérences ou les limitations des navigateurs, en particulier dans les versions plus anciennes de navigateurs qui ne soutiennent pas pleinement les dernières normes CSS.
• Les hacks CSS ne sont pas nécessairement invalides CSS. Certains hacks peuvent produire des avertissements ou des erreurs lorsqu'ils traversent un validateur CSS, mais d'autres peuvent passer sans problème. Il est crucial de séparer et de documenter les hacks pour une refactorisation plus facile lorsque le temps et le budget le permettent.
• Bien que les hacks CSS puissent être utiles dans certaines situations, ils sont généralement considérés comme une mauvaise pratique car ils peuvent rendre le code plus complexe et plus difficile à maintenir. Il est conseillé d'utiliser des techniques CSS standard et des sites Web de conception pour se dégrader gracieusement dans les navigateurs plus anciens.

De nombreux développeurs semblent mal comprendre le terme

Comme beaucoup d'entre vous le savent, SitePoint a récemment publié les résultats d'une grande enquête CSS que j'ai réunie. L'une des questions que le sondage posait était ce qui suit:

Lequel des navigateurs Microsoft suivants écrivez-vous ou incluez-vous actuellement des hacks CSS?

Lorsque j'ai étudié les résultats pour la première fois, j'ai semblé avoir raté une bizarrerie dans les résultats pour cette question. Heureusement, David Storey, qui est ingénieur travaillant sur le nouveau navigateur de Microsoft, l'a souligné. Sur les 1 418 personnes qui ont répondu à cette question, les résultats sont allés comme ceci:

• IE9 - 62%
• ie10 - 61%
• IE11 - 57%
• bord - 45%
• ie8 - 35%
• ie7 - 9%
• ie6 - 3%
• ie5.5 - 1%

Il est déjà assez grave que plus de 60% des développeurs prétendent écrire des hacks CSS pour IE9 et IE10 - mais 45% pour Edge? Bien qu'il existe des hacks publiés pour Edge, ils ne sont pas encore sur le site Web de Browserhacks, il semble donc peu probable que tant de gens utilisent des hacks pour ce navigateur. Mais la question la plus importante est: quels problèmes les développeurs sont-ils rencontrés avec le rendu CSS dans Edge qu'ils nécessitent des hacks?

Au début, je pensais qu'il se pourrait que de nombreux participants confondnt les hacks avec la détection du navigateur via le reniflement de l'agent utilisateur. Mais même cela n'expliquerait pas pourquoi le nombre est si élevé pour Edge.

Ensuite, j'ai réalisé qu'ils devaient avoir mal compris la question complètement; Ils pensent que «écrire des hacks CSS pour Browser X» est le même que «support Browser X». Il n'y a vraiment aucune autre explication logique, surtout lorsque vous considérez les pourcentages élevés pour les autres navigateurs qui ne devraient pas non plus avoir besoin de hacks.

Alors, définissons exactement ce qu'est un hack, pour ceux qui pourraient être confus par le terme.

Qu'est-ce qu'un piratage CSS?

Pour que quelque chose dans votre fichier CSS soit considéré comme un «piratage», il doit appliquer ses styles uniquement aux navigateurs ciblés tandis que tous les autres navigateurs l'ignorent.

Considérons un exemple. Ceci est un piratage CSS:

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Le CSS dans l'exemple ci-dessus (souvent appelé «Star-HTML Hack») ciblera seules les versions Internet Explorer 6 et ci-dessous . La plupart des développeurs qui soutiennent IE6 ne se soucient pas vraiment de rien avant IE6, donc cela fonctionne généralement comme un piratage IE6 uniquement.

La pièce qui est le «piratage», est l'astérisque suivi du «HTML». Il s'agit d'une combinaison du sélecteur universel et du sélecteur de type élément. À un moment donné, quelqu'un a découvert que ces deux sélecteurs ont précédé un autre sélecteur ne fonctionnent que dans certaines versions de IE tout en n'ayant aucun effet dans d'autres navigateurs. Cela signifie que la marge gauche sur l'élément .bar. Dans ce cas, le CSS est en fait valide, vous n'obtiendrez donc pas d'erreur ou d'avertissement à ce sujet (plus à ce sujet plus tard).

Voici un autre exemple tiré du site Web de Browserhacks, cette fois ciblant IE11:

<span>_<span>:-ms-fullscreen, :root .selector</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Je ne vais pas entrer dans les détails de la raison pour laquelle il s'agit d'un pirat `` IE11 et au-dessus '', donc je suppose que cela signifie que cela fonctionnera également dans le navigateur Edge de Microsoft, mais je ne l'ai pas vérifié.

Le point important ici n'est pas quels navigateurs sont ciblés, mais que nous sommes tous sur la même longueur d'onde pour comprendre ce qui est un piratage CSS.

Les piratages CSS sont-ils invalides CSS?

sont-ils

Si vous avez des hacks dans votre feuille de style, il est possible que votre CSS produise des avertissements et / ou des erreurs si vous l'exécutez via le validateur CSS du W3C. Mais ce n'est pas une garantie, ni un moyen de reconnaître si quelque chose est un piratage.

Il est possible que votre CSS puisse contenir des hacks et ne produire aucun avertissement ni erreurs. Par exemple, si les seuls hacks CSS que vous utilisez ciblent IE6 en utilisant le hack Star-HTML, vos feuilles de style valideront très bien sans aucune erreur ou avertisseur associé aux hacks.

De plus, certains hacks (comme le piratage IE11 que j'ai discuté ci-dessus) utilisent le code spécifique au fournisseur (par exemple: -ms-fullScreen). Dans un tel cas, les paramètres par défaut du validateur peuvent afficher votre CSS avec le message d'écran vert «passer»:

Mais si vous faites défiler vers le bas sur l'écran du validateur, vous verrez des avertissements comme ceci:

Dans ce cas, il me précède parce que: -ms-fullScreen est considéré comme «une pseudo-classe étendue du fournisseur inconnu». Si vous vous sentez plus à l'aise de visualiser ce type de CSS comme une erreur au lieu d'un simple avertissement, vous pouvez ajuster les paramètres du validateur à l'aide de la section "plus d'options" sous la zone d'entrée du validateur:

La modification de l'option «Extensions des fournisseurs» en «erreurs» empêchera une feuille de style de passer la validation si elle contient des préfixes de fournisseurs ou d'autres CS spécifiques au navigateur (pas nécessairement des pirates).

D'un autre côté, vous pourriez utiliser quelque chose comme ceci:

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Les cibles CSS ci-dessus IE8 et ci-dessous. Le «piratage» est la combinaison de la barre arrière et des neuf (9). La plupart des navigateurs ignoreront la ligne complète, car la partie 9 rend la ligne non valide CSS. Mais, pour une raison quelconque, les versions Internet Explorer 8 et inférieures le considèrent toujours comme valide et appliquera le paramètre de marge.

Dans ce cas, cependant, quels que soient les paramètres que vous choisissez pour le validateur, il affichera un message d'erreur et la feuille de style ne passera pas la validation:

Quelles techniques ne sont pas des pirates?

Les méthodes et techniques suivantes ne doivent pas nécessairement être classées comme CSS Hacks:

! Les déclarations importantes ne sont pas des hacks

Une gamme de CSS avec le! Mot-clé important annexé est un problème complètement différent. Ceci est un CSS valide et n'est pas utilisé pour cibler un navigateur spécifique. Ce n'est pas un hack, mais il pourrait être considéré comme un mauvais CSS.

Les préfixes des fournisseurs ne sont pas nécessairement des pirates

Les préfixes des fournisseurs ciblent les navigateurs spécifiques, mais ce ne sont pas ce que nous appelons habituellement des hacks. Dans la plupart des cas, si vous utilisez des préfixes de fournisseurs, vous fournissez également un code standard d'accompagnement valide. Ce n'est pas un hack. Cela étant dit, il y a des cas où vous rédigeriez un code spécifique au fournisseur pour cibler un navigateur, qualifiant ainsi de piratage. Le code ci-dessus qui utilise _: - MS-FullScreen est un exemple. Un autre bon exemple est le déclenchement de l'accélération matérielle Dans les navigateurs WebKit. Mais les préfixes des fournisseurs, pour la plupart, sont un sujet distinct. En fait, le W3C a une documentation sur le code spécifique au fournisseur, soutenant l'idée que ceux-ci ne devraient pas, en eux-mêmes, être considérés comme des hacks.

Les sélecteurs de haute spécificité ne sont pas des hacks

Être vraiment spécifique avec vos sélecteurs pour essayer de remplacer quelque chose dans une autre partie d'une feuille de style (par exemple. Body .Content #sidebar p) n'est pas un piratage CSS. C'est un mauvais CSS, mais ce n'est pas un hack.

La vieille syntaxe n'est pas un piratage

Un bon exemple de ceci est le code complexe requis pour la prise en charge profonde du navigateur dans Flexbox. Outre le fait que ce n'est probablement pas nécessaire aujourd'hui, je ne classerais pas ce genre de chose comme un hack. C'était un code valide lorsque ces navigateurs l'ont soutenu, donc cela pourrait avoir le même effet qu'un hack, mais je ne pense pas que ce soit la même chose.

Qu'en est-il des commentaires conditionnels?

Les commentaires conditionnels qui vous permettent d'écrire CSS ou même HTML pour cibler certaines versions d'Internet Explorer (ou même pour exclure certaines versions d'Internet Explorer) sont un peu une zone grise. S'ils sont écrits d'une certaine manière, ils sont des HTML valides, mais ils sont «hacky».

En 2008, Paul Irish a popularisé ce que nous appelons des «classes conditionnelles», que je suis sûr que beaucoup d’entre nous ont utilisées. Ceux-ci utilisent des commentaires conditionnels pour produire des classes que vous pouvez utiliser dans votre feuille de style pour cibler des versions spécifiques de IE à l'aide de CSS valides.

Ainsi, l'utilisation des commentaires conditionnels est-elle un «piratage CSS»? Je dirais oui, juste parce qu'ils accomplissent exactement la même chose prévue lors de l'utilisation d'un piratage CSS plus habituel.

devriez-vous utiliser les pirates CSS?

Comme c'est le cas avec de nombreux sujets de développement Web, la réponse ici n'est pas simplement oui ou non . La bonne réponse est cela dépend . La plupart des puristes diront ne pas les utiliser. Mais ce n'est souvent pas si simple. En ce qui concerne les hacks, mon conseil est le suivant:

1. Faites tout ce qui est en votre pouvoir, dans le budget et les contraintes de temps du projet, pour écrire CSS valide et basé sur des normes, sans utiliser de normes sans utiliser de piratage.
2. Si vous avez épuisé toutes les avenues ou si vous n'avez pas le temps ou le budget pour résoudre le problème avec CSS valide et sans piratage, puis allez-y et utilisez un piratage.
3. Lorsque vous écrivez vos hacks, faites quelque chose comme ce que Harry Roberts recommande, afin que vos hacks soient séparés et plus faciles à refactor lorsque votre temps et votre budget permettent.
4. Incluez toujours des commentaires (ou de la documentation) avec le piratage et essayez de refacter le code dès que possible.

en résumé

Si vous ne vous souvenez de rien d'autre de ce post, rappelez-vous ceci:

A CSS Hack applique CSS dans une ou plusieurs versions de navigateur spécifiques tandis que ce même CSS sera ignoré par d'autres navigateurs.

C'est la définition simple d'un piratage CSS. Donc, ce n'est pas parce que vous prenez la prise en charge de Microsoft Edge dans votre CSS que vous écrivez des hacks pour Edge; Le support est un sujet complètement différent.

Il pourrait y avoir quelques choses dans ce post que tout le monde n'est pas d'accord, mais je pense que la plupart des développeurs qui comprennent ce que sont les hacks seront d'accord avec le résumé de conclusion ci-dessus.

Si j'ai laissé quelque chose de côté ou que j'ai fait des erreurs, n'hésitez pas à me le faire savoir dans les commentaires et que je ferai des corrections nécessaires.

Questions fréquemment posées (FAQ) sur les pirates CSS

Quel est le but d'un hack CSS?

Un piratage CSS est une technique utilisée par les développeurs Web pour créer un style ou une disposition spécifique qui peut ne pas être possible avec les règles CSS standard. Ces hacks sont souvent utilisés pour surmonter les incohérences ou les limitations du navigateur. Par exemple, un développeur peut utiliser un piratage CSS pour s'assurer qu'un site Web s'affiche correctement dans les anciennes versions d'Internet Explorer, qui peut ne pas prendre en charge entièrement les dernières normes CSS. Cependant, il est important d'utiliser des pirates CSS avec parcimonie et uniquement lorsque cela est nécessaire, car ils peuvent rendre votre code plus complexe et plus difficile à maintenir.

Comment puis-je identifier un piratage CSS?

CSS Hacks Souvent souvent Impliquez l'utilisation de sélecteurs ou de propriétés CSS de manière non conventionnelle. Par exemple, un développeur peut utiliser un piratage CSS pour cibler un navigateur spécifique en exploitant un bogue ou une fonctionnalité unique à ce navigateur. Cela pourrait impliquer l'utilisation d'une propriété CSS qui n'est reconnue que par ce navigateur ou l'utilisation d'un sélecteur CSS d'une manière que seul ce navigateur comprend. Si vous voyez un code CSS qui semble inhabituel ou ne suit pas la syntaxe CSS standard, il peut s'agir d'un piratage CSS.

Les pirates CSS sont-elles une mauvaise pratique?

Alors que les pirates CSS peuvent être utiles dans Certaines situations, elles sont généralement considérées comme une mauvaise pratique. En effet, ils peuvent rendre votre code plus difficile à comprendre et à entretenir, et ils peuvent provoquer un comportement inattendu dans différents navigateurs. Au lieu d'utiliser des hacks CSS, il est généralement préférable d'utiliser des techniques CSS standard et de concevoir votre site Web d'une manière qui dégrade gracieusement dans les navigateurs plus âgés.

Quels sont les hacks CSS courants?

Certains hacks CSS courants incluent le «hack de modèle de boîte», qui est utilisé pour résoudre les problèmes de mise en page causés par les différences dans la façon dont les navigateurs calculent la largeur et la hauteur des éléments, et Le «Star Hack», qui est utilisé pour cibler Internet Explorer 7 et ci-dessous. Un autre piratage CSS commun est le «hack de soulignement», qui est utilisé pour cibler Internet Explorer 6 et moins. Utiliser CSS Hacks, c'est concevoir votre site Web d'une manière compatible avec tous les principaux navigateurs. Cela peut impliquer d'utiliser une réinitialisation CSS pour garantir que vos styles sont appliqués de manière cohérente sur différents navigateurs et d'éviter l'utilisation de fonctionnalités CSS qui ne sont pas largement prises en charge. De plus, vous pouvez utiliser des outils comme puis-je utiliser pour vérifier la compatibilité du navigateur de différentes fonctionnalités CSS.

Quelles sont les alternatives aux hacks CSS?

Au lieu d'utiliser des hacks CSS, vous pouvez utiliser des fonctionnalités Des bibliothèques de détection comme Modernizr pour détecter si une fonctionnalité CSS spécifique est prise en charge par le navigateur de l'utilisateur. Vous pouvez ensuite utiliser ces informations pour appliquer différents styles ou dispositions en fonction des capacités du navigateur. Une autre alternative consiste à utiliser des préprocesseurs CSS comme SASS ou moins, qui vous permettent d'écrire du code CSS plus puissant et maintenable.

Comment puis-je en savoir plus sur les pirates CSS?

Il existe de nombreuses ressources disponibles disponibles. En ligne où vous pouvez en savoir plus sur les hacks CSS. Des sites Web comme CSS-Tricks et Smashing Magazine publient souvent des articles sur les hacks CSS et d'autres techniques CSS avancées. De plus, vous pouvez trouver de nombreux tutoriels et exemples de piratage CSS sur des sites Web comme Codepen et JSFiddle.

Les piratages CSS sont-ils toujours pertinents aujourd'hui?

Alors que les pirates CSS étaient plus courants dans le passé, ils sont Moins pertinent aujourd'hui en raison de l'amélioration de la conformité des normes des navigateurs modernes. Cependant, il existe encore des situations où un piratage CSS peut être nécessaire, par exemple lorsque vous devez prendre en charge les navigateurs plus âgés ou contourner un bogue de navigateur. Par conséquent, il est toujours utile de comprendre ce que sont les hacks CSS et comment ils fonctionnent.

Les hacks CSS peuvent-ils affecter les performances de mon site Web?

Les hacks CSS peuvent potentiellement affecter les performances de votre site Web, en particulier s'ils sont utilisés excessivement. En effet, ils peuvent rendre votre code CSS plus complexe et plus difficile à analyser le navigateur. De plus, certains hacks CSS impliquent l'utilisation de propriétés CSS ou de sélecteurs qui ne sont pas optimisés pour les performances.

Comment puis-je tester l'efficacité d'un piratage CSS?

Vous pouvez tester l'efficacité d'un piratage CSS En utilisant des outils de développeur de navigateur pour inspecter les styles appliqués à un élément. Vous pouvez également utiliser des outils en ligne comme Browserstack pour tester l'apparence et le comportement de votre site Web dans différents navigateurs. De plus, vous pouvez utiliser des outils de test automatisés comme le sélénium pour vous assurer que votre site Web fonctionne correctement dans une gamme de navigateurs et d'appareils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!