सामान्य दृष्टिकोण और शैलियों को रीसेट करने के लिए (कस्टम- reset.css)

यहां मैं शैलियों को सामान्य करने और रीसेट करने के लिए अपनी सर्वोत्तम प्रथाओं को साझा करूंगा।
कई सालों तक मैंने एक छोटी फाइल बनाई है, जिसका आधार, शुरू में, सामान्य करने के लिए लिया गया था।

क्यों सामान्य करें, रीसेट नहीं। यह विशेष रूप से क्रॉस-ब्राउज़र संगतता के लिए कैद है, जो बहुत महत्वपूर्ण है। लेकिन अपने शुद्ध रूप में, यह मुझे बिल्कुल भी सूट नहीं करता था, विभिन्न इंडेंटेशन, बॉर्डरिंग इत्यादि केवल हस्तक्षेप करते थे, इसलिए मैंने इसे अपनी ज़रूरतों के लिए थोड़ा समायोजित किया, जिसे मुझे ज़रूरत नहीं थी।
समय के साथ, फ़ाइल बढ़ी, अतिरिक्त को सामान्य से हटा दिया गया, लापता को जोड़ा गया।
इसके निर्माण का मुख्य लक्ष्य किसी भी परियोजना के लिए जितना संभव हो उतना आधार तैयार करना था, जो कि मेरी राय में, बहुत सफलतापूर्वक भी निकला। फ़ाइल काफी सार्वभौमिक हो गई, लेकिन फिर भी, एक परियोजना तैयार करने से पहले, आपको इसे देखने और संभवतः कुछ सही करने की आवश्यकता है।

मुझे उम्मीद है कि आप अपने लिए कुछ उपयोगी पर जोर देंगे, यहां आप खुद को इसके साथ परिचित कर सकते हैं।
कस्टम reset.css

संक्षिप्त विवरण

• लेआउट से समझौता किए बिना टैग बदलने की क्षमता। जो DRY सिद्धांत से संबंधित है (- बदलाव करने के लिए आवश्यक संपादन की मात्रा को कम करना)।
  
• ब्राउज़र शैलियों की पूर्ण शून्यकरण।
  यह तथ्य कि किसी तत्व की डिफ़ॉल्ट शैलियाँ होती हैं, इसका मतलब यह बिल्कुल भी नहीं है कि उन्हें उस जगह की आवश्यकता होगी जहां यह टैग उपयोग किया जाता है।
  
• आवश्यक ब्राउज़र टुकड़ों का सामान्यीकरण।
  
• IE 10+
  
• कुछ सरल उपयोगी स्निपेट।
  
• और युक्तियाँ
  

---

ब्लॉक मॉडल परिभाषा

*, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } 

ऐसी परिभाषा से box-sizing को फिर से परिभाषित करना संभव हो जाता है, यदि आवश्यक हो, तो एक निश्चित क्षेत्र के लिए, उदाहरण के लिए, यदि एक घटक को परियोजना में जोड़ा गया था जिसमें box-sizing: content-box;

मूल सेटिंग्स

 body { margin: 0; background-color: #fff; line-height: 1; text-rendering: optimizeLegibility; text-decoration-skip: objects; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } 

• text-rendering - परिभाषित करता है कि ब्राउज़र पाठ प्रतिपादन का अनुकूलन कैसे करता है।
  optimizeLegibility - उच्च-गुणवत्ता वाला प्रदर्शन गति से अधिक महत्वपूर्ण है, कर्निंग और लिगिंग्स की अनुमति देता है।
  
• text-decoration-skip: objects;
text-decoration: underline; साथ रेखांकित करता है text-decoration: underline; अबाधित (जहां यह काम करता है)।
  
  
  
• -webkit-text-size-adjust: 100%; - iOS में ओरिएंटेशन बदलने के बाद फॉन्ट साइज एडजस्टमेंट पर रोक।
  
• -webkit-font-smoothing: antialiased; - Macs Safari में टेक्स्ट को अधिक सूक्ष्म बनाता है (एक ही समय में स्टाइल स्मूथ और क्रिस्प है, यह पढ़ने में अच्छा लगता है।)
  
• -webkit-tap-highlight-color: transparent; - उपकरणों पर क्लिक करते समय नीला हाइलाइटिंग निकालता है।
  
  
  

फोकस महत्वपूर्ण है लेकिन रूपरेखा नहीं है

 :focus { outline: none; } 

इंटरएक्टिव तत्वों के साथ बातचीत करने के लिए फोकस की स्थिति एक महत्वपूर्ण बिंदु है। ( यहाँ कैसे और क्यों)। लेकिन outline अक्सर डिजाइन में फिट नहीं होती है। और डिजाइनर खुद को शायद ही कभी इस राज्य को आकर्षित करते हैं, क्योंकि होवर शैलियों का दोहराव एक लगातार अभ्यास बन गया है।

यह एक आलसी तरीका है।

 .no-touch { &:hover, &:focus { ... } } 

सामान्य डिजाइनर हमेशा फोकस की स्थिति बनाते हैं।

तीन बुनियादी अवस्थाओं को हमेशा हर संवादात्मक तत्व ( :hover, :focus, :active ) पर मौजूद होना चाहिए।



→ कोडपेन

इंडेंट

इंडेंटेशन शून्य है, पाठ गुण विरासत में मिले हैं।

 p, dd, dl, figure, blockquote { margin: 0; } /*       <dl>.   .        (): dl>div*3>dd{value}+dt{prop} */ blockquote, q { quotes: none; } ul, ol { padding: 0; margin: 0; list-style-type: none; } table { border-collapse: collapse; border-spacing: 0; } th { font-weight: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; } audio, video { display: block; } img { display: block; border: none; /*max-width: 100%;*/ } iframe { border: none; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: inherit; } 

यदि आपको कस्टम सामग्री के लिए इंडेंट की आवश्यकता है (और उनकी आवश्यकता है), तो एक वर्ग आवरण और एक स्टाइल गाइड होना चाहिए।

एक उदाहरण:

 .description { h1, h2, h3, h4 { /* style */ } p { /* style */ } /*  . . */ } 

पाठ सामग्री को भी सही इंडेंटेशन और लाइन ऊंचाई सेट करके सही प्रकार से टाइप करने में सक्षम होना चाहिए ।

यहाँ इस विषय पर एक लेख है ।

कस्टम सामग्री क्या हो सकती है:

पाठ तत्व

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

लिंक का रंग और रेखांकन हस्तक्षेप करता है जब यह लिंक बटन के रूप में या चित्र और पाठ के साथ एक बड़े बटन के रूप में होता है।

 a { background-color: transparent; text-decoration: none; color: inherit; } abbr { border: none; text-decoration: none; } b, strong { font-weight: inherit; } i, em { font-style: inherit; } dfn { font-style: inherit; } mark { background-color: transparent; color: inherit; } small { font-size: inherit; } sub, sup { position: relative; vertical-align: baseline; font-size: inherit; line-height: 0; } sub { bottom: -.25em; } sup { top: -.5em; } 

फार्म तत्व:

बटन और इनपुट को सौंपी गई शैलियों को पूरी तरह से हटा दिया जाता है, जो किसी को विवादास्पद लग सकता है।

ऐसा होता है कि टैग बदलते समय बटन के साथ असुविधाएं होती हैं, ज्यादातर यह एक बटन के लिंक के साथ होता है और इसके विपरीत।

 button, input, optgroup, select, textarea { padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background-color: transparent; font: inherit; /*  ,  ,      */ color: inherit; letter-spacing: inherit; } button, input { overflow: visible; } button, select { text-align: left; text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { cursor: pointer; -webkit-appearance: none; } textarea { resize: none; overflow-y: auto; overflow-x: hidden; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: none; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } [type='search'] { outline: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } 

( button टैग को फ्लेक्स कंटेनर के रूप में उपयोग नहीं किया जा सकता है। iOS पर, यह टूट जाएगा।)

क्षेत्र और किंवदंती

 fieldset { padding: 0; margin: 0; border: none; } legend { display: block; padding: 0; white-space: normal; } 

अक्सर यह पाया गया कि रूपों के इन अर्थ तत्वों का उपयोग सजावटी उद्देश्यों के लिए किया गया था।

इसके लिए:



ऐसा कभी न करें , यह सबसे खराब अभ्यास का एक उदाहरण है। यहां एक सामान्य कार्यान्वयन के साथ कुछ उदाहरण दिए गए हैं:

→ उदाहरण 1 , उदाहरण 2

( fieldset टैग को फ्लेक्स कंटेनर के रूप में उपयोग नहीं किया जा सकता है। यह सिर्फ काम नहीं करता है।)

चुनना

हम चयन के मानक प्रदर्शन को रद्द करते हैं

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; } 

→ हम खुद का चयन करते हैं: कोडपेन

प्लेसहोल्डर

 ::-webkit-input-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } ::-moz-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :-moz-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :-ms-input-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :focus::-webkit-input-placeholder { opacity: 0; } :focus::-moz-placeholder { opacity: 0; } :focus:-moz-placeholder { opacity: 0; } :focus:-ms-input-placeholder { opacity: 0; } 

प्लेसहोल्डर रंग सुनेंगे। ध्यान में गायब हो जाना।

svg (प्रतीक के साथ काम)

svg टैग, हालांकि किसी भी गुण का समर्थन करने वाला एक पूर्ण टैग, मैं हमेशा इसके लिए एक आवरण का उपयोग करता हूं, जिसके लिए मैंने आकार और रंग निर्धारित किया है। 2 प्रकार के स्प्राइट्स के साथ काम करने के लिए यह दृष्टिकोण बहुत सुविधाजनक है।

मैं आपको बताता हूं कि हम आइकन के साथ कैसे काम करते हैं:

हम एक आइकन फ़ॉन्ट का उपयोग नहीं करते हैं।

हमारे पास 2 प्रकार के आइकन हैं:

- एकल रंग
- रंग (आइकन और छोटी छवियां)।

ये सभी svg फॉर्मेट में हैं।

एकल रंगों के लिए, एक svg स्प्राइट का उपयोग किया जाता है, जो अलग से संग्रहीत और कैश्ड होता है। यह इस तरह दिखता है:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="search" viewBox="0 0 24 24"> <path></path> </symbol> </svg> 

और यह इस तरह पेज पर शामिल है:

 <svg class="alert__ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use> </svg> 

और इसके लिए शैलियाँ: ( यह कोड फ़ाइल में जोड़ा गया है )

 svg { display: block; width: 100%; height: 100%; fill: currentColor; } 

रंग के लिए सीएसएस स्प्राइट का उपयोग किया जाता है:

 .icon-ico-color:after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D...; } 

और उसके लिए शैलियों:

 [class*='icon-']:after { content: ''; display: block; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; } 

सीएसएस स्प्राइट को अतुल्यकालिक रूप से लोड करना

 <script> $(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='../css/icons.min.css' />"); }) </script> 

यह निश्चित रूप से एक सरपट द्वारा उत्पन्न होता है।

यह दृष्टिकोण क्या देता है

आइकन के लिए, सही आकार का एक कंटेनर बनाया जाता है और इस बात की परवाह किए बिना कि आइकन रंग है या नहीं, यह इसमें पूरी तरह से फिट बैठता है।

 <div class="elem__ico"> <svg class="alert__ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use> </svg> </div> <div class="elem__ico icon-ico-color"></div> 

छिपा हुआ

 [hidden] { display: none; // IE10 } 

वह गुण जो वस्तु को छिपाता है। हैंडी।

: विकलांग

 :disabled, .disabled { cursor: not-allowed; } 

सही कर्सर। चूंकि लिंक एक दांतेदार बटन हो सकता है, इसलिए छद्म वर्ग अब काम नहीं करेगा, क्योंकि लिंक एक फार्म तत्व नहीं है। ऐसा करने के लिए, एक वर्ग जोड़ें।

:: - एमएस-स्पष्ट

पाठ को स्पष्ट करने के लिए IE इनपुट में छद्म तत्व।

 ::-ms-clear { display: none; } 

हम इसे हटा देते हैं।

: -वेबकिट-ऑटोफिल

 :-webkit-autofill { box-shadow: 0 0 100px #fff inset; -webkit-text-fill-color: currentColor; } 

आंतरिक छाया का उपयोग करते हुए, इस छद्म तत्व को वांछित रंग से पेंट करें। और दिए गए रंग को विरासत में मिला है।

:: चयन

 ::selection { color: #fff; background-color: #004fe4; } 

कक्षाएं

.clearfix

 .clearfix:after { content: ''; display: block; clear: both; } 

हालाँकि अब फ्लेक्स का उपयोग पूर्ण रूप से किया जा रहा है, किसी को फ़्लोट्स के बारे में नहीं भूलना चाहिए, और इससे भी अधिक फ़्लोट्स के लिए स्ट्रीम की सफाई के बारे में मत भूलना।

.visually-छिपा हुआ

 .visually-hidden { position: absolute; z-index: -1; width: 0; height: 0; padding: 0; margin: 0; border: none; overflow: hidden; } 

शब्दार्थ के लिए: जब आपको शीर्षक छिपाने की आवश्यकता होती है, जो होना चाहिए , लेकिन यह डिज़ाइन में नहीं है। इस तरह से छिपाना स्क्रीन रीडर द्वारा नजरअंदाज नहीं किया जाता है।

Tsebox / रेडियो बटन को अनुकूलित करने के लिए:



display: none; साथ छिपाएं display: none; या hidden विशेषता एक बुरा विचार है, क्योंकि इनपुट फोकस प्राप्त करने की क्षमता खो देता है, और फोकस (जैसा कि हम जानते हैं) महत्वपूर्ण है।

और यदि आप .visually-hidden क्लास का उपयोग करके छिपाते हैं, तो इनपुट फोकस प्राप्त करने की क्षमता नहीं खोता है ।

छवियों के लिए पैडिंग-बॉटम विधि (.over-pic, .contain-pic)

छवियों के साथ काम करने में, एक टैग के साथ

 <img> 

कुछ कठिनाइयाँ हैं:

• हालांकि छवि लोड नहीं हुई है, इसकी कोई ऊंचाई नहीं है, जो आमतौर पर लोडिंग के दौरान लेआउट को मरोड़ने की ओर ले जाती है।
• यदि छवि लोड नहीं होती है, तो लेआउट टूट सकता है।
• अनुचित आकार और छवियों का अनुपात।

इन समस्याओं को हल करने के लिए पेडिंग-बॉटम विधि महान है। छवि का आकार नियंत्रण एक आवरण के माध्यम से किया जाता है।

 <div class="img-wrap"> <img src="" alt=""> </div> 

लेकिन आप केवल रैपर या छवि की ऊंचाई निर्धारित नहीं कर सकते, क्योंकि जब आप पृष्ठ को क्रॉप करते हैं, तो आवश्यक अनुपात खो जाएगा।

और ऐसा नहीं होने पर, आवरण के छद्म तत्व के लिए% में पैडिंग के कारण ऊँचाई निर्धारित की जाती है ( : पहले )। जैसा कि आप जानते हैं, % में पैडिंग माता-पिता की चौड़ाई का मूल्य लेता है , ऊर्ध्वाधर या क्षैतिज मान स्वतंत्र रूप से सेट होते हैं।

(यदि किसी आइटम को फ्लेक्स करने के लिए सेट किया गया है, तो% में पैडिंग को गलत तरीके से दिमाग में प्रदर्शित किया जाता है)।

 .img-wrap { position: relative; width: 30%; } .img-wrap:before { content: ''; display: block; padding-bottom: 60%; } 

छवि को खुद को रैपर के बिल्कुल सामने रखना होगा। जब यह आवश्यक होता है कि छवि सभी स्थान (पृष्ठभूमि-आकार: कवर के समान) पर कब्जा कर ले। .Cover-pic वर्ग का उपयोग किया जाता है।

 .cover-pic, .contain-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cover-pic { object-fit: cover; } .contain-pic { object-fit: contain; } 

जब यह आवश्यक है कि छवि सभी स्थान पर कब्जा नहीं करती है (पृष्ठभूमि-आकार के समान: समाहित;)। .Contain-pic वर्ग का उपयोग किया जाता है।

परिणाम है:

• छवि रबरयुक्त है।
• इसमें आवश्यक अनुपात (डिजाइन द्वारा निर्धारित) है।
• लोड होने पर सामग्री को झटका नहीं देता है।

कमियों के बीच: object-fit IE के लिए समर्थन। क्योंकि आपको एक पॉलीफाइल का उपयोग करना होगा ।

चित्र उसी पद्धति का उपयोग करके इंस्टाग्राम में डाले जाते हैं, केवल उन्हें वांछित आकार में काट दिया जाता है और ऑब्जेक्ट-फिट गायब होने की आवश्यकता होती है।
→ उदाहरण

फुट प्रेसर

 html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; } .footer-page { margin-top: auto; } 

IE के लिए पाद दबाते समय ठीक करें। न्यूनतम ऊंचाई वाले ब्लॉक में (जो इस मामले में शरीर है), फ्लेक्स सही तरीके से काम नहीं करता है।

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { html { display: flex; flex-direction: column; } } 

ऊपर सबसे इष्टतम तरीकों में से एक है। टेबल और ग्रिड का उपयोग करके दबाने के लिए भी पाद की ऊंचाई जानने की आवश्यकता नहीं होती है, लेकिन तालिका विधि को किसी भी तरह स्वीकार नहीं किया जाता है (और थोड़ा असुविधाजनक) उपयोग करने के लिए, और ग्रिड बहुत क्रॉस-ब्राउज़र नहीं हैं।

→ कोडपेन

---

तो क्यों नहीं रीसेट या सामान्य करें? वे परियोजना को पूरी तरह से तैयार नहीं कर सकते हैं, किसी भी मामले में, उन्हें बहुत कुछ खत्म करना होगा, और इसलिए लगभग हर लेआउट डिजाइनर के पास अपने विचार हैं।

मेरे लेख को पढ़ने के लिए धन्यवाद, मुझे आशा है कि यह आपके लिए उपयोगी होगा। प्रश्न और सुझाव, विचारों और टिप्पणियों का स्वागत है।

पीएस मैं आपको लेआउट (मार्जिन / पेडिंग) में इंडेंटेशन के प्रकाशन संगठन को पढ़ने की सलाह देता हूं। और मैं आपको सीएसएस लिंटर का उपयोग करने की सलाह देता हूं। और कौन परवाह करता है, सीएसएस पहेली को हल कर सकता है।