hacks CSS
Les navigateurs et les normes. L'éternelle poursuite. En raison des normes d'incohérences, en raison de différentes façons de rendre les pages de la plupart du temps du web designer est dépensé sur elle pour compenser ces écarts (à utiliser hacks). En conséquence, au lieu de travail efficace, le concepteur entre dans la relation contre nature avec les navigateurs, perdre un temps précieux.
Css Hack - conception CSS spécifique, que certains navigateurs comprennent et ignorer les autres. En utilisant hacks parle souvent du codeur professionnel. Mais il y a des cas où un hack - la seule façon de résoudre le problème (par exemple, les bogues des navigateurs bien connus (voir «Bugs Browser»)). Ne pas oublier également que, dans notre hâte de temps - un phénomène commun. Par conséquent, les termes "hier" - sans surprise. Voilà pourquoi il n'y a pas de temps à traiter ne va pas comme vous le souhaitez.
Ainsi hacks css
Il est une solution rapide. Rédaction de lignes supplémentaires et tout va bien, nous faisons sur.
Inconvénients css hacks
- Il n'y a pas de certitude comment se comporter site avec la sortie de nouvelles versions des navigateurs. Par exemple, vous écrivez du code pour pirater de Firefox, dans un mois , il y a une nouvelle version de Safari, et il se trouve qu'elle perçoit également ce hack! Nous devons refaire.
- La plupart des hacks ne passent pas la validation - le danger de ceci est décrit dans le paragraphe précédent.
Si possible, essayez d'éviter d'utiliser des hacks. Pour corriger les bugs d'IE, utilisez un kotjry CSS-fichier séparé connecté via des commentaires conditionnels.
glossaire
Cross-browser - propriété de site apparaissent et le travail dans tous les navigateurs populaires identiques.
Haq - corriger des bugs ou ajouter de nouvelles fonctionnalités grâce à l'utilisation d'autres fonctions non documentées ou mal mises en œuvre.
sale hack - une solution rapide à un problème, surtout à court terme, ce qui prive l'essence de la beauté et le code interne de phase avec sa structure interne.
CSS-hacks pour Internet Explorer
ZOOM: 1:Haq pour déterminer hasLayout
* {Zoom: 1; }
PNG dans IE6:
Pour IE6 connecté htc fichier iepngfix.htc, format PNG pour les images d'arrière-plan fonctionne correctement pour tous les elementov dans le fichier-ie6.css CSSF. Utilisez IE PNG Fix v1.0 RC4 dernière version.
* {Comportement: url ( "css / iepngfix.htc"); }
Si l'octet significatif est un exemple d'utilisation d'un filtre pour IE:
.class { background: none; Filtre: progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = "/images/png-image.png", sizingMethod = 'échelle' ); }
Département des styles de IE6:
html> body. classe {} tête + corps. class {} html: first-child . class {}
Département des styles de IE6 et IE7:
html> / ** / body {}
Département des styles de IE6 - IE8:
* | Html. class {} html: non ([ lang * = ""]). class {}
Les commentaires conditionnels dans IE:
Les commentaires conditionnels ne fonctionnent que dans IE sur Windows, les autres navigateurs, ils sont les commentaires habituels, afin qu'ils puissent être utilisés en toute sécurité. La syntaxe est:
<! - [Si] état> <link href = "styles.css " rel = "stylesheet media" = "all" /> <[endif] -> <! - [! Si condition]> <link href = "styles.css" rel = " media stylesheet" = "all" /> <[endif] -> / * Si vous voulez ignorer l'explorateur un morceau de code, utilisez la condition * /! / * La condition peut être: IE - pour toute version de IE lt IE v - (moins) pour tous les navigateurs IE version qui est inférieure à V lte IE v - (inférieur ou égal) pour tous les navigateurs IE version qui est inférieure à V, ou le même gte IE v - (supérieur ou égal) - pour IE, qui est supérieure ou égale à la version v gt IE v - (supérieur à) - pour IE, la version supérieure v. * /
Les commentaires conditionnels dans IE6, IE7, IE8:
<! - [If IE 6]> <link href = "ie6.css " rel = "stylesheet" media = "all" /> <[endif] -> / * des feuilles de style pour IE6 * / <! - [If IE 7]> <link href = "ie7.css " rel = "stylesheet" media = "all" /> <[endif] -> / * des feuilles de style pour IE7 * / <! - [If IE 8]> <link href = "ie8.css " rel = "stylesheet" media = "all" /> <[endif] -> / * des feuilles de style pour IE8 * /
Box Model Hack:
Dans IE, il y a des pépins, lorsque la frontière et le rembourrage sont inclus dans la largeur d'un élément. Box Model Hack Fixit eux.
. class { padding: 4 em; border: 1 em solide rouge; largeur: 30 em; largeur / ** /: / ** / 25 em; } / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /
Min-width et max-width dans IE:
IE ne comprend pas ces propriétés css. Haq pour l'unité est la suivante:
.class { min-width: 500 px; largeur: expression ( document.body.clientWidth <500? "500px": "auto" ); } / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /
.class { min-width: 500 px; max-width: 750 px; largeur: expression ( document.body.clientWidth <500? "500px": document.body.clientWidth> 750? "750px": "auto" ); } / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /
Min-hauteur pirater par Dustin Diaz
.class { min-height: 100%; height: auto importante ;! hauteur: 100%; }
sélecteurs simples:
Vous ne devez pas créer un fichier distinct pour chaque navigateur. Vous pouvez utiliser chaque css-sélecteurs dans le css-fichier principal:
* Html. class {} / * Si les pages HTML ont un doctype, ce hack fonctionne dans IE6 * / / * Dans le cas de bizarreries-mode, pirater des œuvres dans IE6 et IE7. * / *: First-child + html. class {} / * pour IE 7 et ci - dessous (first-child) * / * + html. class {} / * Pour IE 7 * / *: first-child + html. class {} / * Pour IE 7 * / html> body. class {} / * pour IE 7 et navigateurs normaux * / html> / ** / body .class {} / * Pour les navigateurs normaux (sauf IE 7) * / / * Exemple: .class {background: red} * Html .class {background: vert} Dans tous les navigateurs sauf IE6 et ci - dessous est fond est rouge, et IE6 et ci - dessous les navigateurs - Vert * /
hacks sales pour IE6:
. class {_background: # F00; }. class {- background: # F00; }. class {c \ olor: # F00 ; } / * Ne fonctionne pas devant les lettres a, b, c, d, e, f * /
hacks sales pour IE7:
> Body {background: # F00; } / * Sélectionne l'élément de corps que dans IE7 * / html * {background: # F00; } / * Sélectionne tous les éléments dans l'élément html. Seulement pour IE7 et ci - dessous * / -, .class {background: # F00; {} Contexte: # F00 importante !! ; } / * Hack fonctionne par analogie avec la propriété! Important. Travaux pour IE7 et ci - dessous * /
Hacks sales pour IE8:
.class {background: # F00 \ 0 /; } / * Sélectionne l'élément de corps seulement IE7 * /
hacks sales travaillant dans IE6 et IE7:
.class {* background: # F00; } .class {// Contexte: # F00 ; de} {Contexte: F00 le ie # ;! } / * Hack fonctionne par analogie avec la propriété! Important * /
CSS-hacks pour Mozila FireFox navigateur
Kaki pour toutes les versions MFF:#class [id = class] {color : # F00; } @ -moz-Document url-prefix () {.class {color: # F00; }} *> .class {Color: # F00 ; }
Pour MFF 1.5 et au- dessus:
.class, x: -moz-Anywhere lien, x: only-child {color: # F00; }
Pour MFF 2.0 et ci - dessus:
corps: vide .class {color: # F00; } #class [Id = CLASS] { color: # F00; } Html> / ** / body .class , x: -moz-any-link {color: # F00; }
Pour MFF 3.0 et peut - être au- dessus:
html> / ** / body .class, x: -moz-any-link, x: default {color: # F00; }
CSS-hacks pour navigateur Google Chrome
corps: nth- de - type (1) .class { background: # 000; }
CSS-hacks pour le navigateur Opera
Kaki pour toutes les versions de Opera:@ Médias tous et (-webkit-min -device-pixel-rapport: 10.000) pas tous et (-webkit-min- device-pixel ratio: 0) { .style {background: # F00; } }
@ Médias tous et (min-width : 0 px) { .class { color: # F00; } }
Pour Opera 6:
@ Médias tous et (min-width : 1 px) {{} .class { color: # F00; } }
Pour Opera 7, 8:
@ Médias tous et (min-width : 1 px) { .class { color: # F00; } }
Pour Opera 9:
@ Médias tous et (largeur) { .class { color: # F00; } }
@ Médias tous et (min-width : 0 px) { tête ~ corps .class { color: # F00; } }
CSS-hacks pour le navigateur Safari
corps: la première de type .class {color: # F00; } Html: root * .class {color : # F00; } Corps: première de type .class {color: # F00; } Corps: première de type .class {color: # F00; }
@ Écran Média et (-webkit-min -device-pixel-rapport: 0) { .class { color: # F00; } } / * Hack pour Opera et Safari * /
Hacks Selector
/ ***** Selector Hacks ****** / / * IE 6 et au-dessous * / * Html #uno {color: red} / * IE7 * / *: First-child + html #dos {color: red} / * IE7, FF, Saf, Opera * / html> #tres corps {color: red} / * IE8, FF, Saf, Opera (Tout sauf IE 6,7) * / html> / ** / body #cuatro {color: red} / * Opera 9.27 et ci-dessous, safari 2 * / html: first-child #cinco {color: red} / * Safari 2-3 * / html [xmlns * = ""] corps: {la couleur: rouge} du dernier enfant / * Safari 3+, chrome 1+, Opera9 +, ff 3.5+ * / corps: nth-of-type (1) #siete {color: red} / * Safari 3+, chrome 1+, Opera9 +, ff 3.5+ * / corps: la première de type #ocho {color: red} / * Saf3 +, chrome1 + * / écran @media et (-webkit-min-device-pixel ratio: 0) { #diez {color: red} } / * IPhone / webkit mobiles * / écran @media et (max-device-width: 480px) { #veintiseis {color: red} } / * Le Safari 2 à 3,1 * / html [xmlns * = ""]: root #trece {color: red} / * Safari 2 à 3,1, Opera 9.25 * / * | Html [xmlns * = ""] #catorce {color: red} / * Tout sauf IE6-8 * / : Root *> #quince {color: red} / * IE7 * / * + Html #dieciocho {color: red} / * IE 10+ * / écran @media et (-ms-fort contraste: actif), (-ms-contraste élevé: none) { #veintiun {color: red; } } / * Firefox uniquement. 1 + * / #veinticuatro, x: -moz-any-link {color: red} / * Firefox 3.0+ * / #veinticinco, x: -moz-any-link, x: default {color: red} / * FF 3.5+ * / corps: pas (: - moz-gestionnaire-bloqué) #cuarenta {color: red; }
Attribut Hacks
/ ***** Attribut Hacks ****** / / * IE6 * / #once {_color: blue} / * IE6, IE7 * / #doce {* color: blue; / * Ou #color: bleu * /} / * Tout sauf IE6 * / #diecisiete {color / ** /: blue} / * IE6, IE7, IE8, mais aussi dans certains cas, IE9 * / #diecinueve {color: blue \ 9; } / * IE7, IE8 * / #veinte {color / * \ ** /: bleu \ 9; } / * IE6, IE7 - agit comme un important * /! #veintesiete {color: blue-à-dire ;! } / * Chaîne après! peut être quelque chose * / / * IE8, IE9 * / #anotherone {color: blue \ 0 /;} / * doit aller au bout de toutes les règles * / / * IE9, IE10 * / écran @media et (min-width: 0 \ 0) { #veintidos {color: red} }
hacks préfixe de propriété
/ * Préfixe de propriété hacks * / / * IE6 seulement - toute combinaison de ces caractères * / _ -? ¬ | / * IE6 / 7 seulement - toute combinaison de ces caractères * /! $ & * () = +% @. / `[] # ~? : <> |
hacks @media
/ * @media Hacks * / / * IE 6/7 seulement (via Keith Clarke) * / écran @media \ {9} / * IE6 / 7/8 (via Keith Clarke) * / @media \ 0screen \, écran \ {9} / * IE8 (via Keith Clarke) * / @media \ 0screen {} / * De IE8 / 9 * / écran @media \ {0}
Liste des hacks CSS pour différents navigateurs, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome
/ * Hack seulement à IE8 seulement * / .myClass { couleur: rouge \ 0 /; / * Rouge * / padding: 70px \ 0 /; / * 70px Rembourrage uniquement pour Internet Explorer 8 * / } / * IE 6 seulement * / * html .myClass { ... } / * Tous sauf les normes IE6 * / .myClass { Propriété / ** /: valeur; } / * Firefox et IE 7 et au- dessus * / html> .myClass du corps { ... } / * Les navigateurs modernes uniquement (pas IE 7) * / html> / ** / corps .myClass { ... } / * IE 7 seulement * / *: first-child + html .myClass { ... } / * Firefox seulement * / @ -moz -Document url-prefix () { .myClass { ... } } / * Opera seulement * / noindex: -o-préfocalisée, .MyClass { color: red; } / * IE7 seulement * / div [ class = "^ myClass"] .myClass2 { ... } / * IE7 uniquement * / * + html .myClass { ... } / * Hack pour Opera <= 9 * / html: first-child .myClass { ... } / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { ... } / * IE8 bêta 2 uniquement * / html: first-child | (?) .myClass [Attr = ab] { ... } / * IE5 / Mac uniquement * / / * \ * // * / .myClass {propriété: valeur; } / ** / / * Gecko uniquement * / .myClass: pas ([attr * = ""]) { ... } / * Opera * / @media tous et (min-width: 0px) { html: first-child .myClass { ... } } / * Safari uniquement * / .myClass: pas (: root: root) { ... } / * Safari 3.0 et Chrome seulement * / écran @media et (-webkit-min-device-pixel ratio: 0) { .myClass { .... } } / * Chrome navigateur * / corps: nième-of-type ( 1) .myClass { ... } / * Navigateur Safari css bidouille * / corps: la première de type .myClass {propriété: valeur;}
CSS pour l'Explorateur
<! - [Si IE]> ... Si l'Internet Explorer .. <Link href = Type "ie-fix.css" = "text / css" rel = "stylesheet"> <[Endif] -> <! - [Si IE 6.0]> ... Si IE6 <[Endif] -> <! - [Si IE 7]> ... Si IE7 <[Endif] -> <! - [If gte IE 5]> ... Si IE5 + <[Endif] -> <! - [Si lt IE 6]> .. Si IE inférieure 6 <[Endif] -> <! - [Si lte IE 5.5]> ... Si elle est inférieure ou égale à 5,5 IE <[Endif] -> <! - [Si gt IE 6]> ... Si IE 6 ci-dessus <[Endif] ->
fond translucide dans IE, Firefox, Opera
.myClass { background-color: # 000; -moz-opacity: 0,82; / * Firefox * / opacité: 0,82; / * Opera * / filtre: alpha (opacity = 82); / * IE * / }
Retirez le rembourrage supplémentaire dans le bouton dans Firefox
bouton :: - moz-focus-inner { border: 0; padding: 0; }
Chrome / Firefox ...?
bouton { -webkit-border-forme: lignes; }
Firefox 2
html> / ** / body .Sélecteur, x: -moz-any-link {color: chaux; }
Firefox 3
html> / ** / body .Sélecteur, x: -moz-any-link, x: default {color: chaux; }
Tous Firefox
@ -moz-Document de url-prefix ( ) { .Sélecteur {color: chaux; }}
en outre
Hacks pour IE
syntaxe | Qui sait | exemple |
validation passe | ||
---|---|---|
* html | IE6 | div { background: # ff0000; } * Html div { background: # 000; } |
! important | IE6 | div { background: # ff0000 importante ;! / * Pour tous les navigateurs * / background: # 000; / * Pour de IE6 * / } |
*: First-child + html | IE7 | div { background: # ff0000; } *: First-child + html div { background: # 000; } |
* + Html | IE7 + peut comprendre Opera 9 et au-dessous |
div { background: # ff0000; } * + Html div { background: # 000; } |
html> body | comprendre tout sauf IE6 |
div { background: # ff0000; } html> body div { background: # 000; } |
# Ie # fix | comprendre tout sauf IE8 | div { background: # ff0000; / * Pour IE8 * / } div, # ie # fix { background: # 000; / * Pour les autres navigateurs * / } |
Ne pas passer la validation (non recommandé) | ||
_svoystvo: valeur et -property: valeur |
IE6 | div { background: # ff0000; / * Pour tous les navigateurs * / _background: # 000; / * Pour de IE6 * / } |
* Propriété: valeur et // Propriété: valeur |
IE6 IE7 |
div { background: # ff0000; / * Pour tous les navigateurs * / * Contexte: # 000; / * Pour IE6 et d'IE7 * / } |
html * | IE6 IE7 chrome safari |
div { background: # ff0000; } html * div { background: # 000; } |
! ie | IE6 IE7 |
div { background: # ff0000; / * Pour tous les navigateurs * / background: # 000 ie ;! / * Pour IE6 et d'IE7 * / } |
Hacks pour Firefox
syntaxe | Qui sait | exemple |
Ne pas passer la validation (non recommandé) | ||
---|---|---|
|
FF 1.5+ Opera 9.6 mise à jour: 14.01.10
sans importance (Comprendre la nouvelle version Opéra, Chrome, Safari) |
div { background: # ff0000; } html: root div { background: # 000; } |
x: -moz-any-link | FF 1.5+ IE7 |
div { background: # ff0000; } div, x: -moz-any-link { background: # 000; } |
@ -moz-Document url-prefix () | FF 1.5+ | div { background: # ff0000; } @ -moz-Document url-prefix () { div { background: # 000; }} |
Hacks pour Opera
syntaxe | Qui sait | exemple |
Passes validation | ||
---|---|---|
html: first-child | Opera 7-9.01 | div { background: # ff0000; } html: div first-child { background: # 000; } |
Ne pas passer la validation (non recommandé) | ||
passe validation CSS3 |
Opera 9 à 9,6 mise à jour 14.01.10
est en retard (Se rapporte à nouveau versions ff, chrome, safari) |
div { background: # ff0000; } @media tous et (min-width: 0) { div { background: # 000; }} |
html> / ** / body noindex: -o-préfocalisée, html> / ** / body | Opera 9,5-10 | html> / ** / body noindex: -o-préfocalisée, html> / ** / body p { color: # 0f0 } |
Hacks pour Chrome et Safari
syntaxe | Qui sait | exemple |
Ne pas passer la validation (non recommandé) | ||
---|---|---|
|
mettre à jour 14.01.10 - Date (moyenne de nouvelles versions de l'opéra, ff, safari, chrome) |
div { background: # ff0000; } corps: nth-of-type (1) div { background: # 000; } |
|
mettre à jour 14.01.10 - Date (moyenne de nouvelles versions de l'opéra, ff, safari, chrome) |
div { background: # ff0000; } html: root * div { background: # 000; } |
html * |
safari chrome IE6 IE7 |
div { background: # ff0000; } html * div { background: # 000; } |
Kaki Konqueror
syntaxe | Qui sait | exemple |
Ne pas passer la validation (non recommandé) | ||
---|---|---|
html: non (: nth-child (1)) #element |
Konqueror FF 3.5 |
#div { background: # ff0000; } html: non (: nth-child (1)) {#div background: # 000; } |
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.