इसे व्यक्त

सीएसएस इस साल 10 साल के अस्तित्व पूरा! उन जो थोड़ी देर के लिए आस पास कर दिया गया है, उनके (या नहीं) रोटी सीएसएस का उपयोग कर कमाई है, तो आप जानते हो सकता है कि कैसे हम फोंट का एक अच्छा चयन के लिए भूख से मर गया है. फोंट की कमी के साथ भी उन लोगों की तरह डिजाइनर सीएसएस ज़ेन गार्डन सीएसएस पृष्ठभूमि छवियों का उपयोग करने के लिए अपने डिजाइन करने के लिए कुछ न्याय करने का पीछा में फोंट की जगह बना दिया है. हम भी फ़्लैश / जावास्क्रिप्ट ® हैक्स हमारे डिजाइन लक्ष्यों को प्राप्त करने की कोशिश की है. कोई मतलब है इस फोंट हम हमारी वेब डिजाइन में इच्छा प्राप्त करने के लिए एक गलत तरीका है, लेकिन निश्चित रूप से, यह सबसे वांछनीय रास्ता नहीं है. और अधिक वर्षों में वेब डिजाइनर, मेरे जैसे, पूरी तरह से उनके डिजाइन के लिए दस या तो फोंट पर भरोसा है.

वेब मानकों और फ़ॉन्ट स्वरूप में हाल के घटनाक्रम से यह संभव करने के लिए वही पुरानी डिफ़ॉल्ट फ़ॉन्ट के अलावा अन्य टाइपफ़ेस में HTML पाठ प्रस्तुत करना. "@ Fontface" सीएसएस decleration के में आता है.

@ Fontface वास्तविक फ़ॉन्ट फ़ाइल के लिए लिंक और यह वेब से प्राप्त करने के लिए एक समाधान के provids. @ Fontface का प्रयोग, डिजाइनरों के लिए पृष्ठभूमि छवियों के रूप में पाठ स्थिर बिना फ़ॉन्ट का उपयोग कर सकते हैं. कार्यान्वयन बहुत सीधे आगे है, जैसा कि नीचे दिखाया गया है, लेकिन सभी अच्छी चीजों के रूप में इसे करने के लिए कांग्रेस हिस्सा है, नहीं सभी ब्राउज़रों एक एकल "फ़ॉन्ट प्रकार का समर्थन. यदि आप साइट में पार ब्राउज़र समर्थन की आवश्यकता के साथ @ fontface का उपयोग करने की योजना बना रहे हैं, तो आप उसी के विभिन्न फ़ॉन्ट प्रकार के सूत्रों प्रदान करना होगा.

1. ट्रू टाइप - एक प्रारूप स्क्रीन पर अच्छे लग रहे करने के लिए डिज़ाइन. विंडोज ब्राउज़र (क्रोम) के लिए विशेष रूप से सिफारिश की है.
2. ओपन टाइप (CFF) - इस प्रारूप मुद्रण कार्य के लिए बेहतर है और Windows पर हमेशा अच्छा नहीं लग रही.
3. ईओटी - आप इस प्रारूप की जरूरत है अगर आप इंटरनेट एक्सप्लोरर को लक्षित करना चाहते हैं. IE के किसी भी अन्य प्रारूप का उपयोग नहीं होगा. हमारे ईओटी "लाइट," क्योंकि वे न तो और न ही संकुचित कर रहे हैं डोमेन प्रतिबंधित विचार किया जाएगा.
4. एसवीजी यह एक XML प्रारूप iPhone सहित कुछ ब्राउज़र्स द्वारा समर्थित है.
5. WOFF इस पार ब्राउज़र, वेब ही फ़ॉन्ट स्वरूप हल्के है (फ़ॉन्ट डेटा ज़िप संकुचित है) और या तो ट्रू टाइप या पोस्टस्क्रिप्ट (CFF) की रूपरेखा के साथ संकलित किया जा सकता है. यह वर्तमान में फ़ायर्फ़ॉक्स 3.6 द्वारा समर्थित है +.

@ Fontface का उपयोग

  @ फ़ॉन्ट चेहरा {
 font-परिवार: 'CalligraphyFLFRegular';
 स्रोत: यूआरएल (CalligraphyFLF.eot ');
 ": स्थानीय (CalligraphyFLF ') (' CalligraphyFLF) स्थानीय, url ('CalligraphyFLF.woff') ('woff') प्रारूप, ('CalligraphyFLF.ttf) url प्रारूप (' ट्रू टाइप '), url (' CalligraphyFLF svg # CalligraphyFLF ') (' svg) स्वरूप;
 }
 @ फ़ॉन्ट चेहरा {
   font-परिवार: "आपका टाइपफ़ेस";
   स्रोत: url ("/ फोंट font_filename.eot");
   ": (वैकल्पिक नाम) स्थानीय, स्थानीय, (Alternatename")
     url ("/ फोंट font_filename.woff") प्रारूप ("woff)
     url ("/ फोंट font_filename.otf") ("ओपन टाइप) स्वरूप,
     url ("/ फोंट # font_filename font_filename.svg") प्रारूप (SVG ");
   }
 h2 {font-परिवार: "आपका टाइपफ़ेस, जॉर्जिया, सेरिफ़;} 

जैसा कि आप ऊपर के उदाहरण से देख, चुना फ़ॉन्ट टाइपफ़ेस शामिल कर सकते हैं, एक ही टाइपफ़ेस लिए fonttypes का एक सेट करने के लिए लिंक है. इसलिए लोगों को "फ़ॉन्ट किट के रूप में इसे देखें.
फ़ॉन्ट उपलब्ध किट कि एंड यूज़र लायसेंस एग्रीमेंट (EULA) के तहत सीएसएस @ फ़ॉन्ट चेहरा यह संपत्ति के साथ स्पष्ट रूप से जोड़ने की अनुमति देता है.

उपयोगी WebFont संसाधन:

• @ फ़ॉन्ट चेहरा एम्बेडिंग के लिए उपलब्ध फ़ॉन्ट्स पर विकी पृष्ठ http://webfonts.info/wiki/index.php?title=Main_Page
  
• रे Larabie . वह एक प्रसिद्ध फ़ॉन्ट डिजाइनर जो दिलचस्प ट्रू टाइप फोंट वेब पर उपयोग के लिए आसानी से उपलब्ध के सैकड़ों बना दिया है. अपने फोंट, सजावटी, सुरुचिपूर्ण और चंचल हैं.
• Dieter Steffmann एक और महान फ़ॉन्ट डिजाइनर है. वह भी, कई सुंदर फोंट उपयोग करने के लिए किसी के लिए उपलब्ध बना दिया है.
• फ़ॉन्ट दुकान : फोंट वेब के उपयोग के लिए विशेष रूप से डिजाइन प्रदान करता है. अधिक सबसे सफल FontFont के परिवारों के 30 अब वेब FontFonts के रूप में उपलब्ध हैं. FontShop भी एक विस्तृत WebFont उपयोगकर्ता पुस्तिका है http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• फ़ॉन्ट गिलहरी : सभी फ़ॉन्ट कि फ़ॉन्ट गिलहरी @ फ़ॉन्ट चेहरा सीएसएस embedding के साथ उपयोग के लिए प्रदान करता है showcases. फ़ॉन्ट गिलहरी प्रकार के एक प्रभावशाली मात्रा प्रदान करता है, एक बाहर ले इसे मृत सरल बनाता है, और handily "किट" प्रदान करता है अपनी पसंद का टाइपफ़ेस कई प्रारूपों में, डेमो HTML और सीएसएस के साथ पैक किया है कि बहुत वर्तमान @ फ़ॉन्ट चेहरा वाक्यविन्यास का उपयोग करता है . उन्होंने यह भी एक तरह से अपने खुद के फ़ॉन्ट चेहरा किट प्रदान करते हैं . यदि आप उपयोग करना चाहते टाइपफ़ेस उचित लाइसेंस दिया गया है (है कि लोगों को अपने कंप्यूटर के साथ आने जरूरी ठीक नहीं हैं), जनरेटर ईओटी, एसवीजी, और हे उत्पादन! WOFF फ़ाइलें.

एक और त्वरित tut. यहाँ कुछ सरल और सीएसएस के बिजली का उपयोग कर अच्छा है ... लेकिन मुश्किल है (और यह निश्चित रूप से मुझे नहीं था) concieve करने के साथ शुरू किया गया था. Dropshadow जोड़ने के लिए, हम में से कई के लिए केक का एक टुकड़ा हो, कुछ फ़ोटोशॉप anf आदि पटाखे की तरह छवि संपादन उपकरण का उपयोग कर सकते हैं
कारण क्यों, मैं सीएसएस का उपयोग कर ड्रॉप छाया के लिए चुना है कि, आमतौर पर एक पृष्ठ एक आवेदन की डिजाइन / html बनाने, जबकि आवश्यकताओं से iterating रखना. मैं क्या मतलब है freinds सूची या एक छवि गैलरी प्रदर्शित करने वाले की तरह कई छवियों के साथ एक मौजूदा वेब साइट है,, यह उस के लिए छवियों है कि पहले से ही किया गया था छाया को जोड़ने या हटाने के उतार के पूरे लोड के पुनर्संसाधन के लिए मुश्किल हो जाएगा बात.
इसलिए यदि आप एक छोटे से आगे की सोच किया है, जबकि HTMLs बनाने के लिए इन अतिरिक्त डिवीजनों या जोड़ने के आम तौर पर स्थिति यह है कि आप एक लूप इन XSL, PHP में / माउस थंबनेल पैदा तर्क है. जावा या किसी भी अन्य भाषा / प्रोग्रामिंग पटकथा, आप इसे कभी भी जोड़ सकते हैं, तो सिर्फ दिखाने के लिए और इन सीएसएस प्रदर्शन संपत्ति कभी आवश्यकताओं को बदलने के ग्राहकों के प्रति के रूप में, छाया का उपयोग कर छिपा की बात है ... मैं आगे की सोच की इस तरह किया havn't इस से पहले ... लेकिन ahev अब शुरू कर दिया!

नीचे दिए गए उदाहरण में, मूल छवि छाया मुक्त है और dropshadows को लागू कर रहे हैं के रूप में आवश्यक! इसके अलावा, मैं एक छोटे से अतिरिक्त चले गए हैं के बारे में मेरे पहले Tut की चाल (Well! इन ट्यूटोरियल की शायद कम से कम विविधता है, तो यह केवल उन्हें "Tut" है फोन जायज़ है) का उपयोग करके, केवल दिखावा के लिए सीएसएस क्लिप संपत्ति का उपयोग

मूल छवि

सीएसएस DropShadow परिणाम

डेमो देखें | डाउनलोड sourcefiles

मैं इस बात को समझ क्यों चाहते हो?? ... Humm! है!

सीएसएस लेखकों में से ज्यादातर लोगों का मानना ​​होगा कि सीएसएस क्लिप संपत्ति शायद एक सबसे संयुक्त राष्ट्र के इस्तेमाल सीएसएस संपत्तियों की. यह तो मेरे लिए भी सच था और सबसे करने के लिए यह उपेक्षा करने के लिए खुश था, जब तक मैं संशोधित शुरू MooTools दो घुंडी (पिन) स्लाइडर घटक (रेंज संकेतक के साथ) .

घटक प्रयोक्ताओं की एक से एक अच्छा सुझाव के लिए स्लाइडर घटक काटा backgroud के छवियाँ (एक चर चौड़ाई विभाजन के खिलाफ) का उपयोग करने के लिए स्लाइडर रेंज का संकेत संशोधित था. इस प्रकार मेरे मज़ा लेकिन मुझे बिल्कुल के लिए संयुक्त राष्ट्र के सीएसएस क्लिप संपत्ति के चार्टर्ड पानी में प्रवेश के समय आया.

अच्छी तरह से! यह कितना मुश्किल हो सकता है? बिल्कुल नहीं ... हाँ और नहीं. सीएसएस क्लिप संपत्ति का उपयोग करने के लिए वाक्यविन्यास बहुत सीधा है, लेकिन अर्थ / usuage एक बिट croocked है. मेरी तरह एक स्मृति के साथ, हर मैं rework करने के लिए मेरी स्लाइडर स्क्रिप्ट पर बैठते हैं ... मैं tokeep इस क्लिप संपत्ति का उपयोग करने के लिए वापस जिक्र है, अपने आप को तर्क है कि मैं अपनी लिपि में बनाया है याद दिलाना .... इसलिए! यह कलम करने के लिए नीचे, सोचा था कि यह भविष्य (और भी जो लगते हैं की लाभ के लिए सीएसएस क्लिप संपत्ति के द्वारा boggled) याद करने की आशा के साथ

सीएसएस क्लिप का क्या करता है?

क्लिप 2.1 सीएसएस के दृश्य प्रभाव मॉड्यूल का हिस्सा है. सीधे शब्दों में कहें, अपने काम के लिए काटा जा रहा है कि किसी ऑब्जेक्ट के शीर्ष पर एक दृश्य विंडो जगह है, इसलिए छवियों कतरन और अतिरिक्त फ़ाइलें (मैं पहले से ही बेहतर उपयोग करने के लिए स्लाइडर घटक में इस सुविधा को बनाने के लिए बिना थंबनेल बनाने )

सीएसएस क्लिप संपत्ति का उपयोग करना है, तो आप एक रंगरूट आकार का उपयोग क्लिपिंग बना सकते हैं. कई अन्य सीएसएस गुण (मार्जिन, padding आदि की तरह), रंगरूट का उपयोग कर की तरह चार निर्देशांक शीर्ष, सही, नीचे, बाएँ (TRBL) की आवश्यकता है. इस संपत्ति croocked प्रकृति को दर्शाता है जब आप कैसे क्लिप कतरन क्षेत्र की गणना पर एक करीब देखो ले, इन चार निर्देशांक (थोड़ी देर के लिए टॉस में मस्तिष्क भेजता है) का उपयोग. अब आप भ्रमित नीचे ऊपर से शुरू होता है, और दाएँ से बाएँ से शुरू होती है. . आप देखते हैं कि मैं क्या कहा? .... इसलिए इस पोस्ट ...

इस छोटे से भ्रम की स्थिति आसानी से सीएसएस संपत्ति / क्लिप रंगरूट के इस दृश्य विवरण के साथ गायब हो सकते हैं, नीचे के रूप में!!!

सीएसएस क्लिप आवश्यकताएँ

हम काम शुरू कर दिया है squarer देख छवि में निम्न थंबनेल छवि क्लिप (और यह भी एक चौड़े कोण छवि)

मूल Thumbnal छवि /	Sqaure Thumbmail के लिए क्लिप आवश्यकताएँ

सीएसएस क्लिप परिणाम

डेमो देखें | डाउनलोड sourcefiles

इससे पहले कि हम करने के लिए सीएसएस के साथ सौदा करने के लिए हमारे पृष्ठ लेआउट बनाने के लिए, किसी तालिका कक्ष के अंदर कुछ सामग्री aligning के बस बच्चों का खेल लग रहा था. बस "संरेखित करें या अपनी पसंद के संरेखण, केक का टुकड़ा है करने के लिए तालिका के" valign "के संपत्ति सेट!
सीएसएस लेआउट के साथ, यद्यपि हम तत्वों के लिए संपत्ति खड़ी संरेखित ", यह" संरेखित करें "या" valign "के गुण के रूप में सरल रूप में हो नहीं लगता है. अधिक specifiic "ऊर्ध्वाधर पंक्ति में" लगता है, अपनी समस्याओं का कोई हल नहीं खासकर अगर पार ब्राउज़र सीएसएस का एक टुकड़ा लिख रहे हैं.

HTML टेबल्स के उपयोग के बिना, वस्तु पर केंद्रित की समस्या, यह एक छवि या एक से युक्त विभाजन के भीतर कुछ पाठ है, शायद हर यूआई / कुछ बिंदु पर सीएसएस डेवलपर्स दुःस्वप्न किया गया हो. यह समस्या आगे aligning, अगर केन्द्रित किया वस्तु प्रकृति में गतिशील है, यानी जब इसकी ऊंचाई चर रहा है की अपनी चिंताओं extrapolates (अज्ञात ऊंचाई).

हालांकि वहाँ कोई ज्ञात सीधे आगे समाधान है कि ब्राउज़र के साथ हम सौदा है की सीमा के पार काम है, समाधान है कि मैं करता पर आने की कोशिश की है कि मैं इसे में करने की कोशिश की है कुछ ब्राउज़रों में काम करने लगते हैं (IE6, IE 7 , एफएफ).

हल:
मोज़िला, ओपेरा और सफारी जैसे ब्राउज़रों में अजीब "ऊर्ध्वाधर पंक्ति में" संपत्ति अपने होश में लाया जा सकता है बस, "टेबल सेल (प्रदर्शन: टेबल सेल) युक्त विभाजन के" प्रदर्शन "संपत्ति की स्थापना द्वारा व्यवहार .

समस्या अभी भी ब्राउज़र आईई परिवार के साथ रहता है, जो अभी तक टेबल सेल संपत्ति और अज्ञानी के साथ क्या समझ के रूप में वे कर रहे हैं, वे तो बस इसे अनदेखा नहीं लगता है. नीचे, यह देखते हुए हालांकि सरल, विज्ञापन करना बातें होती हैं HTML करने के लिए कुछ अधिक डोम तत्वों समाधान.

सीएसएस और HTML इस तरह दिखता है
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> देखा गया में करें <br/> हैं: 3456 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए | डाउनलोड स्रोत फ़ाइलें (448 बार डाउनलोड)

शीर्ष सीएसएस संरेखित करें
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

नीचे सीएसएस संरेखित करें
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
एचटीएमएल: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> देखा गया करें <br/>: 1234 </ div>
</ Div>
</ Div>

परिणाम इस तरह दिखता है: -

डेमो यहाँ देखने के लिए यहाँ डाउनलोड करें |

उम्र की तरह लगता है, जब से मैं इस संरेखण समस्या के लिए एक उचित समाधान खोजने की कोशिश कर रहा था. लेकिन अब इस समाधान के साथ, मैं थोड़ा शांति में लग रहा है.

एक है कि किसी दिन आशा के साथ

• ऊर्ध्वाधर संरेखण सीएसएस में संपत्ति झाड़ी के आसपास बहुत से हरा करने के लिए बिना, यह किसी तालिका कक्ष के अंदर की तरह काम करेंगे
• कम से कम, मार्जिन टॉप स्थापित ऑटो और मार्जिन नीचे: ऑटो, साथ मार्जिन छोड़ दिया और मार्जिन - सही सेट करने के लिए ऑटो के रूप में एक ही परिणाम के रूप में दे देंगे
• ब्राउज़र युद्धों कुछ दिन खत्म हो जाएगा.
• बस सभी के लिए एक ब्राउज़र होगा.

सीएसएस और ऊपर यहाँ समाधान के HTML understandability के लिए (448 बार करें) .., सीएसएस अनुकूलित किया गया है नहीं है

पुनश्च: और वैसे भी, उन कुछ तस्वीरें मैं क्लिक किया है के थंबनेल हैं ...

यदि अपनी आवश्यकता के लिए एक XML में एक नोड मूल्य है, कि मूल्य का एक सीमांकित स्ट्रिंग शामिल विभाजित है, अलग - अलग मदों में, तो आप सही जगह पहुँच गए हैं ... नीचे दिए गए उदाहरण पर एक नज़र है. यदि आप XML और XSL के एक थोड़ा के साथ परिचित हैं ... मुझे नहीं लगता कि आप किसी भी स्पष्टीकरण की आवश्यकता होगी.
इसके अलावा, इस उदाहरण, xsl तरह XSL कार्यों के उपयोग में शामिल हैं: कॉल टेम्पलेट, xsl: उपश्रेणी पहले xsl: उपश्रेणी के बाद, अगर है कि क्या आप के बाद कर रहे हैं.

तब्दील हो एक्सएमएल (food.xml) के:
मान लें कार्य करने के लिए अल्पविराम से टैग खोजशब्दों "" में स्ट्रिंग सीमांकित, tokenize है

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

(Food.xsl) XSL: -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

परिणामी उत्पादन HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

कहने की जरूरत नहीं ... बस अपनी पसंद का सीमांकक पैरामीटर "delimitr" बदलने के

यदि आप कभी भी बना दिया है (या एक बना) कार्यक्षेत्र मेनू सूची (ली) आइटम टैग और सीएसएस का उपयोग कर, आप मुठभेड़ हो सकता है, यह अभी तक इंटरनेट एक्सप्लोरर, जहां IE सूची आइटम है कि ब्लॉक स्तर तत्व होते हैं के बीच 6 आवेषण इन अंतराल, में एक और बग यानी अगर वहाँ मार्कअप में सूची आइटम्स के बीच कोई खाली स्थान है. धन्यवाद, लेकिन नहीं धन्यवाद, आईई संस्करण 7 इस बग से मुक्त लगता है.
यदि मुझे, और कई और अधिक जैसे, आप निराश डेवलपर्स, जो अभी भी अपने नए लेआउट, IE6 में भी काम मिलता है इस बैंड के हैं, तो यह उपयोगी साबित हो सकता है. एक नजर है ...

नमूना मार्कअप:

<ul id="menu">
<li <a> href="#"> होम </ a> </ li>
<li <a बारे href="#"> </ a> </ li>
<li <a> href="#"> सेवा </ a> </ li>
<li <a पोर्टफोलियो href="#"> </ a> </ li>
<li <a> href="#"> अक्सर पूछे जाने वाले प्रश्न </ a> </ li>
<li <a> href="#"> हमसे संपर्क करें </ a> </ li>
</ Ul>

आप कुछ सीएसएस बनाने के लिए, नीचे एक के समान हो सकता है, एक ऊर्ध्वाधर मेनू में ऊपर मार्कअप transfrom ....

नमूना सीएसएस ...
# मेनू {
मार्जिन: 0; padding: 0; background: # FF9900;
सूची शैली - प्रकार: कोई नहीं; चौड़ाई: 150px;
}
# मेनू ली {:; गद्दी 0 मार्जिन: 0;}
# मेनू {प्रदर्शन: ब्लॉक;
रंग: 555,555 #;
पाठ - सजावट: कोई नहीं;
गद्दी: 0 15px;
रेखा से ऊंचाई: 2.5, सीमा - नीचे: 1px ठोस # FFF;
}

परिणाम आप देखेंगे ...

इस बग (संशोधित / बोल्ड इटैलिक में सीएसएस जोडी) के लिए समाधान

# मेनू {
मार्जिन: 0; padding: 0; पृष्ठभूमि: # FF9900, सूची शैली - प्रकार: कोई नहीं; चौड़ाई: 150px;
फ्लोट: छोड़ दिया; / * इस जारी सूची आइटम * /
}
# मेनू ली {
मार्जिन: 0; padding: 0;
फ्लोट: छोड़ दिया; / * यह फिक्सेस * /
चौड़ाई: 100%; IE6 में / * रहितसफेद बग * /
}
# मेनू {
प्रदर्शन: ब्लॉक; रंग: ५,५५,५५५;
पाठ - सजावट: कोई नहीं;
गद्दी: 0 15px;
रेखा से ऊंचाई: 2.5, सीमा - नीचे: 1px ठोस # FFF;
}

यदि उपरोक्त समाधान doesnot काम करने लगते हैं (केवल IE6 के लिए जाना जाता कारणों के लिए) ... इस विधि बजाय कोशिश

बस अपने मार्कअप करने के लिए इस अतिरिक्त IE6 का केवल शैलियों को जोड़ने ...

<- [लेफ्टिनेंट IE 7>
<style type="text/css">
# मेनू ली एक {प्रदर्शन: इनलाइन ब्लॉक;}
# मेनू ली एक {प्रदर्शन: ब्लॉक;}
</ शैली>
<[Endif] ->

यदि XML / XSL के बदल अपने domian है, तो वहाँ कई बार जब हम पुस्तकालय मद में इस्तेमाल किया जा (के लिए फिर से प्रयोग करने योग्य बनाया जा) गतिशील कोड का एक टुकड़ा चाहते हैं. मैं क्या मतलब है, शायद इस उदाहरण परिदृश्य के साथ और अधिक स्पष्ट किया जा सकता है.

कल्पना कीजिए कि आप एक वेबसाइट का निर्माण कर रहे हैं (और एक्सएमएल, XSL transfroms बिल्कुल का उपयोग करके) और पृष्ठों की सबसे टिप्पणियां मॉड्यूल होगा. अच्छी तरह से! तो या तो आप कॉपी या प्रत्येक पृष्ठ (जो मैं कहना है लेकिन रखरखाव और rework एक बुरा सपना है) टेम्पलेट या और भी बेहतर में इस कोड को पेस्ट करने के लिए, आप एक फ़ाइल शामिल है जो कभी जहाँ आप यह चाहते हैं अपने पृष्ठ में खींचा जा सकता है (बनाने ) है ...
तो हम एक XSL शामिल फ़ाइल कैसे बना सकता हूँ और यह एक और XSL फ़ाइल के अंदर शामिल हैं? यहाँ है कैसे ...

बस बातें स्पष्ट करने के लिए ... यहाँ फ़ाइलों के त्वरित सूची है कि आप बना होता है ... यहाँ, हम एक माता पिता कहा जाता है पृष्ठ भोजन में फलों और सब्जियों के बारे में जानकारी सहित जाएगा.

1. XML डेटा फ़ाइल जिस पर परिवर्तन लागू किया जाएगा - food.xml
2. food.xsl मुख्य XSL फ़ाइल है, जो हमारे food.xml बदलना होगा
3. inc_fruits.xsl - XSL फ़ाइल है कि फल डेटा प्रस्तुत करना होगा शामिल
4. inc_vegtables.xsl - XSL फ़ाइल कि vetetables डेटा प्रस्तुत करना होगा शामिल

मैं न लगता है कि मैं बहुत समझाने, ऊपर तत्वों के लिए कोड, आत्म व्याख्यात्मक हो जाएगा ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: टेम्पलेट>
</ Xsl: स्टाइलशीट>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

सब से ऊपर यहाँ फ़ाइलें (249 डाउनलोड)

IE 6, MSIE तरह किया गया है काफी कुछ और सीएसएस सबसे अन्य मानक ब्राउज़रों के लिए मानक गुण जोड़कर हमें यूआई डेवलपर्स के लिए. एक "न्यूनतम ऊंचाई में इस तरह के उपयोगी संपत्ति है. सुंदर सीधे आगे संपत्ति है कि कोई घना विवरण की जरूरत है. जब एक विभाजन के लिए न्यूनतम ऊंचाई सेट कर दिया जाता है, यह हमेशा कि सेट ऊंचाई को बरकरार रखे हुए है जब यह सामग्री घरों कम रह रहे हैं की तुलना में यह पकड़ और महत्वपूर्ण बात तराजू (वनीला "ऊंचाई" संपत्ति के विपरीत) या सीएसएस शब्दों में, यह एक तरह बर्ताव करती है जिसका "ऊँचाई" विभाजन "ऑटो" के लिए सेट कर दिया जाता है.

हम में से कुछ गरीब डेवलपर्स, वह भी IE6 में काम करना चाहिए जो अभी भी कोड सीएसएस करने के लिए आवश्यक हैं के लिए, "न्यूनतम ऊंचाई" संयुक्त राष्ट्र की उपलब्धता, एक शो डाट कुछ समय साबित कर सकता था ... donot निराशा.

सौभाग्य से, हम IE में पर्याप्त quirks, कि हम बाहर लाभ का उपयोग करने के लिए और के माध्यम से हमारे रास्ते में हैक करने के लिए हमारे लक्ष्य तक पहुँचने के लिए है ... यानी एक प्रभाग डिवीजन बनाने के रूप में यद्यपि IE6 में न्यूनतम ऊंचाई

समाधान 1: का प्रयोग अधोडैस हैक [ ... और अधिक पढ़ें ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

एचटीएमएल: -
<div class="box1">Some dynamic content with variable height ...</div>

---

समाधान 2: सीएसएस गुण चयनकर्ता हैक का उपयोग करना

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

एचटीएमएल: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


सीएसएस गुण चयनकर्ता हैक ब्राउज़र पहले था IE6 के एक atribute-चयनकर्ता नजरअंदाज कर दिया तथ्य का लाभ लेता है. नोट वर्ग = "someclass" के साथ एक कंटेनर विभाजन की आवश्यकता है. इस विभाजन के लिए वर्ग विशेषता की उपस्थिति, ऊंचाई ओपेरा मोज़िला, और MSIE7 के के लिए ऑटो और बाद में वापस को अध्यारोहित करता है. IE6, जो atribute चयनकर्ताओं का समर्थन नहीं करता है इसे अनदेखा.

IE6 के लिए न्यूनतम ऊंचाई हैक का डेमो देखें

यदि आप XML और XSL का उपयोग करें, तो आप एक बार भर में आ गए हो सकता है, जब आप विशेषताओं और आप XSL में XML नोड के मूल्यों के साथ खेलने के आसपास है. वे इस बारे में घना जानकारी के साथ साइटों की लोड कर रहे हैं, लेकिन कोई भी मैंने पाया संक्षिप्त और सटीक थे ... यह सं XML / XSL ट्यूटोरियल है, लेकिन मेरे धोखा सूची के कुछ प्रकार के एक साथ रखा करने की कोशिश ...

नमूना एक्सएमएल कि हम साथ काम करना होगा इस तरह दिखता है ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

तो चलो हमारे ऊपर XSL का उपयोग एक्सएमएल बदलने शुरू

उदाहरण 1: एक चुना गुण मान प्रदर्शित

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML परिणाम की तरह दिखेगा

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

उदाहरण 2: के माध्यम से पाशन और सभी XML विशेषता नाम और उनके मान प्रदर्शित

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML परिणाम की तरह दिखेगा


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


इस अंतरिक्ष देखो, मैं इस नए निष्कर्ष के साथ अद्यतन रखेंगे ...

एक सीएसएस रीसेट / सीएसएस तत्व शैलियों की एक संख्या निर्धारित करने के लिए एक विशिष्ट आधारभूत है कि विभिन्न ब्राउज़रों में स्थिरता बनाता है.

हम सब पार ब्राउज़र सीएसएस लेखन के बुरे सपने के माध्यम से किया गया है. तो जब हम हमारे सीएसएस लेखन शुरू, यह अभ्यास हटाने / किसी भी पार ब्राउज़र विसंगतियों को रीसेट रीसेट है. सीएसएस रीसेट करता है, सरल सीएसएस के कुछ लाइनों है कि आप के साथ अपने सीएसएस शुरू, तुम एक साफ आधार पर अपने निर्माण शुरू करने के लिए दे रहे हैं.

सीएसएस रीसेट करता है कि मैं सामान्य रूप से उपयोग करने के लिए करते हैं इस तरह दिखता है

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

राजभाषा उल {
सूची शैली: कोई नहीं;
}

H1, H2, H3, H4, H5, H6 {
फ़ॉन्ट का आकार: 100%;
फ़ॉन्ट वजन: सामान्य;
}

रीसेट ब्राउज़र फ़ॉन्ट आकार
इसके अलावा रीसेट है कि निम्न पंक्ति में ब्राउज़र फ़ॉन्ट आकार करने के लिए लागू किया गया है नोट ...

html {font-size: 76%;}

ऊपर सीएसएस ब्राउज़र फ़ॉन्ट आकार 10 पिक्सल के लिए रीसेट करता है, और इस रिश्तेदार फ़ॉन्ट आकार (जो एक वाई अनुपालन से हर prespective महत्वपूर्ण है) के साथ काम करने के लिए संभव बनाता है
उदाहरण के लिए, निम्न परिभाषा में, एक अवधि में फ़ॉन्ट आकार 10 पिक्सल और paragarph में 14 पिक्सल के लिए सेट कर दिया जाता है कि सेट कर दिया जाता है ...

span {font-size: 1em;}
p {font-size: 1.4em;}