सीएसएस की स्थिति

वार्षिक सर्वेक्षण में, द स्टेट ऑफ जावास्क्रिप्ट , डेवलपर्स के बारे में बात करते हैं कि वे यहां और अब क्या उपयोग करते हैं। सामने वाले समुदाय के प्रश्न और परिचित हैं। 2019 में, पोल " सीएसएस की स्थिति " दिखाई दी, जिसने डेवलपर्स को एक मूर्खता में पेश किया। यह पता चला है कि कई प्रौद्योगिकियां डेवलपर्स से परिचित नहीं हैं, हालांकि उनमें से ज्यादातर पहले से ही सक्रिय रूप से उपयोग किए जाते हैं। शायद डेवलपर्स सामान्य उपकरण और प्रौद्योगिकियों का उपयोग करते हैं, और कुछ नया लागू करने की तलाश नहीं करते हैं? शायद नई तकनीकों के लिए कोई काम नहीं है? सीएसएस ग्रिड, सीएसएस मल्टी कॉलम का उपयोग क्यों करें, जहां फ्लेक्सबॉक्स पर सब कुछ बनाना आसान है? शायद यह सभी पुराने लोगों के बारे में है, और जो लोग फ्लेक्सबॉक्स और फ्लोट के बारे में भी नहीं जानते हैं और चुनाव में भाग नहीं लेते हैं?



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

सावधानी, कट के तहत बहुत सारे चित्र और चित्र, वास्तव में बहुत, लेकिन वे सभी मामले के बारे में हैं। अच्छी गुणवत्ता में, वे यहाँ हैं ।


"जावास्क्रिप्ट राज्य" सर्वेक्षण इस तरह दिखता है।



आप पिछले वर्ष के परिणाम खोल सकते हैं और देख सकते हैं - क्या उपयोग किया जाता है, क्या लोकप्रिय है, क्या नहीं है, और क्या केवल अलोकप्रिय लगता है।

नए सर्वेक्षण "सीएसएस की स्थिति" में बुनियादी, बुनियादी चीजें शामिल हैं, लेकिन मैंने उन लोगों से बहुत सारे सवाल देखे जो इसके माध्यम से गए थे:

- यह क्या है? यह क्या है? और मुझे इस बारे में पता नहीं है।

यह पता चला कि CSS में मूल अवधारणाएं खराब हैं।

मैं इस बारे में जानकारी एकत्र करना चाहता था कि आश्चर्य की बात क्या है और सीएसएस आज क्या है और यह किस स्थिति में है। हम उसे फिर से जान पाएंगे, ताकि 2020 के सर्वेक्षण में कम आश्चर्य हो।

"सीएसएस की स्थिति" सर्दियों में लॉन्च की गई थी। सर्वेक्षण ने मुझे दिलचस्पी दी, लेकिन मुझे वैश्विक पहुंच से सभी जानकारी एकत्र करने का अवसर नहीं मिला। इसलिए, प्रचार के मद्देनजर, मैंने सामाजिक नेटवर्क के माध्यम से अपना विकल्प खोजा।



उसने लगभग पूरी तरह से स्टेट ऑफ़ सीएसएस की नकल की। 110 उत्तरदाताओं ने जवाब दिया और यह परिणाम मिला।



सुविधाओं द्वारा यह वितरण: हरा - मैं उपयोग करता हूं, लाल - मुझे नहीं पता, पीला - मुझे पता है, लेकिन मैं उपयोग नहीं करता हूं। 23 मई को, मैंने मूल "सीएसएस की स्थिति" लॉन्च करने वाली टीम के लिए एक प्रश्न लिखा और परिणामों के लिए कहा। सौभाग्य से, उन्होंने मुझे जवाब दिया और मुझे भेजा जो मुझे चाहिए था।

मैंने इस डेटा को शामिल किया। काम की मात्रा बड़ी थी, क्योंकि परिणाम YAML फ़ाइलों को पार्स नहीं किया गया है। रातों की नींद हराम करने वाला एक जोड़ा - और रिपोर्ट तैयार है, जिसे कई खंडों में विभाजित किया गया है।

• खासियत है।
• उपकरण जो सीएसएस लिखने और उपयोग करने के लिए उपयोग किए जाते हैं।
• पर्यावरण: ब्राउज़र और लेखन और परीक्षण के लिए उपकरण।
• संसाधन जिसके माध्यम से लोग सीखते हैं।
• ऐसा करने वाले लोगों से सीएसएस के बारे में मज़ेदार राय।
• जनसांख्यिकीय डेटा सबसे तकनीकी परत नहीं है।

सीएसएस सुविधाएँ

सुविधाओं को बड़ी संख्या में उप-वर्गों में विभाजित किया गया है। मैंने सबसे महत्वपूर्ण चुना जो हम हर दिन उपयोग करते हैं।

सीएसएस स्थिति "सीएसएस की स्थिति" प्रश्नों में भी ध्यान देने योग्य है। सर्वेक्षण फ्लेक्सबॉक्स, सीएसएस ग्रिड, सीएसएस मल्टी कॉलम, लेखन मोड और अपवादों के बारे में पूछता है। वह सब है! और कुछ नहीं। फ्लोट और मेशिंग के बारे में कोई सवाल नहीं।

फ्लोट कहां है फ्लोट का उपयोग अपने इच्छित उद्देश्य के लिए किया जाता है - पाठ को चित्रों के साथ लपेटने के लिए। प्रौद्योगिकी मूल रूप से मेशिंग के लिए नहीं बनाई गई थी। इस कोडर्स ने फ्लोट को अपने लिए अनुकूलित किया।



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

तो, आइए सीएसएस के वास्तविक आंकड़ों को देखें, जिसमें 11,000 डेवलपर्स को चुना गया था।

flexbox

94% द्वारा उपयोग किया गया, 4% सुना और 1% डेवलपर्स द्वारा नहीं सुना गया।

किस अवधि के अनुभव के लोग इस या उस तकनीक का उपयोग करते हैं, इसके आँकड़े मज़ेदार हैं। एक वर्ष से कम अनुभव वाले लोग फ्लेक्सबॉक्स का उपयोग हर किसी से कम करते हैं। शायद प्रचार के मद्देनजर वे ग्रिड पर सब कुछ कर रहे हैं।



समर्थन महान है। मैं इंटरनेट एक्सप्लोरर पर ध्यान केंद्रित नहीं करूंगा। हम सभी जानते हैं कि इसके लिए लेआउट कैसे करना है, खासकर फ्लेक्सबॉक्स से निपटने के लिए।

सीएसएस ग्रिड

ग्रिड के साथ, सब कुछ दिलचस्प है। केवल 2% लोग इसके बारे में नहीं जानते हैं, लेकिन 55% लोग इसका उपयोग करते हैं। उत्तरदाताओं का लगभग आधा - 43% - अभी भी किसी कारण के लिए ग्रिड का उपयोग नहीं करते हैं।



वितरण से पता चलता है कि विभिन्न अनुभवों वाले लोगों के बीच कोई अंतर नहीं है। इस मामले में अनुभव प्रौद्योगिकी के उपयोग को प्रभावित नहीं करता है।

अब ग्रिड का उपयोग किया जा सकता है और इसका उपयोग साइट के वैश्विक लेआउट के लिए किया जाना चाहिए, जटिल ग्रिड और घटकों के लिए एक संपत्ति के साथ लेआउट बदलना। कार्य के लिए कुछ अभिन्न बनाने के लिए: संपूर्ण ग्रिड या जटिल, एक बहुत ही बढ़िया वितरण ग्रिड के साथ एक छोटा तत्व बनाने के लिए, ग्रिड का उपयोग करें।



ग्रिड का बड़ा समर्थन है। IE के लिए समर्थन है। चरम मामलों में, आप पॉलीफिल का उपयोग कर सकते हैं - लेकिन बेहतर नहीं।

सीएसएस मल्टी कॉलम

28% का उपयोग करें। मल्टी-स्पीकर के साथ यह दिलचस्प है - 41% ने उनके बारे में प्रौद्योगिकी के रूप में नहीं सुना, जो अजीब है। तकनीक यथासंभव सरल है और आपको अतिरिक्त आवरण और बैसाखी के बिना पाठ कॉलम बनाने की अनुमति देता है। बस कॉलम की संख्या निर्धारित करें।

article { column-count: 2; } 

पाठ को स्तंभों में व्यवस्थित किया गया है और स्वचालित रूप से अगली पंक्ति में लपेटता है।



कई लचीली सेटिंग्स हैं। उदाहरण के लिए, स्तंभ का आकार निर्धारित करने के लिए।

 article { column-width: 150px; } 

तब पाठ कॉलम की निर्दिष्ट संख्या के अनुसार पंक्तिबद्ध नहीं होगा, लेकिन उनमें से कई स्क्रीन के अंत तक फिट होंगे। जब स्क्रीन कम हो जाती है, तो सब कुछ स्वचालित रूप से फिर से बनाया जाता है।



प्रौद्योगिकी का उपयोग करें और जानें। उदाहरण के लिए, पाठ के दो स्तंभों के लिए, उन्हें एक div में लपेटने के बजाय, फिर Flexbox या ग्रिड का उपयोग करें।

आप रेखाएँ खींच सकते हैं।

 article { columns: 2 200px; column-gap: 20px; column-rule: 1px dotted #000; } 

आप हेडर के साथ कॉलम तोड़ सकते हैं:

 h2 { column-span: all; } 

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

ग्राफ से पता चलता है कि अधिक अनुभव, अधिक सक्रिय रूप से बहुरंगी का उपयोग किया जाता है।



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



वक्ताओं का अच्छा समर्थन है, लेकिन जाम के बिना नहीं। एक ब्राउज़र में, ठीक है, दूसरे में नहीं। लेकिन प्रतिबंधों के अधीन लगभग 98%, अच्छा समर्थन है। ग्रिड से अधिक।

लेखन मोड

सीएसएस लेखन मोड । लगभग किसी ने इस तकनीक के बारे में नहीं सुना - 73% उत्तरदाताओं, और केवल 17% इसका उपयोग करते हैं।

4 लेखन प्रणाली हैं। उन्हें पात्रों को लंबवत और क्षैतिज रूप से लिखने और पढ़ने की दिशा की विशेषता है। यह एक जटिल विषय है, इसलिए केवल चित्र दिखाएं।

लैटिन आधारित एक मानक प्रणाली है: बाएं से दाएं और ऊपर से नीचे तक पढ़ा जाता है।



अरबी आधारित - दाएं से बाएं और ऊपर से नीचे।



हान आधारित एक एशियाई समूह है, यह अलग हो सकता है।



मंगोलियाई आधारित - मंगोलियाई प्रणाली। यह पढ़ने में कठिन है क्योंकि यह असामान्य है। सौभाग्य से, इससे निपटने के लिए अक्सर आवश्यक नहीं होता है।



केवल इंटरफ़ेस को किसी अन्य भाषा में अनुवाद करने के लिए पर्याप्त नहीं है - एक YAML या JSON फ़ाइल बनाने के लिए जो दो भाषाओं में जानकारी संग्रहीत करेगी। सबसे अधिक संभावना है, आपको सब कुछ खत्म करना होगा। लेकिन मैं उस बारे में बात नहीं कर रहा हूं।

 html { writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; writing-mode: sideways-rl; writing-mode: sideways-lr; } 

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



पत्र भेजने के अधिक महान उदाहरण।



शांत इंटरफेस!



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

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



वितरण से पता चलता है कि अधिक अनुभव, वितरण मोड का उपयोग करने की अधिक संभावना है। हालांकि, उपयोग करने वालों का प्रतिशत बहुत कम है। इसलिए नहीं कि प्रौद्योगिकी खराब है या डेवलपर उपयोग नहीं करना चाहता है - कुछ मामले हैं। यह कोई दैनिक कार्य नहीं है। हालाँकि, आवेदन करें।

समर्थन के साथ, सब कुछ ठीक है।



सीएसएस बहिष्करण। इस तकनीक के बारे में लगभग किसी ने नहीं सुना - 79%, और केवल 7% ही इसका उपयोग करते हैं। मैंने एक प्रशंसक समीक्षा में सीएसएस बहिष्करण को शामिल किया। यह IE के लिए एक विशेष तकनीक है। एज उसे अपने पास खींच लिया, जाहिरा तौर पर विरासत द्वारा। नया एज होने की संभावना है।



यह एक शांत तकनीक है, लेकिन किसी कारण से इसे IE के अलावा वितरण नहीं मिला है। यह एक तत्व के चारों ओर प्रवाह को समायोजित करने का एक आसान तरीका है जो धारा के बाहर है। पूर्ण, सापेक्ष या निश्चित स्थिति का उपयोग करके सामग्री के शीर्ष पर शीर्ष परत रखें।

उदाहरण के लिए, पाठ और घन लें। यदि आप wrap-flow: both लागू करते हैं wrap-flow: both गुण, तो दोनों तरफ पाठ क्यूब के चारों ओर प्रवाहित होगा।


यह केवल एक तत्व नहीं है जो सामग्री में डाला गया है - यह एक ऐसा तत्व है जो पूर्ण स्थिति के साथ शीर्ष पर तैनात है। यह IE में काम करता है।



मैंने बहिष्करण को केवल इसलिए निकाल दिया क्योंकि आप सबसे अधिक संभावना उनका उपयोग नहीं करेंगे। यद्यपि यह संभव है यदि आप IE के तहत स्थापित कर रहे हैं।

आरेख से पता चलता है कि इन तकनीकों का उपयोग कैसे किया जाना चाहिए।

फ्लेक्सबॉक्स नींव है।

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

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

एनिमेशन और रूपांतरण

सीएसएस संक्रमण - सुचारू रूप से बदलते गुण। 95% का उपयोग करें, 4% को सुना और 1% को नहीं सुना। CSS ट्रांसफ़ॉर्म - घुमाव, ऊपर-नीचे की शिफ्ट, स्प्रेड, 3D-ट्रांसफ़ॉर्मेशन - समान प्रतिशत। सीएसएस एनिमेशन - 90% का उपयोग करें, और 9% सुना। थोड़ा और जटिल - कीफ्रेम, इंटरैक्टिव - कम का उपयोग करें।

यह सब करने के लिए CSS विल चेंज लागू किया जाता है । इस तकनीक के साथ पहले से ही अधिक कठिन है। ऐसा लगता है कि हर कोई एनिमेशन जानता है, लेकिन किसी ने इसके बारे में नहीं सुना - 58%।

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

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

 div { will-change: scroll-position; will-change: transfrom; } 

इससे आप अपनी साइट पर विशिष्ट अनुकूलन जोड़ सकते हैं। लेकिन तकनीक में समस्याएं हैं।

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

प्रत्येक आइटम पर दांव न लगाएं । तत्व बदलने से पहले CSS विल चेंज करने की कोशिश करें और बाद में हटा दें। आदर्श रूप से, जटिल एनीमेशन से पहले एक ब्राउज़र स्क्रिप्ट तैयार करें। एनीमेशन शुरू करने से पहले, CSS विल चेंज करें, एनीमेशन के बाद - हटा दें। यह संभवतः प्रौद्योगिकी का सबसे अच्छा उपयोग संभव है। आप इसे केवल एक तारांकन चिह्न के साथ संलग्न कर सकते हैं: सीएसएस विल चेंज ऑल - एंड दैट ऑल!, लेकिन यह बेहतर नहीं है।



शेड्यूल मजेदार है। मैं इसे इस तरह से कल्पना करता हूं: जिन लोगों के पास 5 से 10 साल का अनुभव है वे कहते हैं: "हाँ, सीएसएस यहाँ बदल जाएगा, तारांकन के तहत!" और फिर थोड़ी देर बाद यह कम हो जाता है और तकनीक का अधिक संयम से उपयोग किया जाता है।



IE, ब्लैकबेरी, ओपेरा मिनी सीएसएस विल चेंज का समर्थन नहीं करते हैं, लेकिन बाकी सभी चीजों के लिए इसका इस्तेमाल किया जा सकता है।

फोंट

मैं फॉन्ट-फेस और इसके समर्थन के बारे में बात नहीं करूंगा - यह हर कोई जानता है।

चर फोंट

चर फोंट एक समस्या है। लगभग आधे डेवलपर्स - 44% - ने उनके बारे में सुना है, लेकिन केवल 26% ही इसका उपयोग करते हैं। फ़ॉन्ट्स अभी भी मसौदा प्रारूप की स्थिति में हैं, लेकिन उनके पास अच्छा समर्थन है।

चर फोंट अनंत शैलियों के साथ सिर्फ एक फॉन्ट का उपयोग करने की क्षमता है।

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

तकनीक परिचित फोंट को बदलने के लिए डिज़ाइन की गई है। शायद आपके असेंबली में फॉन्ट-चेहरों के झुंड के साथ प्रीप्रोसेसरों में से एक की फाइल थी जिसे बदला जा सकता था। निश्चित रूप से आपने चक्र जोड़े और सब कुछ एक चक्र के साथ बनाया।

उपयोग का प्रतिशत समतल है। तकनीक ताज़ा है, इसलिए शुरुआती लोग भी वेरिएबल फोंट के बारे में जानते हैं और इसका इस्तेमाल करने की कोशिश करते हैं।



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

प्रारंभिक पत्र

अजीब बात है, लेकिन 29% लोग प्रारंभिक पत्र का उपयोग करते हैं, और 35% ने इसके बारे में सुना है। मेरे नमूने में, प्रतिशत भिन्न हैं: वे 20% का उपयोग करते हैं, उन्होंने 41% सुना, उन्होंने 39% नहीं सुना।

जब मैंने अपने नंबरों को आवाज़ दी, तो उन्होंने मुझ पर विश्वास नहीं किया कि 20% लोग प्रौद्योगिकी का उपयोग करते हैं। हालांकि यह सरल है और आपको दो गुणों के साथ प्रारंभिक पत्र सेट करने की अनुमति देता है।

 p { initial-letter: size position; } 

यहां आकार चरित्र की पंक्तियों की संख्या है, और स्थिति वह रेखा है जो शुरू होती है।



एक और विकल्प।



ऐसे कार्य दुर्लभ हैं, लेकिन यह स्थिति या नवोदित नहीं है। इस तकनीक के साथ एक समस्या यह है कि मैं इसका उपयोग करने वाले 20% लोगों में से किसी को भी नहीं जानता। यह सफारी में केवल उपसर्ग के रूप में मामूली प्रतिबंधों के साथ समर्थित है, यहां तक ​​कि मोबाइल संस्करणों में भी। यह सफारी के लिए एक विशेष हत्यारा सुविधा है।

आकृतियाँ और ग्राफिक्स

फिर वह सारी सुंदरता आती है जिसके बारे में मैंने एक बार रिपोर्ट दी थी और जो किसी पर लागू नहीं हुई।

सीएसएस आकार

सीएसएस आकार बहुत कम उपयोग करते हैं - केवल 22%, हालांकि तकनीक का अच्छा समर्थन है।



सामान्य तौर पर, इस "सौंदर्य" खंड में सभी प्रौद्योगिकियां लगभग समान हैं। रूपों की मदद से, आप शांत चीजें बना सकते हैं।

 img { shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%); } 

मैंने एक बार कहा था कि वेब में पत्रकारिता का अभाव है। एक समय में, हमने इंटरफेस के बार स्तर को कम कर दिया। वे सभी समान हो गए, मानक लेआउट दिखाई दिए, और बूटस्ट्रैप, जो एक बटन के साथ लेआउट बनाता है। और कोई जादू नहीं है।

वस्तु फिट

आश्चर्यजनक रूप से, 37% ने ऑब्जेक्ट फिट के बारे में नहीं सुना है। हालांकि, लगभग हर कोई जिसने सुना है वह इसका उपयोग कर रहा है, जो कि 42% है। तकनीक का अच्छा समर्थन है।

ऑब्जेक्ट फिट इनलाइन छवियों के लिए एक पृष्ठभूमि-कवर है।

 img { object-fit: cover; } 

एक छवि बनाएं, उसकी ऑब्जेक्ट-फिट संपत्ति सेट करें, और चित्र अंदर व्यवहार करता है जैसे कि उसकी पृष्ठभूमि संपत्ति थी।

क्लिप पथ

39% द्वारा उपयोग किया गया, और 40% सुना। क्लिप पथ में सीमाओं का एक समूह है।



प्रौद्योगिकी आपको सुंदरता जोड़ने की अनुमति देती है। यह इंगित करता है कि छवि का कौन सा हिस्सा दिखाई देगा।



किसी साइट पर एक निश्चित आकार की तस्वीर प्रदर्शित करने के दो तरीके हैं: तस्वीर को संपादक में काटें या चित्र पर साइट के शीर्ष पर एक आकृति पेस्ट करें। फिर कोई भी चित्र आकृति का रूप ले लेगा। तो क्लिप पथ करता है। यह अधिक सुविधाजनक है।

सीएसएस मास्क

26% का उपयोग करें, लेकिन 28% नहीं सुना। मास्क क्लिप पथ के समान हैं। लगभग समान संपत्ति।

सारांश

मैं दो विवरणों पर ध्यान केंद्रित करना चाहता हूं।

केवल 37% लोग ऑब्जेक्ट फिट के बारे में जानते हैं , हालांकि यह सूचीबद्ध सबसे समर्थित तकनीक है। यह सबसे अधिक बार काम में आ सकता है। उदाहरण के लिए, आप एक आयत में एक चित्र एम्बेड करना चाहते हैं। लेआउट डिजाइनर शैली, पृष्ठभूमि छवि, पृष्ठभूमि कवर - हॉरर का उपयोग करता है। सरल समस्याओं को हल करना क्यों मुश्किल है? कोई ज़रूरत नहीं है - ऑब्जेक्ट फिट के साथ सब कुछ सुंदर और सरल है। यह अफ़सोस की बात है कि प्रस्तुत की गई यह सबसे अज्ञात तकनीक है, हालाँकि इसकी ज़रूरत हर दिन पड़ सकती है।

प्रौद्योगिकी की लोकप्रियता इसके उपयोग की गारंटी नहीं देती है।

शायद डिजाइनर जटिल कार्यों को नहीं करते हैं । यदि आप इंटरफ़ेस लेआउट में तीन कॉलम हैं, तो आप इस सभी सामग्री का उपयोग नहीं कर सकते।

फ्रंट-एंड निविदाएं सरल कार्यों को मुश्किल से हल करती हैं।

उदाहरण के लिए, एक त्रिकोणीय चित्र बनाने के लिए, संपादक में छवि को त्रिकोण में डाला जाता है। और इसलिए हर बार, बार-बार। यद्यपि समस्या उसी आकृति द्वारा हल की जाती है।

हां, IE प्रौद्योगिकियों में गिरावट आएगी, लेकिन प्रगतिशील सुधार के सिद्धांत से, वे कहीं काम करेंगे। यदि IE रूपों का समर्थन नहीं करता है, तो इसके लिए चित्र वर्ग क्यों नहीं सेट करें।

अन्तरक्रियाशीलता

स्क्रॉल स्नैप स्क्रॉल व्यवहार को नियंत्रित करता है। केवल 12% ने इसका उपयोग किया है, और 48% ने इसे सुना है।

 scroll-snap-type scroll-padding scroll-snap-align 

यह एक दिलचस्प तकनीक है। उदाहरण के लिए, क्षैतिज स्क्रॉलिंग है। जब हम सामग्री पर स्क्रॉल करते हैं, तो वह उस स्थान पर रुक जाता है जिसे हम स्क्रॉल करते हैं। स्क्रॉल स्नैप का उपयोग करते हुए, पृष्ठ स्वचालित रूप से उस तत्व की सीमा तक स्क्रॉल करेगा, जिस पर वह बंद हो गया, चाहे वह कितना भी लंबा हो।

 .container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; } 

क्षैतिज केंद्र संरेखण भी काम करता है।

 .container { scroll-snap-type: x mandatory; scroll-padding: 50%; } .child { scroll-snap-align: center; } 

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



तकनीक का उपयोग करने के बारे में सोचने के लिए अच्छा समर्थन है। यह हर जगह जोड़ने लायक नहीं है, लेकिन यह कहीं न कहीं काम करेगा।

ओवरक्रॉफ्ट व्यवहार। यह एक शांत तकनीक है जिसके बारे में केवल 21% उत्तरदाताओं को पता है। 20% भी कम उपयोग करें।

यदि आप मोडल विंडो के अंदर स्क्रॉल करते हैं, तो पृष्ठभूमि में जो कुछ भी है वह स्थिर होना चाहिए। कभी-कभी मोडल विंडो को नीचे लोड किया जाता है, एक अवरोधन होता है और स्क्रॉल बाहर निकल जाता है।



ओवरसीकॉल बिहेवियर का इस्तेमाल करते समय ऐसा नहीं होगा।

 .container { overscroll-bahavior: none; } 

यह न केवल मोडल विंडो पर लागू होता है, बल्कि इंटरफेस के अंदर स्क्रॉल करने के लिए भी होता है।

अतिप्रवाह लंगर एक और संपत्ति है जो स्क्रॉलिंग को रोकता है जब तक कि डोम पेड़ पूरी तरह से लोड और गाया नहीं जाता है। एक स्थिति की कल्पना करें: आपने एक साइट अपलोड की है जो इस तरह दिखती है।



गुलाबी ब्लॉक में एक तस्वीर है, लेकिन यह लोड नहीं हुआ। जावास्क्रिप्ट लोड किया गया और लंगर ने एक विशिष्ट तत्व के लिए काम किया। जब चित्र लोड किया जाता है, तो तत्व नीचे गिर जाएगा, लेकिन एक ही समय में स्क्रॉल उसी स्थान पर रहेगा। यह मानक व्यवहार है।



एंकर संपत्ति आपको तत्व पर तय करने की अनुमति देती है। यदि देखने के दौरान ऊपर से कुछ लोड किया जाता है तो पृष्ठ चिकोटी नहीं देता है।

 body { overflow-anchor: auto | none; } 

एंकर मोबाइल उपकरणों के लिए महान है। जब आप किसी समाचार साइट पर जाते हैं, तो एक लेख पढ़ते हैं, और ऊपर से विज्ञापन लोड होता है, पाठ कूदता है - क्या आपको लगता है कि क्या हो रहा है?

इसे शरीर और अन्य तत्वों पर लागू किया जा सकता है।

अन्य

सीएसएस चर। 60%, सुना 35% का उपयोग करें। किसी भी डायनासोर के अलावा महान समर्थन।



उपयोग का प्रतिशत बराबर है, लेकिन शुरुआती इसके पक्ष में नहीं हैं - उनके पास पहले से ही पर्याप्त समस्याएं हैं।



का समर्थन करता है । 37%, 36% सुना और 27% नहीं सुना। समर्थन के साथ केवल एक समस्या है - यह IE में समर्थित नहीं है। जहां उसकी सबसे ज्यादा जरूरत है, वह नहीं है।



सीएसएस सपोर्ट आपको फ्लेक्सबॉक्स पर सीएसएस ग्रिड के साथ महान कमियां बनाने में मदद करता है। मैं केवल CSS ग्रिड का उपयोग करता हूं और इसका उपयोग करता हूं।

फिर से, पुराने डेवलपर, जितना अधिक वह तकनीक का उपयोग करता है क्योंकि वह इसकी शीतलता और महत्व को समझता है।



कैल्क । यहां सब कुछ सरल है: यह हर जगह काम करता है और अच्छी तरह से जाना जाता है - 86% लोकप्रियता।

सिर में अवरोधों को छोड़कर, ऊपर दी गई लगभग सभी विशेषताओं के उपयोग को कुछ भी नहीं रोकता है। उनका उपयोग और अब किया जाना चाहिए।

अपवादों और प्रारंभिक पत्र को छोड़कर, क्योंकि वे केवल सफारी के लिए हैं।

यदि कुछ समर्थित नहीं है, तो फॉलबैक, समर्थन या पॉलीफ़ाइल्स का उपयोग करें, लेकिन शायद ही कभी। उन प्लगइन्स का उपयोग करें जो एक को दूसरे में चलाते हैं।

उपकरण

हम सबसे दिलचस्प से गुजरते हैं।

बूटस्ट्रैप । अजीब वितरण - शिविर को समान रूप से उन लोगों में विभाजित किया गया था जो उपयोग करते हैं और जो नहीं करते हैं। यह मजेदार है कि बूटस्ट्रैप का एक प्रतिशत दिलचस्प है, लेकिन इसका उपयोग नहीं करता है। अभी भी 11 प्रतिशत लोग रुचि रखते हैं। व्यक्तिगत रूप से, मैं बूटस्ट्रैप का पक्ष नहीं लेता।



BEM । यह अजीब है कि सूचना क्षेत्र में लोग किसी भी तकनीक के बारे में नहीं जानते हैं। सर्वेक्षण में अमेरिका और यूरोप पर अधिक ध्यान केंद्रित किया गया है, हो सकता है कि वे बीईएम के बारे में नहीं जानते हों या कुछ बेहतर उपयोग करें - परमाणु सीएसएस।



परमाणु सीएसएस एक दिलचस्प तकनीक है, लेकिन मैं इसका उपयोग नहीं करता हूं।

preprocessors

यह हास्यास्पद है कि कार्यप्रणाली में मुफ्त उत्तर विकल्प थे और दो लोगों ने शैडो डोम को एक पद्धति के रूप में चिह्नित किया। मुझे समझ नहीं आता कि उनके मन में क्या था। वितरण के संदर्भ में, SASS अभी भी पहले स्थान पर है, क्योंकि यह 9 साल पहले था जब मैंने पेशे में प्रवेश किया था। स्थिरता।

ऑटोप्रिफ़िशर - 64 लोग, पग - 7 लोग, और गल्प - 3 लोग भी प्रीप्रोसेसर के रूप में जाने गए।

किसी ने एक मुक्त उत्तर में एक आंसू भरा अनुरोध लिखा।

- सीएसएस को सुविधाओं को लागू करने और प्रोसेसर की आवश्यकता को हटाने की आवश्यकता है।

यह प्रीप्रोसेसरों से छुटकारा पाने और सीएसएस में ही सभी सुविधाओं को लागू करने का अनुरोध है, जो अब हो रहा है।

पसंद खत्म हो गई थी और मैं बहुत गुस्से में था - कोई विकल्प नहीं है "मैं प्रीप्रोसेसरों का उपयोग नहीं करता।" क्या कोई है जो उन्हें छोड़ दिया?

पर्यावरण

ब्राउज़र। मुझे आंकड़ों पर संदेह है, क्योंकि 100% लोग Google Chrome के विकास का उपयोग करते हैं। काउंटर भी टूट गया - यह 101% था।



मैंने विशेष रूप से ओपेरा और IE <11 को यहां जोड़ा क्योंकि 11% और 7% लोग अभी भी उनसे पीड़ित हैं।

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



डिवाइस। सभी को डेस्कटॉप के नीचे टाइप करना पड़ता है, मोबाइल के लिए थोड़ा कम और टैबलेट के लिए भी कम। अब यह स्पष्ट नहीं है कि टैबलेट कहां है और फोन कहां है। क्या iPhone XS टैबलेट या फोन है?



स्क्रीन पाठकों में केवल 13% लोग लेआउट का परीक्षण करते हैं, यह बुरा है। टीवी के तहत तीन प्रकार और एक समय में - घड़ी और कंसोल के नीचे। जाहिर है, यह एक और एक ही व्यक्ति है। मैंने प्रतिशत निर्धारित नहीं किया, लेकिन इसके विपरीत लोगों की संख्या, हालांकि अनुसूची के दृष्टिकोण से यह सच नहीं है।

साधन

ब्लॉग। यह उन सभी चीज़ों को सूचीबद्ध करता है जिन्हें मैंने व्यक्तिगत रूप से अध्ययन किया है, सिवाय SitePoint



पाठ्यक्रम। ज्यादातर स्टैक ओवरफ्लो से सीखते हैं, जो अच्छा है। दुर्भाग्य से, हमारे प्रतिनिधि अनुपस्थित हैं। विकल्प चार्ट पर क्या था, और खेतों में अपना खुद का विकल्प लिखना संभव नहीं था।

मैंने विशेष रूप से प्रकाश डाला कि 18 लोग पाठ्यक्रम के रूप में सीएसएस विशिष्टताओं का उपयोग करते हैं। पुराना स्कूल।

राय

सीखना आसान है । लीजेंड:

• 0 नहीं है;
• 1 - बल्कि नहीं;
• 2 - न तो हां और न ही - मुझे नहीं पता;
• 3 - बल्कि हाँ;
• 4 - हाँ।

डेवलपर्स का अनुभव जितना अधिक होगा, उतना ही वे सहमत होंगे कि सीएसएस सीखना आसान है।

विकास की गति । 11% सीएसएस विकास की गति के सवाल का जवाब "बुरा" है।



उपयोगिता वर्ग । यदि आपको नहीं पता कि यह क्या है, तो विचार करें कि एटॉमिक सीएसएस या बूटस्ट्रैप में बाएं / दाएं उपकरण उपयोगितावादी वर्ग हैं।



घोंसला बनाना । यह अनुसूची मुझे प्रभावित करती है। नेस्टिंग इनपुट के लिए अधिकांश लोग नेस्टिंग हैं, और मैं स्पष्ट रूप से इसके खिलाफ हूं। लेकिन भले ही मैं इसके खिलाफ हूं, लेकिन मैं शेड्यूल दिखाऊंगा। मैं निष्पक्ष हूं - जो कुछ भी आप अपने जोखिम और जोखिम पर चाहते हैं उसका उपयोग करें!



सीएसएस - हां? 14% लोगों को यकीन है कि वे एक प्रोग्रामिंग भाषा में लिखते हैं।



आनंद। ज्यादातर लोग अपने काम का आनंद लेते हैं, जो अच्छा है। हम दुर्भाग्यपूर्ण 4% के साथ सहानुभूति रखेंगे। उनके लिए, सीएसएस एक दर्द है। शायद ये वे हैं जो ओपेरा मिनी और घड़ियों के लिए बनाते हैं।

खोई हुई तकनीक

लोग खोई हुई तकनीकों के रूप में तीन को चिह्नित करते हैं। पहला है पेरेंट सिलेक्टर्स। ये CSS छद्म चयनकर्ता हैं जो आपको मूल तत्व को प्रभावित करने की अनुमति देते हैं, जो इस बात पर निर्भर करता है कि कुछ शर्तों के साथ इसके भीतर बच्चे हैं या नहीं। यहां मैं सहमत हूं। — Houdini, - . — Mixins . , CSS .

. , — .



. 5% CSS : , .

. .



20 ? 20 CSS ? , 2020 …

, . Saint TeamLead Conf 2019 « ?» : , , , .

— 13 14 FrontendConf 2019 Digital October. CSS, JS, , , - — . , . , - — 30 . FrontendConf 2019!