बड़े और छोटे के लिए लेआउट धोखा शीट

नमस्ते!

मैं आपके ध्यान में एक छोटी सी चीट शीट लाना चाहता हूं, जिसमें कुछ सामान्य समस्याओं के समाधान हैं, साथ ही कुछ छोटे-मोटे, मेरी राय में, तथ्यों पर।

यह लेख शुरुआती लोगों के लिए और उन लोगों के लिए अधिक लक्षित है जो अप्रत्यक्ष रूप से लेआउट से संबंधित हैं, लेकिन जिन्हें अक्सर ड्यूटी पर रहना पड़ता है। शायद यहां तक ​​कि लेआउट गुरु उसके लिए कुछ नया पाएंगे अगर उन्होंने लंबे समय तक अपने कौशल में सुधार नहीं किया है।

सीएसएस

अस्थायी तत्वों के साथ शून्य ब्लॉक ऊंचाई।

अक्सर यह समस्या फ्लोट सेट करके हल की जाती है : मूल तत्व पर छोड़ दिया जाता है । लेकिन फ्लोटोमेनिया (फ्लोट: बाएं - हर जगह!) एक अच्छी आदत नहीं है। यह लेखन शैलियों के अच्छे स्वर का खंडन करता है, और कभी-कभी अप्रिय परिणाम भी देता है।
इस समस्या का सबसे अच्छा समाधान होगा:

overflow: hidden 

लेकिन आपको यह याद रखने की आवश्यकता है कि यह संपत्ति उन ब्लॉकों पर लागू नहीं की जा सकती है जिनसे बच्चे आगे जाएंगे।

केंद्र पाठ छवि के सापेक्ष

व्यक्तिगत रूप से, ऐसा कार्य लगातार तब होता है जब मैं पाद लेख में साइट डेवलपर के नाम के साथ एक ब्लॉक टाइप करता हूं। सबसे सरल और सबसे कोड-बचत समाधान छवि को एक नकारात्मक मान के साथ लंबवत-संरेखित गुण असाइन करना है:

 div.class img {vertical-align: -50%;} 

इस मामले में, लेआउट चारों ओर नहीं जाता है, केवल चित्र के पास का पाठ स्थानांतरित किया जाता है। यह तकनीक सभी प्रमुख ब्राउज़रों में शानदार काम करती है।

युपीडी। बहुत बेहतर स्वागत equinox7 उपयोगकर्ता द्वारा प्रेरित है

 vertical-align: middle 

चयन चुनें

अजीब, लेकिन कम ही लोग जानते हैं कि आईडी और क्लास के अलावा, तत्वों को चुनने के लिए किसी भी विशेषता का उपयोग किया जा सकता है। इसके अलावा, हमें संपूर्ण विशेषता मान जानने की आवश्यकता नहीं है।
वाक्य रचना:
तत्व [विशेषता = "मूल्य"]
तत्व [विशेषता ^ = "मूल्य का प्रारंभिक भाग"]
तत्व [विशेषता $ = "मूल्य का अंत"]
तत्व [विशेषता * = "मान में निहित" "

उदाहरण:

 img[title] /*     title */ a[href=”http://habrahabr.ru/”] /*     */ a[href^=”http://”] /*     */ a[href$=”.pdf”] /*   .pdf  */ img[src*=”habr”] /*  ,      ”habr” */ 

सीएसएस फ़ाइल संस्करण निर्दिष्ट करना

ऐसी स्थितियां हैं जब संपादन कार्य फ़ाइल के सीएसएस में किए जाते हैं। लेकिन आधुनिक ब्राउज़र सक्रिय रूप से शैली फ़ाइलों को कैशिंग कर रहे हैं, और अंतिम उपयोगकर्ता बहुत जल्द बदलाव देख सकते हैं। हम घटनाओं को कैसे बल देते हैं?
बहुत सरल है। सीएसएस फ़ाइल के कनेक्शन स्ट्रिंग में, फ़ाइल नाम के बाद href विशेषता में हम "V? File_version" लिखते हैं।
एक उदाहरण:

 <link rel="stylesheet" media="all" href="..css/style.css?v=1" /> 

ब्राउज़र इस पैरामीटर को याद रखता है, और हर बार जब आप साइट पर जाते हैं, तो यह जाँच करता है। यदि फ़ाइल संस्करण बदलता है ... ठीक है, तो आप स्वयं सब कुछ समझ गए :)

एक तत्व के लिए विभिन्न सीमा मूल्य

मान लीजिए कि ब्लॉक में 4 सीमाएँ हैं, और सभी में अलग-अलग रंग हैं। आप इसे इस तरह सेट कर सकते हैं:

 border-top: 1px solid red; border-right: 1px solid green; border-bottom: 1px solid blue; border-left: 1px solid yellow; 

लेकिन एक छोटा और अधिक सुंदर तरीका है:

 border: 1px solid red; border-color: red green blue yellow; 

मार्जिन या पैडिंग के अनुरूप, अंतिम पंक्ति लगातार ऊपरी, दाएं, निचले और बाएं सीमाओं के लिए रंग निर्धारित करती है।
एक ही चाल को अन्य सीमा मापदंडों के साथ किया जा सकता है:

एचटीएमएल 5

इस सप्ताह HTML5 विनिर्देश को मंजूरी दी गई थी, और यह नई पीढ़ी की साइट बनाने के लिए एक महान कारण है!

आप नए मानक पर स्विच नहीं करना चाह सकते हैं, क्योंकि आपको लगता है कि पुराने ब्राउज़र नए टैग को सही ढंग से प्रस्तुत नहीं करेंगे ... खैर, वे वास्तव में ऐसा नहीं करेंगे। लेकिन सिर्फ 2 सरल समायोजन इसे ठीक करेंगे।

1. जावास्क्रिप्ट का उपयोग करके नए टैग जोड़ें:
   
   

    <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('section'); document.createElement('footer'); document.createElement('nav'); document.createElement('article'); document.createElement('aside'); </script> <![endif]--> 

   
   
2. थोड़ा सीएसएस सही करें:
   
   

    header, section, footer, nav, article, aside {display: block;} 

   
   

देखा! अब हमारे पुराने लोग नए लेआउट मानकों के साथ पूरी तरह से साइटों को प्रदर्शित करते हैं।

यदि किसी कारण से आप नए टैग का उपयोग नहीं करना चाहते हैं या नहीं कर सकते हैं, तो कम से कम एक नया सिद्धांत निर्दिष्ट करें। इससे कुछ खराब होने की संभावना नहीं है:

 <!DOCTYPE html> 

क्या वह सुंदर नहीं है? अच्छा करो - एक नया सिद्धांत इंगित करें!

वह सब है। मुझे उम्मीद है कि यह सलाह लेआउट डिजाइनर की कड़ी मेहनत में किसी की मदद करेगी। अ छा!