2010-10-08 9 views
8

कभी-कभी जब मुझे ऐसी वेबसाइट दिखाई देती है जो मुझे पसंद है या सम्मानित लोगों की साइटें हैं, तो मैं स्रोत कोड देखता हूं और उन्हें समझने की कोशिश करता हूं (जैसा कि हम सभी करते हैं)।सीएसएस हैक्स (चाल)

Jeremy Keiths साइट पर वह निम्नलिखित कोड का उपयोग करता है:

[role="navigation"] a { 
font-weight: bold; 
text-decoration: none; } 

मैं इस से पहले कभी नहीं देखा है, और कुछ अन्य बार मैंने कोड देखा (एक "चाल" माना जा सकता है) कि मैं कभी नहीं देखा था पहले।

उपर्युक्त कोड का अर्थ पूछने के अलावा, मेरा प्रश्न है - क्या कोई दस्तावेज, पुस्तक या ब्लॉग है जो उन्नत/कम ज्ञात सीएसएस "चाल" के बारे में जानने के लिए जाता है?

उत्तर

3

इस उदाहरण में, <nav> को <div> में लपेटा गया है और उसके बाद navigation भूमिका नियुक्त की गई है।यह केवल

nav a {} 

कई साइटें एक्सएचटीएमएल के साथ "थोड़ा" HTML5 मिश्रण करने लगती हैं। मुझे वास्तव में कोई कारण नहीं दिख रहा है कि वे HTML5 "पूरी तरह से" का उपयोग क्यों नहीं करते हैं। एचटीएमएल 5 का पूरा बिंदु अधिक अर्थपूर्ण होना और कम कोड लिखना है जो अधिक सार्थक है।

कुछ उपयोगी लिंक।

http://html5doctor.com/

http://htmldog.com/

http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/

अब के रूप में, आप बनाने के लिए एचटीएमएल 5 तत्वों IE में काम जावास्क्रिप्ट का एक सा की आवश्यकता होगी। ये लिंक की मदद करनी चाहिए

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

http://remysharp.com/2009/01/07/html5-enabling-script/

+1

हां अच्छा बिंदु के बजाय पूरक का उपयोग करना चाहिए। divs अभी भी ठीक है हालांकि जब [उपयोग करने के लिए और कुछ नहीं] (http://html5doctor.com/you-can-still-use-div/) - ps, अच्छे लिंक – stephenmurdoch

+0

यह एक सवाल था कि मुझे नहीं लगता था कि मुझे नहीं चाहिए पूछा है, जैसा कि मैंने सोचा था कि यह "बेवकूफ" आवाज है, लेकिन आपके द्वारा प्रदान किए गए लिंक और उदाहरण अनमोल दिखते हैं, धन्यवाद। – aurel

+0

कूल सीएसएस चाल के साथ एक और लिंक http://podlipensky.com/2013/06/css-only-load-images-on-demand/ –

6

ऊपर लक्ष्य तत्वों एक भूमिका विशेषता है, जैसे:

<div role="navigation"> 
    <a href="...">...</a> 
</div> 

एक वर्ग भी यहाँ कोई मतलब होता है, लेकिन यह सिर्फ यह कर का एक और तरीका है। विशेषता चयनकर्ता सीएसएस 2 का एक मानक हिस्सा हैं, लेकिन उस समय IE6 didn't support them इसलिए इसका हाल ही में उपयोग नहीं किया गया है।

ऐसे कई अन्य चयनकर्ता हैं जो लंबे समय से आसपास रहे हैं लेकिन आईई द्वारा लगाए गए सीमाओं के कारण इसका उपयोग नहीं किया जा सका। अधिक उदाहरणों के लिए Quirksmode देखें।

4

यह एक सीएसएस विशेषता चयनकर्ता है। यह कहावत है "सभी <a> टैग कि एक तत्व navigation के एक मूल्य के साथ role की एक विशेषता है कि निम्नलिखित तरीके से स्टाइल किया जाना चाहिए के वंशज हैं ..."

वह accessibility principally के लिए यह उपयोग कर रहा है, और styling only secondarily के लिए।

यदि आप सीएसएस के बारे में कुछ नवीनतम चीजों को सीखना चाहते हैं, तो मैं css3.info और css3please.com की अनुशंसा करता हूं। पहला नया चाल के उदाहरणों का एक बड़ा स्रोत है, और दूसरा आपको ब्राउज़र में नई सामग्री के साथ खेलने देता है। इसके अलावा ... मैंने पाया है कि सीखने का सबसे अच्छा तरीका यहां प्रश्नों का उत्तर देना है (जब आप सुनिश्चित नहीं हैं तो चीजों को देखकर) पढ़ने के साथ संयुक्त - Eric Myers, Paul Irish, Quirksmode - ये सभी अच्छे संसाधन हैं चीजें सीखना जो आपके लिए नए हैं।

0

भूमिका एक नई एक्सएचटीएमएल 2 विशेषता है।

http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/

http://www.w3.org/TR/2008/WD-xhtml-role-20080407/

+3

'role' एचटीएमएल 5 में भी है: http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models .html # एनोटेशन-फॉर-सहायक-टेक्नोलॉजी-उत्पादों- (एरिया) –

+0

@ एंड्रयू: +1 जानकारी के उस बिंदु के लिए धन्यवाद। –

+0

एक्सएचटीएमएल 2 से सावधान रहें: इसे एचटीएमएल 5 के पक्ष में बंद कर दिया गया है - उदाहरण के लिए इसका मतलब है कि आपको माध्यमिक – Knu

संबंधित मुद्दे