2008 2008 4 अक्टूबर

इंटरनेट में गायब HTML / DIV तत्व एक्सप्लोरर आईई []

हमेशा की तरह, IE और यह एक आईई Quirks के शीर्ष 10 में स्थान के साथ कई कुछ अजीब समस्याओं में से एक.

समस्या का बयान (यह मेरी समस्या थी, शायद आप समान misbehaviors है):
मैं कई DIV पृष्ठ वर्ग sectionhead ", के साथ जो कुछ भी नहीं है, लेकिन पृष्ठ पर एक वर्ग के शीर्षक में है. तो मैं कुछ शैली इस तरह देख रहा है

Sectionhead {font-size: 18px; पृष्ठभूमि # cfcfcf:; गद्दी: 5px;}.

div कुछ काला पाठ के साथ एक हल्के भूरे रंग की पट्टी है. IE में क्या होता है इन अनुभाग हेडर के कुछ ठीक से प्रदर्शित कर रहे हैं, लेकिन कुछ अदृश्य रहे हैं, जब तक आप पृष्ठ स्क्रॉल या पृष्ठ आदि पर क्लिक करें कुछ कुछ समय वे गायब हो जाते हैं जब आप ऑल्ट कुंजी को क्लिक करें जब आप पृष्ठ नीचे या स्क्रॉल पट्टी के साथ स्क्रॉल. वे कभी कभी फिर से बाहर निकलना जब आप (F5) पृष्ठ पुनः लोड करने लगते हैं. कम एक पूरी तरह से सरल DIV मैं कुछ सरल शैली के साथ बुरा बर्ताव करती है.
क्या इस तरह के एक अनियमित व्यवहार का कारण बन सकता है? अच्छी तरह से! सच कहूँ तो, पता नहीं!

संभव समाधान:
फिर मुझे नहीं पूछ रहे हो, क्यों, लेकिन कई मामलों में इस समस्या जब आप स्थिति को जोड़ने के लिए गायब हो जाता है: तत्वों गलत बर्ताव शैली के सापेक्ष इस तरह,

Sectionhead {font-size: 18px; पृष्ठभूमि # cfcfcf:; गद्दी: 5px; स्थिति: रिश्तेदार}.

अजीब है लेकिन क्या कहना है? भगवान ने मुझे IE से आशीर्वाद!

और अमेरिका के साथ साझा करते हैं, अगर तुम इसी तरह समस्याओं था.


2008 3 Oct 2008

अपने वेबपेज के लिए सरल, हल्के, क्रॉस ब्राउज़र Lightbox

ऐसा नहीं है कि वहाँ केवल कुछ है Lightbox है कि आप पा सकते हैं जब आप गूगल कर रहे हैं. lightboxes है कि मैंने पाया की अधिकांश के साथ मुद्दा था कि वे सभी एक या अन्य JQuery, प्रोटोटाइप, MooTools और पसंद की तरह भारी वजन जावास्क्रिप्ट frameworks का उपयोग करने के लिए लग रहा था. वे सब शांत और ठाठ देख रहे हैं. लेकिन यदि आपकी आवश्यकता है "लेकिन मैं अपनी साइट के लिए एक सरल और हल्के lightbox स्क्रिप्ट चाहते हैं", तो यहाँ यह है;

इस lightbox की कुछ अच्छी सुविधाएँ

  1. बहुत हल्का
    . 4kb लिपियों जब पैक (केबी unpacked किया 8)
    ख. 2 सीएसएस का केबी
    ग. Lightbox कंटेनर के लिए HTML की कुछ पंक्तियाँ
  2. सरल समझने के लिए और लागू
  3. एक ही पृष्ठ पर एकाधिक Lightboxes हो सकता है.
  4. वही lightbox कंटेनर को दिखाने के लिए, विभिन्न सामग्री (जो अलग - अलग पृष्ठ में छिपा डिवीजनों के रूप में शामिल है), लिंक / विकल्प है कि क्लिक किए जाने पर निर्भर करता है प्रयोग किया जाता है.
  5. स्वतः ही केंद्र है, जैसे, विंडो ऊंचाई और चौड़ाई (स्क्रीन संकल्प), पृष्ठ स्क्रॉल राशि और lightbox की सामग्री की ऊंचाई सभी कारकों को ध्यान में ले
  6. IE 7 एंड स्मूथरिंग में परीक्षण

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1740 बार डाउनलोड)


[ज़िप फ़ाइल में फ़ाइलें] Lightbox का उपयोग करना

jo.js, jo_pack.js [पैक संस्करण]: जावास्क्रिप्ट वस्तुओं का एक सरल सेट [जो], जो तत्व खिड़की, और दस्तावेज़ पोजीशनिंग स्क्रिप्ट शामिल हैं. आप JO.JS खुला अगर आप कुछ उन्नत Javascripting, सार कार्यों बनाने के साथ अपने हाथ गंदे हो सकते हैं, तत्व गुण और इस तरह के विस्तार. यदि आप Javascripting में भी ज्यादा नहीं है, यह अकेला छोड़ दो.

lightbox.js, lightbox_pack.js [पैक संस्करण: प्रकाश बॉक्स प्रबंधक लिपियों होते. यदि आप पेज डिजाइनर पृष्ठ पर lightbox को लागू करने के साथ भी जिम्मेदार हैं, तो आप LightBoxManager समझने की जरूरत है. LightBoxManager मूल रूप से सिर्फ दो कार्यों showLightBox और closeLightBox शामिल हैं.

lightbox.css: - यदि आप सीएसएस पता है, आप आसपास lightbox.css के साथ खेलने के लिए देखो lightbox.css पता लग रहा है अनुकूलित कर सकते हैं

index.html: दो अलग अलग सामग्री के साथ lightbox का नमूना कार्यान्वयन

lb_underlay_bkg.png: - यह प्रकाश / सिमी पारदर्शी छवि lightbox बुनियाद के लिए पृष्ठभूमि में प्रयोग किया जाता है [बुनियाद lighbox नीचे परत है, जो पृष्ठ पर किसी अन्य संस्था को क्लिक करने से उपयोगकर्ता को रोकता है, जबकि lightbox खुला है]. आप इस उद्देश्य के लिए किसी भी छवि या यहाँ तक कि एक ठोस रंग का उपयोग करें, पृष्ठ डिजाइन और आवश्यकता के आधार पर कर सकते हैं.

icon_lb_close.gif: प्रकाश बॉक्स के ऊपरी दाएँ भाग पर करीब lightbox संभाल के लिए छवि. डिजाइन के अनुसार किसी भी छवि का उपयोग कर सकते हैं

डेमो देखें |
डाउनलोड Lightbox स्रोत ज़िप (1740 बार डाउनलोड)

कृपया हमें अपनी टिप्पणियाँ और प्रतिक्रिया ...


2008 4 सितम्बर 2008

फिक्स्ड (यह पुस्तक खिड़की पर स्थिर रहता है) सीएसएस केवल का उपयोग कर ब्लॉक

इस पोस्ट में अंडे चूसना करने के लिए वाक्यांश "शिक्षण दादी" के लिए एक अच्छा उदाहरण हो सकता है ... क्योंकि यह सिर्फ बुनियादी सीएसएस सामग्री है हो सकता है. लेकिन उन लोगों के लिए, जैसे अनजान मुझे, इस भेष में एक वरदान हो सकता है. मैं हमेशा सोचा (मैं यह कह के लिए अपनी नौकरी खो सकता है), यह केवल करने के लिए संभव था HTML पृष्ठ स्थैतिक सामग्री के कुछ भाग को रखने के (अर्थ, अपनी स्थिति बनी हुई है के रूप में विंडो स्क्रॉल पर है), कुछ स्मार्ट स्क्रिप्ट का उपयोग कर, उन सभी वैज्ञानिक करना गणना गतिशील स्थिति को खोजने के लिए, Window.scroll घटनाओं को फँसाने और समय समाप्ति आदि की स्थापना

सोचा के रूप में इस के रूप में आसान कभी नहीं कर सकता .... यहाँ सीएसएस / HTML के नीचे में, मैं चार स्थिर ब्लॉक, एक पृष्ठ का प्रत्येक extrimities करने के लिए तय है, शीर्ष, सही नीचे, और वाम ... अनावश्यक कहने के लिए आप किसी एक या अधिक का चयन अगर होने की आवश्यकता कर सकते हैं ...

सीएसएस
स्थिर {प्रदर्शन: ब्लॉक; z-सूचकांक: 10; रंग: # FFFFFF, अतिप्रवाह-x: छुपा, अतिप्रवाह-y: छुपा, स्थिति: ixed;
}
# सामग्री {हाशिया: 150px 100px 160px 0px; सीमा: 1px ठोस e6e6e6 #}

# लपेटो टी {शीर्ष: 0px; पृष्ठभूमि: 33CC66, चौड़ाई: 100%; ऊँचाई: 55px;}

# लपेटो l {शीर्ष: 80px; पृष्ठभूमि: ठोस 2px e6e6e6 # # FF9966, ऊँचाई: 300px;:; चौड़ाई 150px सीमा;

# लपेटो - ख {नीचे: 0px; पृष्ठभूमि: # 3333CC, चौड़ाई: 100%; ऊँचाई: 55px;}

# लपेटो-r {शीर्ष: 80px; पृष्ठभूमि: # 6666FF; ऊँचाई: 300px; चौड़ाई: 140px; सीमा: ठोस 2px e6e6e6, सही: 0;}

एचटीएमएल
<div id="contents"> आप मुख्य पृष्ठ </ div> सामग्री
<div id="wrap-b" class="static">
पेज के तल पर स्थिर सामग्री
</ Div>
<div id="wrap-t" class="static">
पृष्ठ शीर्ष पर स्थिर सामग्री
</ Div>

<div id="wrap-l" class="static">
पेज पर स्थिर सामग्री को छोड़ दिया
</ Div>
<div id="wrap-r" class="static">
पेज सही पर स्थिर सामग्री
</ Div>

Wroking नमूना यहां देखें


2008 2 सितम्बर 2008

सीएसएस हैक: जावास्क्रिप्ट, सीएसएस, केवल फ़ायरफ़ॉक्स के लिए HTML

कई बार हम ब्राउज़र specfic हैक्स लिखने की जरूरत महसूस हो रहा है (हालांकि यह एक अच्छा अभ्यास नहीं है, हम यूआई डेवलपर्स के लिए महान ब्राउज़र युद्धों जब तक इस तरह के बुराइयों को सहारा है एक संघर्ष विराम के लिए आता है). इससे पहले, मैं इस लेख में उल्लेख किया था, आपके केवल ies के लिए , कैसे एक सीएसएस टुकड़ा है कि आईई ब्राउज़र को दिखाई हो <केवल IE7 के लिखने के.

कल, मैं एक मामले में, जहाँ मैं कुछ फ़ायर्फ़ॉक्स विशिष्ट सीएसएस टुकड़े लिखना चाहता था. अच्छी तरह से! मुझे यकीन है कि अगर वहाँ इस के लिए एक सीएसएस कोड है, लेकिन नहीं कर रहा हूँ वहाँ एक HTML है वहाँ एक पकड़ने की, हालांकि है., HTML doesnot पास HTML सत्यापन के इस टुकड़े. लेकिन, anywaz! यदि आप बुरी तरह से या के रूप में इस तरह फंस रहे हैं, सत्यापन के लिए कोई संबंध है (कुछ समय हम क्रूर हो सकता है), आप निम्न का उपयोग करने के लिए एक एफएफ केवल स्टाइलशीट के लिए एक लिंक की घोषणा सकता है या अभी भी इस खंड के भीतर सीएसएस कोड. कोड है

<comment> अपने ही फ़ायर्फ़ॉक्स HTML / सीएसएस / लिपियों यहाँ <टिप्पणी /> रखो

जैसे
<comment>
<style>
केवल FF / * / * शैलियाँ
fieldset {सीमा: 1px ठोस dddddd #;}
</ शैली>
</ टिप्पणी>

"मैं खुश हूँ पल के लिए ...


2008 15 Jul 2008

आसपास काम आईई 8 सख्त मोड और सीएसएस अस्पष्टता ...

वैसे ओह! वापस IE8 में अस्पष्टता के बारे में कुछ दिनों पहले पोस्ट में, मैं एक महत्वपूर्ण बिंदु है कि "आईई 8 सख्त मोड सीएसएस अस्पष्टता के लिए अनुमति नहीं है" का उल्लेख करना भूल गया.
यहाँ जो समझते हैं कि मैं क्या सख्त मोड से मतलब है donot, के लिए त्वरित ट्यूटोरियल है .

इस के चारों ओर एक काम (आईई देव टीम पहले एहसास है कि वे सभी दुनिया भर में फिर से काम दिनचर्या के लिए मार्ग प्रशस्त किया है, वेब साइटों कुछ अस्पष्टता के साथ पॉप अप lightboxes का उपयोग करने के लिए, और वापस अस्पष्टता के लिए समर्थन देते हैं) के लिए एक का उपयोग करने के लिए है अर्द्ध पारदर्शी छवि ... अधिमानतः PNG प्रारूप में है (मैं बुरा अनुभव था पारदर्शी GIF छवियों के रूप में वे करने के लिए माना गया काम करने के लिए हो रही है). रंग और आप की तरह पारदर्शिता के प्रतिशत के एक PNG छवि बनाने के लिए, आप में अपने पसंदीदा छवि संपादक और यह अपने lightbox उपरिशायी के लिए एक पृष्ठभूमि छवि के रूप में उपयोग करें.

यानी
कुछ इस तरह के बजाय

Lighbox_overlay. {
पृष्ठभूमि रंग: # FFFFFF;
z-सूचकांक: 1001;
MOZ - अस्पष्टता: 0.6;
अस्पष्टता: 0.६०;
फिल्टर: अल्फा (अस्पष्टता = 60);
}

यह मत करो ....

Lighbox_overlay. {
पृष्ठभूमि: यूआरएल दोहराने (bkg.png) के;
}

इसे करने की कोशिश करने के लिए, यहाँ क्लिक करें डाउनलोड करने के लिए यहाँ क्लिक करें!


2008 जुलाई 6 2008

IE8 में कोई अस्पष्टता ""

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

थोड़ी देर के लिए चारों ओर Digged, के लिए एक समाधान खोजने के लिए यह तय करने के लिए और फिर क्या करने की कोशिश कर रहा है ...
यह समय हमारे सभी समय पसंदीदा ब्राउज़र सीएसएस अस्पष्टता के लिए सभी का समर्थन छोड़ने के द्वारा फिर से यह सब किया है. गैर मानक फिल्टर: अल्फा (अस्पष्टता = # #) `सीएसएस गुण हटा दिया गया है, अच्छा है, लेकिन वे भी पूरी तरह से CSS3 अस्पष्टता (सभी अन्य ब्राउज़र अच्छी तरह से में है यह रखा है) की तरह समर्थन जोड़ने के लिए भूल गया. तो, पहली बार के लिए के बाद से भगवान हमें सीएसएस अस्पष्टता (5.0 आईई के बाद से, मुझे लगता है) के बारे में बताया, एक वेब ब्राउज़र सीएसएस अस्पष्टता नहीं का समर्थन करेंगे.
और अब शीर्ष पर क्रीम के लिए: आईई 8 टीम से आधिकारिक शब्द? यह डिजाइन द्वारा "और है," हम IE के एक भविष्य के संस्करण में इस पर विचार करेंगे.

पुनश्च: एफएफ में इस पृष्ठ की कोशिश करो, यह कसम खाता हूँ साफ दिखता है!


2008 2 Jul 2008

हम नकली निरपेक्ष स्थिति निर्धारण का उपयोग कर रहे हैं: एक शानदार सीसीएस लेआउट

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

आमतौर पर, जब हम सीएसएस लेआउट बनाने के लिए, हम "स्थिति" या "मंगाई", या दोनों का एक बहुत बुरा संयोजन का उपयोग करें. एरिक सोल और उनकी टीम एक सीएसएस लेआउट तकनीक है, जो वे "नकली निरपेक्ष पोजिशनिंग" के रूप में अशुद्ध कॉलम तकनीक के बाद कि किसी स्तंभ की उपस्थिति simulates का नाम दिया है एक नए प्रकार की सही तकनीक के लिए अगले परिभाषित.

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

एरिक यश!


2008 जून 20 2008

रेखा / सूची आइटम में सफेद अंतरिक्ष (ली) बग IE6 में

यदि आप कभी भी बना दिया है (या एक बना) कार्यक्षेत्र मेनू सूची (ली) आइटम टैग और सीएसएस का उपयोग कर, आप मुठभेड़ हो सकता है, यह अभी तक इंटरनेट एक्सप्लोरर, जहां 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] ->


2008 24 Apr 2008

उत्तम आचरण: सीएसएस के साथ कार्य करना

शीर्ष पर रख stylesheets

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

यह एक दस्तावेज तथ्य यह है कि समग्र उपयोगकर्ता अनुभव को बढ़ाने के लिए है, यह महत्वपूर्ण है प्रगति संकेतक और दृश्य feedbacks प्रदान करते हैं. पृष्ठ के तत्वों बदलाव ला होने से बचने के लिए अगर मामले में उनकी शैली बदलने के लिए, कुछ ब्राउज़रों आईई, पृष्ठ के ब्लॉक प्रतिपादन सहित, जब तक सीएसएस पूरी तरह भरी हुई है. इस वजह से उपयोगकर्ता को देखने के हो जाता है एक खाली सफेद पृष्ठ.

W3 एचटीएमएल निर्दिष्टीकरण 'भी कहा गया है कि सीएसएस मुझे HTML पृष्ठ के सिर अनुभाग में शामिल करना चाहिए. at the bottom of the page, so it's best not to use it. यह भी ध्यान रखें कि, IE में @import का उपयोग कर के रूप में एक ही बर्ताव करती है <link> पृष्ठ के तल पर, तो यह सबसे अच्छा करने के लिए इसका इस्तेमाल नहीं है.

ब्राउज़र विशिष्ट सुविधाओं का उपयोग करने से बचें

फिल्टर का प्रयोग करें: फ़िल्टर स्मृति की खपत बढ़ जाती है और तत्व प्रति लागू है, छवि के प्रति नहीं है, तो समस्या बढ़ रहा है. इसके अलावा, फ़िल्टर IE के स्वामित्व हैं, इसलिए अन्य ब्राउज़रों में काम नहीं के रूप में करना होगा. यदि आप पारदर्शी या ढाल पृष्ठभूमि चाहते हैं, छवियों के साथ 1Pixel का उपयोग करें.
अभिव्यक्ति: सीएसएस अभिव्यक्ति करने के लिए एक अच्छा सीएसएस में सुविधा रहे हैं, लेकिन अभी भी IE विशिष्ट सुविधा है. इसके अलावा, यह नोट करना महत्वपूर्ण है कि, इन अभिव्यक्ति कर रहे हैं मूल्यांकन जब पृष्ठ प्रदान की गई है और आकार बदला स्क्रॉल, और यहाँ तक कि जब उपयोगकर्ता पृष्ठ पर माउस चाल. कहना है कि यह अपने पृष्ठ के प्रदर्शन को प्रभावित कर सकता है बेकार है. इसलिए सरल शब्दों में, सीएसएस अभिव्यक्ति का उपयोग कर से बचें, जब तक आपको लगता है इसकी विधि अपने विपक्ष से अधिक वजन का होता है '

आप सीएसएस Externalise है

बाहरी सीएसएस का उपयोग तेजी से लोड हो रहा है में परिणाम होगा पृष्ठों क्योंकि जावास्क्रिप्ट और सीएसएस फ़ाइलें ब्राउज़र द्वारा कैश्ड हैं. HTML दस्तावेज़ में इनलाइन सीएसएस HTML दस्तावेज़ का अनुरोध किया जाता है हर बार डाउनलोड हो. यह वास्तव में HTTP के किए गए अनुरोध की संख्या कम हो सकता है लेकिन यह बाद में HTML दस्तावेज़ का आकार बढ़ जाती है. बाहरी सीएसएस ब्राउज़र द्वारा कैश्ड हैं, HTML दस्तावेज़ का आकार HTTP अनुरोधों की संख्या में वृद्धि के बिना कम है.

कृपया ध्यान दें कि, अगर आपकी साइट पर उपयोगकर्ताओं के प्रति सत्र एक से अधिक पृष्ठ विचार है और आपके पृष्ठों की पुनः उपयोग एक ही स्क्रिप्ट और स्टाइलशीट कई, वहाँ एक बड़ी कैश्ड बाह्य फ़ाइलों से संभावित लाभ है.

अपने सीएसएस फ़ाइल पैक

पैकिंग या है crunching अपने सीएसएस कोड से अनावश्यक अक्षर को हटाने के लिए उसके आकार जिससे कम लोड समय में सुधार करने की प्रथा है.

सीएसएस मुझे सफेद रिक्त स्थान की तरह और टिप्पणियों के किसी भी अवांछित वर्णों को हटाने के द्वारा crunched, आदि कर सकते हैं, newlines


2008 12 Apr 2008

सीएसएस क्रॉस ब्राउज़र न्यूनतम लंबाई हैक

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 के लिए न्यूनतम ऊंचाई हैक का डेमो देखें



NDK घर | आईटी व्यक्त | व्यक्त तालु | व्यक्त Penmenship | श्रद्धा व्यक्त | अपने आप को व्यक्त