सीएसएस हैक

ब्राउज़र और मानक। शाश्वत खोज। मानकों का अनुपालन न करने के कारण, पृष्ठों को रेंडर करने के विभिन्न तरीकों के कारण, अधिकांश समय एक वेब डिजाइनर इन विसंगतियों (हैक का उपयोग) को ठीक करने पर खर्च करता है। नतीजतन, प्रभावी काम के बजाय, डिजाइनर मूल्यवान समय खोते हुए, ब्राउज़रों के साथ अप्राकृतिक संबंधों में प्रवेश करता है।

क्रॉस-ब्राउज़र एक्सेसिबिलिटी - सभी लोकप्रिय ब्राउज़रों में प्रदर्शित करने और काम करने के लिए साइट की संपत्ति समान है।

हैक - एक बग को ठीक करना या किसी अन्य अनिर्दिष्ट या गलत तरीके से लागू की गई सुविधा का उपयोग करके एक नया फ़ंक्शन जोड़ना। (c) लर्कमोर

एक गंदे हैक एक समस्या का एक त्वरित समाधान है, मुख्य रूप से अल्पावधि में, आंतरिक सुंदरता के कोड के सार से वंचित करना और इसकी आंतरिक संरचना के साथ अलग करना। (c) लर्कमोर

इंटरनेट एक्सप्लोरर के लिए सीएसएस हैक

ज़ूम: 1:
हैलआउट के निर्धारण के लिए हैक करें

* { zoom : 1 ; } 

IE6 में PNG:
IE6 के लिए, htc-file iepngfix.htc जुड़ा हुआ है, PNG पृष्ठभूमि छवियों के लिए सभी तत्वों के लिए सही ढंग से काम करने के लिए, cssf-ie6.css फ़ाइल में। आईई पीएनजी फिक्स v1.0 RC4 नवीनतम संस्करण का इस्तेमाल किया।

 * { behavior : url ( "css/iepngfix.htc" ); } 

यदि बाइट्स महत्वपूर्ण हैं तो IE के लिए एक फिल्टर का उपयोग करने का एक उदाहरण है:

 .class { background : none ; filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( src= '/images/png-image.png' , sizingMethod= 'scale' ); } 

IE6 से अलग शैलियों:

 html>body .class { } head+body .class { } html:first-child .class { } 

IE6 और IE7 से शैलियों का पृथक्करण:

 html>/**/body { } 

IE6 से शैलियों का पृथक्करण - IE8:

 *|html .class { } html:not([lang*=""]) .class { } 

IE में सशर्त टिप्पणियाँ:
सशर्त टिप्पणियां केवल IE में विंडोज के तहत काम करती हैं, अन्य ब्राउज़रों के लिए वे नियमित टिप्पणियां हैं, इसलिए उन्हें दर्द रहित रूप से उपयोग किया जा सकता है। वाक्य विन्यास यह है:

 <!--[if ]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> <!--[if !]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> /*       -  ,   ! */ /*    : IE –    IE lt IE v – (less than)    IE,     v lte IE v – (less than or equal)    IE,     v,    gte IE v – (greater than or equal) –  IE,      v gt IE v – (greater than) –  IE,    v. */ 

IE6, IE7, IE8 में सशर्त टिप्पणियाँ:

 <!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    IE6 */ <!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    IE7 */ <!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    IE8 */ 

बॉक्स मॉडल हैक:
IE में, वहाँ glitches हैं जब सीमा और गद्दी को एक तत्व की चौड़ाई में शामिल किया जाता है। बॉक्स मॉडल हैक उन्हें ठीक करता है।

 .class { padding : 4em ; border : 1em solid red ; width : 30em; width /**/ : /**/ 25em ; } /*  IE      padding + border */ 

IE में न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई:
IE इन सीएसएस गुणों को नहीं समझता है। ब्लॉक हैक इस तरह दिखता है:

 .class { min-width : 500px ; width : expression ( document.body.clientWidth < 500? "500px" : "auto" ); } /*  IE      padding + border */ 

 .class { min-width : 500px ; max-width : 750px ; width : expression ( document.body.clientWidth < 500? "500px" : document.body.clientWidth > 750? "750px" : "auto" ); } /*  IE      padding + border */ 

डस्टिन डियाज़ से न्यूनतम ऊंचाई हैक

 .class { min-height : 100% ; height : auto !important ; height : 100% ; } 

सरल चयनकर्ता:
विभिन्न ब्राउज़रों के लिए एक अलग फ़ाइल बनाना आवश्यक नहीं है। आप मुख्य css फ़ाइल में अलग-अलग css चयनकर्ताओं का उपयोग कर सकते हैं:

 * html .class { } /*  ,   html-  ,     IE6 */ /*   quirks-mode,    IE6  IE7. */ *:first-child+html .class { } /*  IE 7   (first-child) */ *+html .class { } /*  IE 7 */ *:first-child+html .class { } /*  IE 7 */ html>body .class { } /*  IE 7    */ html>/**/body .class { } /*    ( IE 7) */ /* : .class { background:red } *html .class { background:green }     IE6     ,   IE6    -  */ 

IE6 के लिए डर्टी हैक्स:

 .class { _background : #F00 ; } .class { -background : #F00 ; } .class { c\olor : #F00 ; } /*     a, b, c, d, e, f */ 

IE7 के लिए डर्टी हैक्स:

 >body { background : #F00 ; } /*   body   IE7 */ html* { background : #F00 ; } /*      html.   IE7   */ -,.class { background : #F00 ; } .class { background : #F00 !important! ; } /*       !important.   IE7   */ 

IE8 के लिए डर्टी हैक्स:

 .class { background : #F00\0/ ; } /*   body   IE7 */ 

IE6 और IE7 में काम करने वाले डर्टी हैक्स:

 .class { *background : #F00 ; } .class { //background : #F00 ; } .class { background : #F00 !ie ; } /*       !important */ 

मोज़िला फायरफ़ॉक्स ब्राउज़र के लिए सीएसएस हैक

MFF के सभी संस्करणों के लिए भाड़े:

 #class[id=class] { color : #F00 ; } @-moz-document url-prefix () { .class { color : #F00 ; } } *>.class { color : #F00 ; } 

MFF 1.5 और उच्चतर के लिए:

 .class, x:-moz-any-link, x:only-child { color : #F00 ; } 

MFF 2.0 और उच्चतर के लिए:

 body:empty .class { color : #F00 ; } #class[id=CLASS] { color : #F00 ; } html>/**/body .class, x:-moz-any-link { color : #F00 ; } 

MFF 3.0 के लिए और संभवतः उच्चतर:

 html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; } 

Google Chrome ब्राउज़र के लिए CSS हैक करता है

 body:nth-of-type(1) .class { background : #000 ; } 

ओपेरा ब्राउज़र के लिए सीएसएस हैक

ओपेरा के सभी संस्करणों के लिए भाड़े:

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and ( -webkit-min-device-pixel-ratio : 0 ) { .style { background : #F00 ; } } 

 @media all and ( min-width : 0px ) { .class { color : #F00 ; } } 

ओपेरा 6 के लिए:

 @media all and ( min-width : 1px ) { { } .class { color : #F00 ; } } 

ओपेरा 7, 8 के लिए:

 @media all and ( min-width : 1px ) { .class { color : #F00 ; } } 

ओपेरा 9 के लिए:

 @media all and ( width ) { .class { color : #F00 ; } } 

 @media all and ( min-width : 0px ) { head~body .class { color : #F00 ; } } 

सफारी ब्राउज़र के लिए सीएसएस हैक

 body:first-of-type .class { color : #F00 ; } html:root*.class { color : #F00 ; } body:first-of-type .class { color : #F00 ; } body:first-of-type .class { color : #F00 ; } 

 @media screen and ( -webkit-min-device-pixel-ratio : 0 ) { .class { color : #F00 ; } } /*   Opera  Safari */