Quels sont les meilleurs moyens d'implémenter des CSS croisés?
Quels sont les meilleurs moyens d'implémenter des CSS croisés?
Règle: une approche pour une réponse.
Vous pouvez utiliser commentaires conditionnels pour résoudre les problèmes liés à Internet Explorer. En dehors de cela, vous ne devriez jamais avoir besoin de cibler Firefox/Chrome/Opera séparément, ils supportent tous les standards.
La mise en cache ne devrait pas y entrer; vous devriez servir le même code pour tous les navigateurs.
Le moyen le plus simple et le plus simple consiste à utiliser une bibliothèque. Des bibliothèques telles que OOCSS, Blueprint ou 960gs sont déjà conçues pour reproduire leur affichage sur les principaux navigateurs. La plupart du temps, il ne vous reste plus qu'à vous assurer que vos styles personnalisés sont compatibles avec tous les navigateurs et que votre marquage ne pose aucun problème.
Évitez les pirates comme la peste dans la mesure du possible (oui, utilisez des conditions).
Lorsque je lis des questions et réponses comme celle-ci, je commence à penser que je pourrais être fou, mais j’ai écrit des sites Web assez complexes en utilisant pas mal de CSS, y compris CSS3 et d’autres astuces, et je n’ai jamais eu recours à des commentaires conditionnels.
Cependant, je vérifie constamment mon travail sur plusieurs navigateurs (je code principalement dans Chrome et teste sous firefox et ie7) lors du codage. Lorsque je vois des problèmes surgir, je fais un pas en arrière, je comprends pourquoi les choses se présentent différemment et je choisis souvent une approche légèrement différente.
Cela étant dit, j’ai un intérêt intellectuel dans ces différentes méthodes de piratage. J'aime particulièrement lire sur les techniques utilisées par CSS3 PIE et modernizr.
La meilleure façon d’approcher le codage inter-navigateurs est de connaître les différentes manières dont les différents navigateurs interprètent votre code et de l’écrire de manière à ce qu’ils ne puissent s’empêcher de bien faire les choses.
concevoir et développer avec des standards web
validez vos documents et feuilles de style à tout moment!
test tous les jours sur plusieurs navigateurs/plates-formes!
au minimum avant de soumettre une demande d'extraction ou de valider un référentiel.
vous devriez quand même écrire des documents conformes, mais ceci est crucial pour écrire des CSS multi-navigateurs/multi-plateformes.
remarque: le vrai pouvoir de validation n'est pas conforme à 100% du temps; vous obtiendrez des super pouvoirs une fois que vous comprendrez ce qui n'a pas besoin d'être validé, qui peut être différé et qui doit être corrigé immédiatement.
Et c’est le pouvoir: une validation constante renforce les règles du cahier des charges, et vous serez bien au courant. Les tests constants sur plusieurs navigateurs/multiplates-formes vous permettent de garder le goût des feuilles de style d'agent utilisateur du navigateur avec lesquelles vous vous battez le plus. Conformez vos styles en tant que tel, vous avez encore moins de problèmes.
vous pouvez utiliser des bibliothèques et des frameworks si vous le souhaitez, mais vous résumez toute la douleur de votre flux de travail et vous n'aurez jamais l'œil détaillé pour les styles que vous demandez ici. Cependant, libs/frameworks vous octroie ce pouvoir, bien qu’il vienne généralement avec un nombre de pages excessif.
reset.css, normalizr.css, et même le *{border:none; margin:0; padding:0) reset sont des armes dans votre arsenal pour égaliser le terrain de jeu entre les navigateurs affichant vos styles, ou les siens.
oui, j'ai recommandé le * "bidouille", avec deux autres options. chacun a sa propre place lorsqu'il se bat avec des agents utilisateurs.
de plus, il est absurde de ne pas profiter des failles que certains agents utilisateurs ont, car ces failles ne seront pas restituées avec une continuité à 100% et doivent être corrigées. Ce faisant, les failles elles-mêmes vous offrent le moyen idéal pour détecter les fonctionnalités, ou même les renifler, afin qu'elles puissent être traitées en conséquence!
utilisez chaque hack, faille, fonctionnalité, non-fonctionnalité que vous pouvez obtenir pour plier le dom et forcer les navigateurs en ligne.
......si tu dois. mais si vous développez avec des standards Web, vous constaterez que vous n'en aurez plus autant besoin que par le passé.
et puisque vous comptez moins sur eux, lorsque vous avez la possibilité d’en utiliser un pour résoudre un problème, utilisez-le vite! vous savez déjà quel est le problème et vous avez également une solution ciblant le problème et rien d’autre.
chaque navigateur a ses propres méthodes de ciblage, les plus évidentes étant les commentaires conditionnels.
utilise des commentaires conditionnels pour ie6-9 et utilise la compilation conditionnelle pour restituer les styles pour ie10 et ie11.
mais encore une fois, si vous êtes dwws et dvwws, vous pouvez les inclure dans tous les documents que vous créez, mais trouvez que les feuilles de style sont stériles, hébergeant une poignée de styles ciblant uniquement des différences de 1 à 3 pixels ou obtenant un arrière-plan -couleurs à étirer (ou pas) à 100%, etc.
Ce que je fais est d'utiliser un CSS de réinitialisation, puis des instructions conditionnelles. La réinitialisation CSS corrige presque tous les problèmes et la conditionnelle corrige les problèmes rencontrés dans IE. S'il existe des différences entre les autres navigateurs, j'essaie généralement de les contourner, par exemple en augmentant la largeur de tous les navigateurs ou en réduisant la taille de la police.
Personnellement, j'utilise le CSS de réinitialisation YUI.
CSS3 PIE semble très prometteur comme couche de compatibilité CSS3. Bien entendu, il existe d'autres problèmes inter-navigateurs pour les versions précédentes de CSS.
Question connexe concernant IE6, beaucoup d’informations utiles: Dois-je prendre la peine de soutenir IE6?
Préface ceci avec un avertissement contre l'utilisation de hacks CSS.
Du point de vue des performances pures, la mise en cache sera plus efficace avec un seul fichier si elle ne répond que pour une seule raison si elle ne répond qu'une fois à une seule requête HTTP du client. En plus de servir le même fichier à chaque utilisateur, quel que soit le navigateur, Les commentaires conditionnels bloquent les téléchargements dans certaines situations.
Pour cibler toutes vos différentes versions d'Internet Explorer dans un seul fichier, il existe différents hacks CSS. Gardez à l'esprit que cela rendra votre CSS invalide (si la validation vous concerne).
corps {
couleur: rouge;/* tous les navigateurs */
couleur: vert\9;/* IE8 et ci-dessous */
* Couleur: jaune;/* IE7 et inférieur */
_Couleur: orange;/* IE6 */
}Le blocage des commentaires conditionnels n’est en réalité qu’un problème dans certains cas dans IE8 lorsqu’il ya un commentaire conditionnel. Selon ce que vous pensez de la prise en charge d’Internet Explorer, cela peut être un problème ou non.
Personnellement, j'utilise des commentaires conditionnels. Personnellement, je pense que les hacks CSS sont affreux et que tout impact sur les performances provenant de commentaires conditionnels, réels ou imaginaires, ne vaut pas la peine que les hacks CSS cause souvent.
Les commentaires conditionnels sont relativement faciles à implémenter, et il y a un excellent article à propos de leur utilisation sur Quirksmode. Les éléments suivants ne concernent que IE6:
<! - [if IE 6]> <lien rel = "stylesheet" type = "text/css" href = "/ media/css/ie6.css" /> <! [endif] ->
Il existe une syntaxe qui vous permettra de cibler Internet Explorer de version égale, inférieure, supérieure à, inférieure ou égale à, supérieure ou égale à un numéro de version donné. L'exemple ci-dessus est l'un des égaux à.