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

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

दूसरी ओर, कई ने पुराने दिनों में केवल वेब डिज़ाइन को थोड़ा सा आज़माया है और मानते हैं कि तब से कुछ भी नहीं बदला है।

यह लेख सभी के लिए है। जैसा कि मुझे याद है, सीएसएस और वेब डिज़ाइन का इतिहास।

(कृपया ध्यान रखें कि इस लेख में स्मृतियों और शोधों को बारीकी से जोड़ा गया है। इसलिए, मैं यह गारंटी नहीं दे सकता कि सब कुछ वास्तव में सही रूप से निर्धारित किया गया है, विशेष रूप से कार्य-कारण के बारे में। आप W3C से आधिकारिक CSS इतिहास पढ़ सकते हैं , जो बहुत छोटा, बेहतर है। वास्तविकता और इसमें बहुत कम शाप होते हैं)।

(इसके अलावा, लेख को और अधिक चित्रों से बहुत लाभ होगा, लेकिन सिर्फ पाठ लिखने से मुझे बहुत अधिक समय लगा)।

पहले दिन

शुरुआत में कोई सीएसएस नहीं था।

यह बहुत बुरा था।

युग की मेरी पसंदीदा कलाकृति ओ'रिली की पुस्तक है, जिसका मैंने HTML: द डेफिनिटिव गाइड का अध्ययन किया है । इस गाइड के कई संस्करणों को मध्य और 90 के दशक के मध्य में प्रकाशित किया गया था। पुस्तक वास्तव में केवल HTML के बारे में बात करती है, बिना किसी सीएसएस के उल्लेख के। मेरे पास यह अब नहीं है और इंटरनेट पर स्कैन नहीं मिल रहा है, लेकिन इस पुस्तक के नए संस्करण HTML और XHTML: द डेफिनिटिव गाइड (हम बाद में XHTML के बारे में बात करेंगे) का एक पृष्ठ है। यहाँ अत्याधुनिक 90s वेब डिजाइन के लिए सुझाव दिए गए हैं:

"हेडर और पाद को क्षैतिज रेखाओं से स्पष्ट रूप से हाइलाइट करें।"

नहीं, यह नहीं हैborder-top। वह<hr>। पृष्ठ का शीर्षक लगभग निश्चित रूप से केंद्रित है<center>।

पृष्ठ में एक मानक पृष्ठभूमि, फ़ॉन्ट और पाठ रंग है। आंशिक रूप से क्योंकि यह मार्गदर्शिका पहले प्रारंभिक अवधारणाओं का परिचय देती है; आंशिक रूप से क्योंकि यह एक श्वेत और श्याम पुस्तक है, और आंशिक रूप से क्योंकि यह वास्तविकता को प्रतिबिंबित करता है - एक पृष्ठ पर कुछ रंग करने के लिए एक विशाल बवासीर था।

कहते हैं कि आप सभी शीर्षकों को लाल बनाना चाहते हैं। ऐसा करने के लिए, निम्नलिखित टैग लगाएं:

<H1><FONT COLOR=red>...</FONT></H1>

... प्रत्येक शीर्षक के लिए । मुझे आशा है कि आप कभी भी नीले रंग पर स्विच करने का निर्णय नहीं लेंगे!

ओह, और HTML टैग कस्टम अक्षरों में लिखे गए थे। मुझे याद नहीं है कि हम सभी ने यह क्यों तय किया कि यह एक अच्छा विचार है। शायद यह पाठ संपादकों में वाक्य रचना हाइलाइटिंग से पहले था (मैं 12 साल का था और मैंने नोटपैड का उपयोग किया था), और शीर्षक टैग मुख्य पाठ से अलग करना आसान है।

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

मुझे याद है कि कई जियोसिटी साइटों पर एक दिलचस्प वैकल्पिक समाधान कैसे दिखाई दिया: हर नए वेब पेज के लिए पूरी तरह से नया रूप। लानत है, है ना? बस वही करें जो आप हर नए पेज पर चाहते हैं।

शायद यह वेब डिज़ाइन का शिखर था।

नरक, मुझे उन दिनों की याद आती है। पूरी तरह से खुला वेब, कोई ट्विटर, कोई फेसबुक। यदि आपके पास कुछ कहने के लिए है, तो आपको अपनी वेबसाइट बनानी चाहिए। यह कमाल था। कोई नहीं जानता था कि वह क्या कर रहा था; मैं शर्त लगाता हूं कि उस समय के अधिकांश वेब डिजाइनर अज्ञानी शौकिया किशोर (मेरे जैसे) थे जो अन्य अज्ञानी शौकिया किशोर से पृष्ठों की नकल करते हैं। इंटरनेट का आधा हिस्सा एनिमोर्फ्स के बारे में फैन-मेड पोर्टल्स था, जिसमें अकथनीय चेतावनी स्क्रीन थी कि साइट 640x480 के स्क्रीन रिज़ॉल्यूशन के साथ सबसे अच्छा काम करती है (संभवतः प्रत्येक 12-वर्षीय किशोर अपर्याप्त स्क्रीन रिज़ॉल्यूशन के साथ एक नया मॉनिटर खरीदना चाहिए)। सभी शांत लोग इंटरनेट एक्सप्लोरर 3 का उपयोग करते हैं - सबसे उन्नत ब्राउज़र। हालांकि, कुछ हारे अभी भी नेटस्केप नेविगेटर में बैठे हैं, इसलिए मुख्य पृष्ठ पर आपको एनिमेटेड जीआईएफ "बेस्ट इन आईई" रखना होगा।

यह "इंटरनेट-सुरक्षित रंग" का युग भी था - 216 रंगों का एक पैलेट, जहां प्रत्येक चैनल समान था00, 33, 66, 99, ccया ff, क्योंकि कुछ अभी भी 256 रंग की निगरानी बने रहे! आज हम इसके बारे में नहीं सोचते हैं, 24-बिट रंग प्रदान करने के लिए।

वास्तव में, अब हम जो कुछ भी लेते हैं, वह अप्रभावी और कठिन था। साइट के हर पृष्ठ पर एक ही नेविगेशन चाहते हैं? ठीक है, कोई समस्या नहीं: प्रत्येक पृष्ठ पर नेविगेशन कोड को कॉपी / पेस्ट करें। यदि आप इस कोड को अपडेट करते हैं, तो प्रत्येक पृष्ठ को ताज़ा करना सुनिश्चित करें - लेकिन सबसे अधिक संभावना है कि आप कुछ पृष्ठों पर ऐसा करना भूल जाएंगे, और साइट एक पुरातात्विक साइट की तरह दिखेगी, जिसमें अलग-अलग "युग" से पृष्ठों की कई परतें होंगी। फ़्रेम

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

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

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

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

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

... तो, चलो अंतरिक्ष जाम वेबसाइट को देखें।

उदाहरण: अंतरिक्ष जाम

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

और हम वास्तव में बहुत भाग्यशाली हैं कि इसके लॉन्च के 24 साल बाद, स्पेस जैम वेबसाइट अभी भी काम कर रही है ! यहीं और अब हमारे पास 1996 मॉडल की सर्वश्रेष्ठ वेब डिज़ाइन उपलब्धि का अध्ययन करने का अवसर है।

सबसे पहले, ध्यान दें कि साइट का प्रत्येक पृष्ठ स्थिर है। और यह एक एक्सटेंशन वाला एक स्थिर पृष्ठ है .htm, नहीं.htmlक्योंकि विंडोज 95 से पहले हम अभी भी 8.3 फ़ाइल नामों (नाम के लिए आठ वर्ण, विस्तार के लिए तीन वर्ण) से बंधे थे। मुझे नहीं पता कि URL में यह क्यों दर्ज किया गया, क्योंकि कोई भी वेब सर्वर पर विंडोज 3.11 नहीं चला रहा था, लेकिन ठीक है।

यहाँ मुख्य पृष्ठ के लिए CSS है:

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

Haha, मैं सिर्फ मजाक कर रहा हूँ! क्या सीएसएस की तरह? "कॉस्मिक जैम" इस मानक के प्रकाशित होने से एक महीने पहले जारी किया गया था (वास्तव में, पृष्ठ के स्रोत कोड में एक पंक्ति है, लेकिन मुझे यकीन है कि इसे जोड़ने के लिए आवश्यक नियमों के कुछ लिंक को स्टाइल करने के लिए बहुत बाद में जोड़ा गया था क्योंकि कानूनी दायित्व)।

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

वास्तव में, तालिकाओं का लेआउट में CSS पर एक कार्यात्मक लाभ है, जो उन दिनों में बहुत महत्वपूर्ण था, क्योंकि Ctrl दबाए जाने के साथ आप एक सेल का चयन कर सकते हैंटेबल या कुछ भी। इस तरह के एक अजीब "रेट्रो-डिबगर" से पता चलता है कि लेआउट में कोशिकाएं कैसे स्थित हैं। यह बहुत अच्छा था क्योंकि पहला सामान्य फायरबग डीबगर 2006 में ही बाहर आया था - एक पूरे दशक बाद!

किसी अज्ञात कारण से इस तालिका का मार्कअप रिक्त लाइनों से भरा है, लेकिन यदि आप उन्हें हटाते हैं, तो यह इस तरह दिखता है:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

ये पहली दो लाइनें हैं, जिसमें लोगो भी शामिल है। आपको विचार आया। सब कुछ कोशिकाओं के साथ alignऔर अंदर स्थित है valign; अक्सर लागू किया जाता है rowspanऔर colspan, <br>एक पंक्ति में ऊर्ध्वाधर स्थिति को समायोजित करने के लिए बहुत कम है, जहां आवश्यक हो।

अन्य शानदार कलाकृतियों को पृष्ठ पर पाया जा सकता है, जिसमें एक हैडर भी शामिल है जिसमें अपाचे एसएसआई सिंटैक्स शामिल है! जब यह साइट अपने जीवन के कई वर्षों के लिए होस्ट करने के लिए स्थानांतरित हो जाती है, तो यह सभी के लिए चुपचाप टूट गया होगा। अब इसे अमेजन एस 3 पर होस्ट किया गया है। वैसे आप अमेज़न जानते हैं? बुक शॉप?

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

ठीक है, जैम सेंट्रल पेज देखें । प्रामाणिकता के लिए, मैंने ब्राउज़र में रिज़ॉल्यूशन को 640 × 480 तक कम कर दिया (हालांकि पूर्ण विसर्जन के लिए मुझे शीर्षक बार, टास्कबार और पांच से छह IE टूलबार के लिए थोड़ा अधिक ऊर्ध्वाधर स्थान आरक्षित करना चाहिए था)।

फ़्रेम पर ध्यान दें: ऊपरी बाएं कोने में लोगो लैंडिंग पृष्ठ पर वापस जाता है, स्क्रीन पर एक जगह को सही ढंग से सहेजता है ताकि यह सभी नेविगेशन दोहराए न जाए, और ऊपरी दाएं कोने में एक कमबख्त विज्ञापन बैनर है जो सात अलग-अलग तरीकों से अवरुद्ध था। तीनों भाग अलग-अलग पृष्ठ हैं।

एक बनावट वाली पृष्ठभूमि पर पूरी तरह से अपठनीय लाल पाठ पर भी ध्यान दें, 90 के दशक के वेब डिज़ाइन के सबसे अच्छे संकेतों में से एक। आप पूछ सकते हैं, पाठ के लिए एक सामान्य पृष्ठभूमि का उपयोग क्यों नहीं करें? तुम मुर्ख हो। यह कैसे करना है? सब के बाद, विशेषता backgroundकेवल साथ है <body>! आप एक टेबल रख सकते हैं, लेकिन टेबल केवल एक ठोस पृष्ठभूमि का समर्थन करते हैं, यह उबाऊ लगेगा!

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

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

मुझे लगता है कि यहां सब कुछ कमोबेश स्पष्ट है। विशेषता usemapएक छवि मानचित्र संलग्न करती है, जिसे कुछ निर्देशांक द्वारा खूबसूरती से एन्कोड किए गए क्लिक करने योग्य क्षेत्रों के एक सेट के रूप में परिभाषित किया गया है।

और यह अभी भी काम करता है! HTML में! आप इसे अभी उपयोग कर सकते हैं! हालांकि, शायद नहीं।

थंबनेल ग्रिड

एक और यादृच्छिक पृष्ठ पर विचार करें। उदाहरण के लिए, "फिल्म से फोटो।" (रुको, फोटो ? उस समय, "फ्रेम" और "स्क्रीनशॉट" शब्दों को नहीं जानता था? ठीक है, ठीक है ...)

फ्रेम का एक और सेट, लेकिन अलग तरह से व्यवस्थित।

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

यहां, डेवलपर्स ने एक महत्वपूर्ण काम किया: उन्होंने न केवल पृष्ठभूमि छवि (अपारदर्शी) का संकेत दिया, बल्कि पृष्ठभूमि का रंग भी । अन्यथा, पृष्ठभूमि की छवि लोड नहीं होने पर सफेद पाठ एक सफेद पृष्ठभूमि पर सामने आएगा।

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

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

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

ब्राउज़र के विवेक पर एक 3 × 3 थंबनेल ग्रिड (एक अलग लाइन पर अंतिम छवि वास्तव में तालिका का हिस्सा नहीं है)। स्तंभों की संख्या स्क्रीन की चौड़ाई पर निर्भर नहीं करती है, लेकिन उन दिनों सभी के पास छोटे स्क्रीन थे, इसलिए यह डिजाइनर को बहुत परेशान नहीं करता था। यहां चित्रों में कैप्शन नहीं है, लेकिन चूंकि उनमें से प्रत्येक को एक अलग सेल में रखा गया है, इसलिए उन्हें आसानी से जोड़ा जा सकता है।

यह 1996 में सबसे उन्नत थंबनेल प्रदर्शन दृष्टिकोण था। हम इस छोटी सी UI पहेली पर कुछ और बार लौटेंगे; आप एक अलग पृष्ठ पर वास्तविक उदाहरण (और नमूना मार्कअप के साथ स्रोत कोड) देख सकते हैं ।

आइए रुचि के लिए फिल्म से "पूर्ण-आकार, पूर्ण-रंग, इंटरनेट-गुणवत्ता" फ्रेम के आकार पर एक नज़र डालें।

अरे, हाँ वे 16 केबी से कम हैं! यह तस्वीर नौ सेकंड में तेजी से लोड होगी!

(मुझे एम्बेडेड वीडियो के साथ समस्या याद है, इसे हल नहीं किया जा सकता है जब तक कि एचटीएमएल 5 टैग <video>कुछ साल बाद दिखाई नहीं देता । तब तक, मुझे कुछ मालिकाना प्लग-इन का उपयोग करना था, और वे सभी भयानक थे।)

(हां, वैसे: डिफ़ॉल्ट रूप से लिंक के अंदर छवियों में एक रंग फ़्रेम जोड़ा गया था। यहां, लिंक की उपस्थिति स्पष्ट है, इसलिए फ़्रेम अनावश्यक और कष्टप्रद दिखता है। CSS से पहले, उन्हें विशेषता का उपयोग करके प्रत्येक व्यक्तिगत छवि के लिए अक्षम किया जाना चाहिए <img border=0>)।

उन समय का सामान्य लेआउट

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

फिर सीएसएस आया। यह एक वास्तविक चमत्कार था । ये सभी कोड हर पेज पर दोहराए गए गायब हो गए हैं। एक विशेष रंग के सभी शीर्ष स्तर की सुर्खियों में बनाना चाहते हैं? कोई दिक्कत नहीं है:

H1 {
    color: #FF0000;
}

बैम! और यह सब है। <h1>आपके दस्तावेज़ में कोई भी शीर्षक नहीं है , उनमें से प्रत्येक लाल झुलस जाएगा, और आपको इसके बारे में फिर कभी नहीं सोचना पड़ेगा। इससे भी बेहतर: आप इस टुकड़े को अपनी फ़ाइल में रख सकते हैं और लगभग किसी भी प्रयास के साथ अपनी साइट के हर पृष्ठ पर इस संदिग्ध सौंदर्य पसंद को लागू कर सकते हैं ! वही आपके शानदार टाइल बैकग्राउंड, लिंक कलर और टेबल में फॉन्ट साइज़ पर लागू होता है।

(बस <style>HTML टिप्पणियों में टैग की सामग्री को लपेटना याद रखें , अन्यथा सीएसएस समर्थन के बिना पुराने ब्राउज़र उन्हें पाठ के रूप में प्रदर्शित करेंगे)।

पंक्ति में हर चीज़ के लिए टैग लगाना आवश्यक नहीं है। सीएसएस ने "कक्षाएं" और "आईडी" की अवधारणाओं को पेश किया, इसलिए शैली केवल विशेष रूप से चिह्नित तत्वों तक फैली हुई है। चयनकर्ता टाइप करेंP.importantकेवल कक्षा के पैराग्राफ पर लागू होता है <P CLASS="important">, लेकिन #headerकेवल प्रभावित करता है <H1 ID="header">(अंतर यह है कि पहचानकर्ता को दस्तावेज़ में अद्वितीय होना चाहिए, और कक्षाएं किसी भी समय उपयोग की जा सकती हैं)। इन उपकरणों का उपयोग करके, आप प्रभावी रूप से अपने स्वयं के टैग बनाते हैं, जिससे आपकी साइट के लिए HTML का एक अलग संस्करण प्राप्त होता है!

यह एक बड़ी छलांग थी, लेकिन उस समय किसी ने (शायद) लेआउट के लिए सीएसएस का उपयोग करने के बारे में नहीं सोचा था। जब सीएसएस 1 की सिफारिश दिसंबर 96 में प्रकाशित हुई थी , तो यह शायद ही सभी पर लेआउट को छू गया था, यह केवल मौजूदा एचटीएमएल कार्यों को उन टैगों से अलग करता है जिनसे वे संलग्न हैं। हमारे पास फ़ॉन्ट रंग और पृष्ठभूमि के लिए धन्यवाद <FONT COLOR>और<BODY BACKGROUND>। केवल एक चीज जो कम से कम दूरस्थ रूप से पृष्ठ पर वस्तुओं के स्थान को प्रभावित करती थी, वह floatसमान संपत्ति थी <IMG ALIGN>, जिसने छवि को किनारे पर खींचा और इसके चारों ओर पाठ प्रवाह को शामिल किया, जैसा कि एक समाचार पत्र में है। इतना प्रभावशाली नहीं है।

लेकिन यह आश्चर्य की बात नहीं है। तालिकाओं को छोड़कर HTML में कोई वास्तविक लेआउट उपकरण नहीं थे, और तालिका गुणों को CSS में सामान्य बनाना या टैग संरचना से संबंधित होना बहुत मुश्किल है, इसलिए CSS 1 में जोड़ने के लिए कुछ भी नहीं था। हम सिर्फ थोड़ा स्वचालित करते हैं, उदाहरण के लिए, टैग का उपयोग <FONT>, इसलिए वेब डिज़ाइन कम थकाऊ और कम त्रुटि प्रवण बन गया, पेज कोड क्लीनर बन गया और बनाए रखने के लिए बहुत आसान हो गया। एक बहुत अच्छा कदम आगे, और सभी ने खुशी से इसे स्वीकार किया, लेकिन टेबल लेआउट के लिए मुख्य उपकरण बने रहे।

हालाँकि, यह सामान्य था। द्वारा और बड़े, आपके ब्लॉग को केवल शीर्षक और साइडबार की आवश्यकता होती है। टेबल्स इसके साथ ठीक करते हैं, और यह बुनियादी संरचना अधिकांश स्थितियों के लिए उपयुक्त है। यह कॉपी करने के लिए / कुछ लाइनें पेस्ट इतना मुश्किल नहीं है <TABLE BORDER=0>और <TD WIDTH=20%>।

कई वर्षों के लिए, यह मानक था। लेआउट के लिए टेबल्स, सीएसएस के लिए ... अच्छी तरह से, स्टाइल के लिए। रंग, आकार, बोल्ड, रेखांकित करें। यहां तक कि ऐसी मूर्खतापूर्ण चाल भी थी जब केवल एक लिंक पर जोर दिया गया था जब माउस कर्सर इसके ऊपर था। सौंदर्य!

(मजेदार तथ्य: अधिकांश ईमेल सेवाओं के लिए HTML कोड अभी तक उस युग से नहीं आया है)।

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

अंधेरा समय

डेढ़ साल बाद, 1998 के मध्य में, हमें सीएसएस 2 के साथ प्रस्तुत किया गया था (वैसे, मुझे उस पृष्ठ पर पृष्ठभूमि पसंद है)। यह एक मामूली अद्यतन था, जिसने विभिन्न क्षेत्रों में कुछ कमियों को समाप्त कर दिया, लेकिन सबसे दिलचस्प स्थिति प्रधानों की एक जोड़ी के अलावा थी: संपत्ति positionने आपको तत्व को सटीक निर्देशांक में inline-blockरखने की अनुमति दी , और प्रदर्शन मोड ने आपको एक के बाद एक पंक्ति में ब्लॉकों की व्यवस्था करने की अनुमति दी।

ऐसा तांत्रिक फल, लेकिन दुर्गम! उपयोग positionसामान्य लग रहा था, लेकिन पिक्सल में सटीक स्थिति ने लचीली एचटीएमएल डिज़ाइन को गंभीरता से उलट दिया, और जब स्क्रीन को आकार दिया गया, तो आवश्यक रूप से सब कुछ अलग हो गया या अन्य गंभीर खामियां पैदा हुईं। यह विनम्र inline-block लग रहा थाकाफी दिलचस्प; फिर भी, उन्होंने HTML-लेआउट की मुख्य समस्या को हल किया, जिसमें वस्तुओं को एक पंक्ति में रखना शामिल था। लेकिन पहले, किसी भी ब्राउज़र ने इस संपत्ति को लागू नहीं किया, इसलिए डिजाइनरों ने इसे अनदेखा कर दिया।

मैं किस कारण से निश्चित रूप से कह सकता हूं - शायद स्थिति की उपस्थिति के कारण या किसी अन्य कारक के प्रभाव में, लेकिन उस समय के आसपास, उत्साही लोगों ने सीएसएस का उपयोग करके लेआउट बनाने की कोशिश करने का फैसला किया। आदर्श रूप से, आप अपने पृष्ठ की सामग्री को उसके स्वरूप से पूरी तरह से अलग कर सकते हैं। यहां तक कि सीएसएस ज़ेन गार्डन वेबसाइट (वह अभी भी जीवित है) थी, जो इस विचार को चरम पर ले गई। उस पर, एक ही एचटीएमएल कोड अलग-अलग शैली की चादरें लगाने के बाद पूरी तरह से अलग-अलग परियोजनाओं में बदल जाता है।

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

IE 3 दस्तावेज़ में सभी को छोड़कर <<style> टैग को अनदेखा करता है।
IE 3 छद्म वर्गों की उपेक्षा करता है, इसलिए यह a:hoverपढ़ता है ।
IE 3 और IE 4 सीमाओं autoको अशक्त मानते हैं । वास्तव में, यह बग IE 6. संस्करण के लिए लगभग बना रहा, लेकिन यह सामान्य था, क्योंकि IE 6 का उपयोग text-align: centerब्लॉक तत्वों के लिए गलत तरीके से भी किया गया था ।
यदि आप पृष्ठभूमि छवि के लिए एक पूर्ण URL निर्दिष्ट करते हैं, तो IE 3 स्थानीय कार्यक्रम में छवि को खोलने की कोशिश करेगा, जैसे कि आपने इसे डाउनलोड किया है।
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

यही हमें साथ काम करना था। और क्या लोग CSS में पूरे पेज का लेआउट बनाना चाहते थे ? हा।

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

ठीक है, एक मिनट में वापस। सबसे पहले, आइए कुछ वातावरण को देखें जिसमें 2000 क्षेत्र में वेब विकास विकसित हुआ।

ब्राउज़र युद्धों का अंत और बाद में ठहराव

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

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

शायद विंडोज के अलावा ऑपरेटिंग सिस्टम पर उपयोगकर्ताओं के लिए बहुत अच्छी खबर नहीं है। यह हास्यास्पद है क्योंकि यह मैक के लिए IE 5.5 था, और यह आम तौर पर IE 6 की तुलना में कम छोटी गाड़ी थी (वैसे, बिल गेट्स उस समय एक आक्रामक और निर्दयी व्यवसायी के रूप में इतना शानदार नहीं था, जिसने भाग्य बनाया जानबूझकर रास्ते में खड़ी किसी भी प्रतियोगिता को नष्ट कर देते हैं, जो अंततः पूरे उद्योग को नुकसान पहुंचाती है, ऐसा है)।

जब Internet Explorer 6 के साथ Windows XP 2001 के मध्य में बाहर आया, तो नेटस्केप नेविगेटर आला अनुप्रयोगों के लिए एक विशाल Juggernaut से एक छोटे से बौना में बदल गया।

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

W3C कंसोर्टियम के काम को भी रोक दिया, जो मानकों को स्वीकार करता है (W3Schools, SEO leeches के साथ भ्रमित नहीं होना)। 90 के दशक के मध्य में, HTML को कई बार संशोधित किया गया था, और फिर इसे HTML 4 के रूप में फ्रीज किया गया था। सीएसएस को केवल डेढ़ साल में पहले से दूसरे संस्करण में अपडेट किया गया था, लेकिन यह इस पर भी जम गया। मामूली सीएसएस 2.1 अद्यतन2004 की शुरुआत तक "उम्मीदवार की सिफारिश" की स्थिति तक नहीं पहुंचेगा, और अंतिम संस्करण को स्वीकार करने में सात साल लग गए।

IE 6 के पूर्ण प्रभुत्व की इस स्थिति में, ऐसा लग रहा था कि पूरा नेटवर्क समय में जम गया था। मानक मायने नहीं रखते थे, क्योंकि वास्तव में केवल एक ब्राउज़र था। उसने जो कुछ भी किया वह वास्तविक मानक बन गया। जैसे-जैसे इंटरनेट लोकप्रियता में वृद्धि हुई, IE के गला घोंटने की पकड़ ने विंडोज के अलावा किसी भी मंच का उपयोग करना मुश्किल बना दिया, क्योंकि IE केवल विंडोज के लिए उपलब्ध था। यह गारंटी देना कभी संभव नहीं था कि वेबसाइट किसी अन्य ब्राउज़र में काम करेगी।

(एक विचार है कि एकाधिकार बुरा है। उनके खिलाफ किसी प्रकार का कानून होना चाहिए!)

उसी समय, नेटस्केप ने अपनी स्थिति को खराब कर दिया है, इंजन के बड़े पैमाने पर परिवर्तन शुरू कर दिया है। नतीजतन, बहुत अधिक संगत नेटस्केप 6 मानक जारी किया गया था, और कीमत बाजार से कुछ साल की अनुपस्थिति थी, जहां उस समय IE ने अपना हिस्सा बढ़ाना जारी रखा। नेटस्केप 6 ब्राउज़र कभी भी 10% तक नहीं पहुंचेगा, जबकि IE 96% पर पहुंच जाएगा। दूसरी ओर, नया इंजन खुले स्रोतों के साथ मोज़िला एप्लीकेशन सूट के हिस्से के रूप में सामने आया, जो बाद में एक भूमिका निभाएगा।

लेकिन इससे पहले कुछ और साल थे, लेकिन अब के लिए ...

अनुकूलता प्रणाली

ब्राउज़रों में सभी शुरुआती सीएसएस कार्यान्वयन बग से भरे हुए थे। शायद उनमें से सबसे कुख्यात कंटेनर मॉडल (बॉक्स मॉडल) के साथ एक बग है ।

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

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... सीमा से सीमा तक 124 पिक्सेल चौड़े होंगे।

हालांकि, IE 4 और नेटस्केप 4 ने एक अलग दृष्टिकोण लिया: वे चौड़ाई और ऊंचाई को सीमा से सीमा तक एक आयाम के रूप में देखते थे, जिससे सीमा और मार्जिन तत्व की चौड़ाई प्राप्त करने के लिए घटाए जाते हैं । इन ब्राउज़रों के समान क्षेत्र में सीमा से सीमा तक 100 पिक्सेल की चौड़ाई होगी, और 76 पिक्सेल सामग्री के लिए रहेंगे।

IE 6 ने विनिर्देश के साथ इस विरोधाभास को ठीक करने का निर्णय लिया। दुर्भाग्य से, केवल परिवर्तन करने से IE और नेटस्केप दोनों में ठीक काम करने वाली कई वेबसाइटों का डिज़ाइन टूट जाएगा।

इसलिए, IE टीम एक बहुत ही अजीब समझौता के साथ आई: उन्होंने पुराने व्यवहार (कई अन्य प्रमुख त्रुटियों के साथ) को "संगतता मोड" (quirks मोड, शाब्दिक रूप से "quirks के साथ काम करना") घोषित किया और इसे डिफ़ॉल्ट रूप से चालू किया । नए "सख्त" या "मानक मोड" पर स्विच करने के लिए, दस्तावेज़ की शुरुआत में, टैग से पहले "सिद्धांत" निर्दिष्ट करना आवश्यक था <html>। यह कुछ इस तरह देखा गया:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

कई वर्षों के लिए, प्रत्येक को प्रत्येक HTML दस्तावेज़ की शुरुआत में इस बेवकूफ लाइन को सम्मिलित करना था (बाद में HTML5 इसे सरल करेगा <!DOCTYPE html>)। यदि आप इसके बारे में सोचते हैं, तो सही सीएसएस व्यवहार चुनने के लिए यह वास्तव में अजीब तरीका है। डॉक्टाइप घोषणा 90 के दशक के मध्य से एचटीएमएल विनिर्देश का हिस्सा रही है , लेकिन किसी ने भी इसका उपयोग नहीं किया है। मुझे लगता है कि Microsoft का विचार मालिकाना एक्सटेंशन शुरू किए बिना चुनाव की अनुमति देना था। इस तरह की घोषणा का उपयोग करने से उस व्यवहार से बचा जा सकता है जो शुरू में गलत था। IE टीम के लिए सुविधाजनक निकास!

मजेदार बात यह है कि "quirks" के साथ संगतता मोड अभी भी मौजूद है। और यह अभी भी डिफ़ॉल्ट रूप से स्थापित हैसभी ब्राउज़रों में, बीस साल बाद! "Quirks" की सटीक सूची समय के साथ बदल गई है। विशेष रूप से, न तो क्रोम और न ही फ़ायरफ़ॉक्स इस मोड में भी IE कंटेनर मॉडल का उपयोग करते हैं, लेकिन कई अन्य त्रुटियों का अनुकरण किया जाता है।

आधुनिक ब्राउज़रों में एक "लगभग मानक" मोड होता है जो केवल एक क्विक का अनुकरण करता है। शायद यह दूसरा सबसे घिनौना कार्य है: यदि एक टेबल सेल में केवल एक छवि होती है, तो नीचे का स्थान हटा दिया जाता है। सामान्य सीएसएस नियमों के अनुसार, छवि पाठ की (खाली) लाइन में है, जिसके लिए नीचे कुछ जगह की आवश्यकता होती है - अक्षरों के अंतःविषय तत्वों के लिए, जैसे "y"। प्रारंभिक ब्राउज़र सामान्य रूप से इसे संभाल नहीं सकते थे, हालाँकि, लगभग 2000 के बाद बनाई गई कुछ वेबसाइटें इस सुविधा पर निर्भर थीं, हालाँकि बाकी सब कुछ पूरी तरह से अनुपालन था। उदाहरण के लिए, उन्होंने एक बड़ी छवि को टुकड़ों में काट दिया, जो टेबल की कोशिकाओं में एक दूसरे के करीब रखा गया था। यदि, मानक के अनुसार, खाली स्थान जोड़ें, तो तस्वीर अलग हो जाएगी।

लेकिन वापस अतीत में। यद्यपि मानकों ने औपचारिक रूप से प्रबल किया, लेकिन इसने एक नई समस्या पैदा की। चूंकि IE 6 वेब पर हावी है, और DOCTYPE घोषणाएं वैकल्पिक थीं, इसलिए ब्राउज़र के "सख्त मोड" में इन मानकों का समर्थन करने के बारे में सोचना जरूरी नहीं था। अन्य ब्राउज़रों ने अंततः इसका अनुकरण किया, और कस्टम व्यवहार वास्तविक मानक बन गया। वेब डिजाइनर जिन्होंने इस तरह की चीजों की परवाह की (हमारे क्रेडिट के लिए, हम में से कई थे) सख्त मोड को सक्षम करने के लिए एक हाई-प्रोफाइल अभियान शुरू किया, क्योंकि यह अन्य ब्राउज़रों के साथ संगतता सुनिश्चित करने के लिए एक बिल्कुल आवश्यक पहला कदम था।

एक्सएचटीएमएल उठो और गिरो

इस बीच, W3C ने HTML में XHTML के पक्ष में रुचि खो दी है। यह HTML को SGML के बजाय XML सिंटैक्स का उपयोग करके पुन: डिज़ाइन करने का एक प्रयास है।

(एसजीएमएल क्या है, आप पूछते हैं; मैं नहीं जानता। कोई नहीं जानता। यह व्याकरण है जिस पर एचटीएमएल बनाया गया है, और यह केवल एक चीज है जो इसके बारे में जाना जाता है)।

कंसोर्टियम के श्रेय के लिए, उस समय इस तरह के निर्णय के लिए काफी अच्छे कारण थे। एक नियम के रूप में, HTML मैन्युअल रूप से लिखा गया था (जैसा कि यह अब है), और इसका मतलब यादृच्छिक त्रुटियों की अनिवार्य उपस्थिति है। ब्राउज़रों ने बगिया HTML को अस्वीकार नहीं किया, लेकिन त्रुटियों को ठीक करने के लिए विभिन्न तरीकों को शामिल किया - और, बाकी सब चीजों की तरह, विभिन्न ब्राउज़रों ने त्रुटियों को अलग-अलग तरीके से संभाला। थोड़ा विकृत HTML IE 6 में ठीक काम कर रहा था (जहां "ठीक काम किया है" का अर्थ है "आपने इससे क्या उम्मीद की थी"), लेकिन यह अन्य ब्राउज़रों में पूरी तरह से अलग हो गया।

W3C कंसोर्टियम ने XML को चुना क्योंकि 2000 की शुरुआत में उन्होंने XML को सभी समस्याओं के सार्वभौमिक समाधान के रूप में देखा। यदि आप नहीं जानते हैं, तो XML में त्रुटि से निपटने के लिए अधिक स्पष्ट और आक्रामक दृष्टिकोण है - यदि आपके दस्तावेज़ में पार्सिंग त्रुटि है, तो संपूर्ण दस्तावेज़ अमान्य है। इसका मतलब है कि यदि आपने XHTML को चुना और एक टाइपो बनाया, तो ब्राउज़र में कुछ भी प्रदर्शित नहीं होगा। बस एक गलती है।

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

HTML ऐसा नहीं है। एक HTML दस्तावेज़ में थोड़ा विश्वसनीय दोहराई जाने वाली संरचना है; यहां तक कि पृष्ठ पर इस लेख को मुख्य रूप से टैग द्वारा स्वरूपित किया गया है <p>, लेकिन इसमें <em>मुख्य पाठ के अंदर अप्रत्याशित और यादृच्छिक भी शामिल है<h3>पैराग्राफ के बीच। पेड़ के रूप में इसे एनकोड करना बहुत मजेदार नहीं है। और यह महत्वपूर्ण है, क्योंकि लगभग उसी समय, सर्वर-साइड प्रतिपादन गति प्राप्त कर रहा था, और उत्पन्न HTML तब और अब! - इसे टेम्प्लेट स्ट्रीम के रूप में मानने वाले टेम्प्लेट के साथ दिया गया।

यदि HTML पृष्ठ विशुद्ध रूप से स्थैतिक दस्तावेज थे, तो XHTML काम कर सकता था - आप एक दस्तावेज़ लिखते हैं, इसे एक ब्राउज़र में देखते हैं और जानते हैं कि सब कुछ काम करता है। कोई दिक्कत नहीं है। लेकिन एक दस्तावेज़ को गतिशील रूप से बनाने और जोखिम में डालने के लिए कि कुछ सीमा रेखा की स्थिति में पूरी साइट को धोखा दिया जाएगा, और आगंतुक को ब्राउज़र में सिर्फ एक त्रुटि दिखाई देगी? यह बेकार है।

बेशक, उस समय के आसपास नए-नवेले यूनिकोड मानक के प्रसार ने भी एक भूमिका निभाई। तब यह हमेशा स्पष्ट नहीं था कि इसका उपयोग कैसे किया जाए, और UTF-8 का एक बुरा क्रम पूरे XML दस्तावेज़ को विकृत और "अमान्य" मानने के लिए पर्याप्त था!

इसलिए, कुछ लाड़ प्यार के बाद, हम लगभग XHTML के बारे में भूल गए। वह केवल दो ट्रैक से पीछे रह गए:

सभी ने अपरकेस में टैग नामों का उपयोग करना बंद कर दिया! अलविदा <BODY>, नमस्ते <body>! XML केस संवेदी है और सभी XHTML टैग कम थे, इसलिए शीर्षक टैग बस काम नहीं करता था (मजेदार तथ्य: जावास्क्रिप्ट एपीआई अभी भी अपरकेस में HTML टैग के नामों को पारित करता है)। यह संभवतः सिंटैक्स हाइलाइटिंग की बढ़ती लोकप्रियता के कारण है; हम अब Notepad में नहीं लिखते हैं, जैसे कि 1997 में।
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

मुझे XHTML में केवल एक ही चीज़ याद आती है। वहां आप स्क्रिप्ट लिखने के बिना "ब्राउज़र के अंदर" (यानी साइट के सामान्य लेआउट में पेज की सामग्री डालें) टेम्पलेट बनाने के लिए एक्सएसएलटी मेटलंगेज का उपयोग कर सकते थे। यह ऐसा करने का एकमात्र संभव तरीका था, और अगर सब कुछ काम करता है तो यह बहुत अच्छा था। लेकिन कुछ छोटी गड़बड़ सब कुछ बर्बाद कर सकती है।

सीएसएस लेआउट की उपस्थिति

वापस सीएसएस के लिए!

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

जैसा कि मैंने उल्लेख किया है, मुख्य समस्या एक दूसरे के बगल में वस्तुओं की क्षैतिज स्थिति है । ऊर्ध्वाधर स्थिति एक समस्या नहीं है - यह सामान्य HTML व्यवहार है। एकमात्र कारण हर कोई तालिकाओं का उपयोग करता है, क्योंकि वे सामग्री को कोशिकाओं में तोड़ सकते हैं और स्तंभों में उनकी ओर से व्यवस्था कर सकते हैं।

सीएसएस 2 ने कुछ प्रदर्शन मोड पेश किए जो तालिका के कुछ हिस्सों के अनुरूप हैं। लेकिन उनका उपयोग करने के लिए, आपको वास्तविक तालिकाओं में समान तीन स्तरों की आवश्यकता होती है: तालिका स्वयं, फिर पंक्ति, फिर कक्ष। वे यहां नहीं हैं, और किसी भी मामले में, IE जल्द ही इस तरह के साधनों का समर्थन करना शुरू नहीं करेगा।

वहाँ अधिक है position, लेकिन वह लगातार वस्तुओं को एक दूसरे के ऊपर रखना चाहता है । हम्म

क्या बचा है?

वास्तव में, केवल एक उपकरण float:।

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

+ --------- +
| साइडबार | नमस्कार, मेरी वेबसाइट पर आपका स्वागत है!
| |
+ --------- +

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

+ --------- + + ----------------------------------- +
| साइडबार | | नमस्कार, मेरी वेबसाइट पर आपका स्वागत है! |
| | | |
+ --------- + | यहाँ दिखाने के लिए एक लंबा पैराग्राफ है |
            | कि मेरी आकाशगंगा मस्तिष्क सीएसएस फ्लोट |
            | बकवास पाठ आवरण को रोकता है। |
            + ----------------------------------- +

इस दृष्टिकोण ने काम किया, लेकिन इसकी सीमाएं टेबल की सीमाओं से बहुत अधिक खराब थीं। उदाहरण के लिए, यदि आप एक पाद लेख जोड़ते हैं, तो यह मुख्य पाठ के दाईं ओर चढ़ जाएगा, क्योंकि ब्राउज़र के लिए "कर्सर" अभी भी सबसे ऊपर है, फ्लोट ब्लॉकों के दाईं ओर। इसलिए, आपको clearइसे सभी फ़्लोट्स के नीचे एक तत्व को कील करने के लिए उपयोग करने की आवश्यकता है । और अगर आपने पृष्ठ की चौड़ाई के 20% पर साइडबार, और शरीर को 80% पर बनाया है, तो उनके बीच कोई भी स्थान पृष्ठ को स्क्रीन से बाहर धकेल देगा और एक बदसूरत क्षैतिज स्क्रॉल बार दिखाएगा। आपको हमेशा इस बेवकूफ अंकगणित को याद रखने की जरूरत है। आप सीमाओं या पृष्ठभूमि दोनों पक्षों पर सेट है, तो वे अलग हाइट्स के लिए किया जाएगा, ताकि आप क्या करना है वास्तव में इतनी विचित्र बातें है किइसे ठीक करो। और स्क्रीन रीडर मुख्य पाठ पर जाने से पहले पूरे साइडबार को पढ़ेंगे, जो उपयोगकर्ताओं के लिए बहुत अशिष्ट है। इसलिए, आपको तीन स्तंभों के साथ और भी अधिक जटिल सेटअप का उपयोग करने की आवश्यकता है , जिनमें से मध्य HTML में पहली बार दिखाई देता है।

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

थंबनेल ग्रिड - 2

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

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

यह आदर्श है: HTML कुछ उचित रूप में पृष्ठ सामग्री संग्रहीत करता है, और फिर सीएसएस वर्णन करता है कि यह वास्तव में कैसा दिखता है।

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

आपको clearfixउस युग में कुख्यात इस अजीब मंत्र की भी आवश्यकता है । चूंकि फ्लोट "कर्सर" को स्थानांतरित नहीं करता है, फिर<ul>फ्लोट तत्वों के साथ शून्य ऊंचाई। यह ठीक उसी स्थान पर समाप्त होता है जहां यह शुरू होता है, और सभी फ्लोट थंबनेल को नीचे से पर्याप्त नींद मिलती है। इससे भी बदतर, क्योंकि बाद के सभी तत्वों में आसन्न फ़्लोट्स नहीं हैं, वे पूरी तरह से थंबनेल को अनदेखा करेंगे, एक खाली "ग्रिड" के तहत प्रस्तुत करना जारी रखेंगे - एक गड़बड़ पैदा करना!

समाधान सूची के अंत में एक डमी तत्व जोड़ना है , जो स्थान नहीं लेता है, लेकिन एक सीएसएस विशेषता के साथ clear: both, जो इसे सभी फ़्लोट के नीचे छोड़ देता है। यह प्रभावी रूप <ul>से थंबनेल के नीचे उत्तरार्द्ध को धक्का देता है , और यह नीचे से उन्हें बड़े करीने से पालन करता है।

बाद में, ब्राउज़र "द्वारा निर्मित सामग्री को" के छद्म तत्वों का समर्थन करना शुरू कर देंगे ::beforeऔर::after, जो पूरी तरह से डमी तत्व को छोड़ देगा। 2000 के दशक के मध्य से शैली की चादरें अक्सर निम्नलिखित पंक्तियों को शामिल करती थीं:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

और फिर भी यह तालिकाओं से बेहतर था।

DHTML

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

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

इस तरह की स्क्रिप्ट का सबसे लोकप्रिय संग्रह डायनामिक ड्राइव था । - यह स्थल चमत्कारिक रूप से अभी भी मौजूद है। इसमें संभवतः सैकड़ों खिलौने शामिल हैं जिन्हें 2000 के दशक की शुरुआत से अपडेट नहीं किया गया था।

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

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

वेब 2.0

अंधेरा समय हमेशा के लिए नहीं रह सकता। घटनाओं की एक श्रृंखला हुई जिसने हमें प्रकाश में खींच लिया।

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

असली बात यह थी कि फ़ायरफ़ॉक्स में टैब थे। IE 6 में वे नहीं थे। यदि आप दूसरा वेब पेज खोलना चाहते हैं, तो आपने एक नई विंडो खोली है। लानत है कि लोग बेकार है। फ़ायरफ़ॉक्स एक वास्तविक चमत्कार बन गया है।

बेशक, फ़ायरफ़ॉक्स टैब के साथ पहला ब्राउज़र नहीं था; मोज़िला सूट से पूर्ण ब्राउज़र में, वे भी मौजूद थे, और उन्नत ओपेरा में वे उम्र भर के लिए रहे हैं। लेकिन विभिन्न कारणों से, यह फ़ायरफ़ॉक्स था, जो कम से कम इस तथ्य के कारण था कि यह ओपेरा की तरह शीर्ष पर एक विशाल लानत विज्ञापन पैनल नहीं था।

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

IE6 ब्राउज़र में एसिड 2 परीक्षा परिणाम

प्रारंभिक फ़ायरफ़ॉक्स सही नहीं था। लेकिन निश्चित रूप से, उन्होंने मानकों का बेहतर तरीके से समर्थन किया, और आप प्रगति देख सकते थे जब तक कि ब्राउज़र फ़ायरफ़ॉक्स 3 के रिलीज के साथ सभी परीक्षणों को पूरी तरह से पारित नहीं कर देता

था । फ़ायरफ़ॉक्स को तेज जावास्क्रिप्ट इंजन द्वारा भी मदद की गई थी: यह जेआईटी से पहले था। यह आईई की तुलना में बहुत तेज था। उदाहरण के लिए, जहां तक मुझे याद है, IE 6 getElementByIdने पूरे दस्तावेज के माध्यम से पुनरावृत्ति को लागू किया , यहां तक कि अद्वितीय पहचानकर्ताओं के मामले में भी। पुरानी jQuery की रिलीज़ घोषणाओं पर एक नज़र डालें , वे आमतौर पर प्रदर्शन ग्राफ़ के साथ थे, और सभी ब्राउज़र IE 6-8 की तुलना में तेजी से परिमाण का क्रम हैं ।

ओह, और फिर IE 6 एक विशाल चलने वाला सुरक्षा छेद था, विशेष रूप से मनमाने ढंग से द्विआधारी घटकों के लिए देशी समर्थन के साथ जो केवल आपके सिस्टम पर पूर्ण और असीमित पहुंच प्राप्त करने के लिए एब्सट्रूज़ डायलॉग बॉक्स पर "हां" पर क्लिक करने की आवश्यकता थी। यह शायद IE की प्रतिष्ठा में योगदान नहीं करता था।

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

(मैं कहूंगा कि इस आशय ने ओएस एक्स के साथ-साथ आईफोन के लिए भी दरवाजा खोल दिया। मैं मजाक नहीं कर रहा हूं! इसके बारे में सोचो: अगर आईफोन ब्राउज़र वास्तव में किसी भी चीज के साथ काम नहीं करता है, क्योंकि हर कोई अभी भी IE के लिए साइटों का निर्माण कर रहा था। 6, यह पाम के लिए महंगे विकल्प के रूप में रहेगा। याद रखें कि पहले तो Apple अपने स्वयं के अनुप्रयोगों को भी जारी नहीं करना चाहता था - यह इंटरनेट पर निर्भर था)।

(वैसे, केडीई कॉन्करर ब्राउज़र से KHTML फोर्क पर आधारित जनवरी 2003 में सफारी जारी की गई थी। मुझे लगता है कि मैंने उस समय KDE का उपयोग किया था, इसलिए यह बहुत दिलचस्प था, लेकिन किसी ने भी वास्तव में इसके साथ OS X के बारे में नहीं सोचा था। हास्यास्पद बाजार हिस्सेदारी 2%)।

एक और महत्वपूर्ण कारक 1 अप्रैल 2004 को दिखाई दिया, जब Google ने जीमेल की घोषणा की। haha यह हास्यास्पद है। मेल के लिए सुविधाजनक वेब इंटरफ़ेस? अच्छा मजाक, गूगल।

हे भगवान। वे मजाक नहीं कर रहे हैं।यह इंटरेक्टिव चीज़ कैसे काम करती है?

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

महत्वपूर्ण बात यह है कि XMLHttpRequest आपको जावास्क्रिप्ट से HTTP अनुरोध करने की अनुमति देता है। अब आप पृष्ठ के केवल एक हिस्से को नए डेटा के साथ ताज़ा कर सकते हैं , पूरी तरह से पृष्ठभूमि में, फिर से लोड किए बिना। इससे पहले किसी ने इस बात को नहीं सुना था, और जब Google ने इस पर एक संपूर्ण ईमेल क्लाइंट को रोल आउट किया, तो यह पूर्ण जादू था।

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

एक समान नस में, jQuery, एक समान चमत्कार, अगस्त 2006 में जारी किया गया था। उन्होंने न केवल "JScript" IE एपीआई और सभी दूसरों द्वारा अपनाई गई मानक दृष्टिकोणों (जो अन्य पुस्तकालयों द्वारा पहले किया गया था) के बीच के अंतरों का वर्णन किया, बल्कि एक ही समय में तत्वों के पूरे समूहों के साथ काम करना बहुत सरल कर दिया, जो ऐतिहासिक रूप से गधे में एक बड़ा दर्द बना रहा। अब जावास्क्रिप्ट से हर जगह सीएसएस लागू करना बहुत आसान है! यह एक बुरा विचार है, लेकिन उस स्थिति में कोई बेहतर विकल्प नहीं था!

मैं आपको सुनता हूँ मन: जावास्क्रिप्ट फिर से! क्या यह सीएसएस के बारे में एक लेख है?

तुम पूरी तरह ठीक हो! मैं जावास्क्रिप्ट की बढ़ती लोकप्रियता का उल्लेख करता हूं, क्योंकि यह था कि सीधे सीएसएस के आधुनिक राज्य का नेतृत्व किया, एक और महान कारक के लिए धन्यवाद:

महत्वाकांक्षा

फ़ायरफ़ॉक्स ने दिखाया है कि ब्राउज़र बहुत तेज़ी से बढ़ सकते हैं - एसिड 2 में हर नया सुधार रोमांचक था। जीमेल ने हमें दिखाया कि बर्फ गिरने के साथ सादे पाठ को प्रदर्शित करने की तुलना में वेब अधिक सक्षम है।

और लोग कल्पना करने लगे ।

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

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

इसलिए काला समय लौट आया।

सीएसएस हैक आयु

डिज़ाइनर बहुत कुछ चाहते थे जो सीएसएस बस पेश नहीं कर सकता था।

कोने पर गोलाकार आकृति। स्क्वायर वाले फैशन से बाहर हो गए, और अब हर कोई गोल कोनों के साथ बटन चाहता था, क्योंकि "भविष्य उनके साथ निहित है" (देशी बटन भी किसी कारण से फैशन से बाहर हो गए)। काश, CSS ऐसा नहीं कर पाता। आपके विकल्प:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

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

क्या आपको याद है inline-block? फ़ायरफ़ॉक्स 2 वास्तव में इसका समर्थन करता है! यह छोटी गाड़ी थी और वेंडर उपसर्ग के पीछे छिपी हुई थी, लेकिन इसने कम या ज्यादा काम किया, जिसने डिजाइनरों को इसका उपयोग करने की कोशिश करने की अनुमति दी। और फिर फ़ायरफ़ॉक्स 3 बाहर आया, जिसने इसे सामान्य रूप से कम या ज्यादा समर्थन दिया, जो एक चमत्कार की तरह लग रहा था। हमारे थंबनेल ग्रिड का तीसरा संस्करण चौड़ाई से अधिक जटिल नहीं है और inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

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

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

एक छोटी सी समस्या बनी रही: IE 6. यह तकनीकी रूप से समर्थित हैinline-block, लेकिन केवल स्वाभाविक रूप से निर्मित तत्वों जैसे <b>और पर <i>, लेकिन नहीं <li>। यह नहीं है कि आप वास्तव में कैसे उपयोग करना चाहते हैं (या सोचते हैं) inline-block। एह।

सौभाग्य से, कुछ बिंदु पर, पूर्ण प्रतिभा ने hasLayoutIE में एक आंतरिक अनुकूलन की खोज की जो यह संकेत देती है कि तत्व में ... उह ... मार्कअप है। सुनो, मैं नहीं जानता। मूल रूप से, यह तत्वों के लिए रेंडरिंग पथ को बदल देता है - इसलिए ये ये नहीं हैं, बल्कि अन्य कीड़े दिखाई देते हैं , जैसे प्रत्येक तत्व के आधार पर संगतता मोड! परिणामस्वरूप, यह पता चलता है कि उपरोक्त सभी काम IE 6 में हैं, यदि आप कुछ पंक्तियों को जोड़ते हैं:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

शुरुआत में तारांकन संपत्ति को अवैध बनाते हैं, इसलिए ब्राउज़रों को पूरी लाइन को अनदेखा करना चाहिए ... लेकिन किसी अज्ञात कारण से, IE 6 तारांकन को अनदेखा करता है और बाकी नियम को स्वीकार करता है (लगभग कोई भी विराम चिह्न काम करता है, जिसमें एक हाइफ़्फ़ या - मेरा व्यक्तिगत पसंदीदा - अंडरस्कोर शामिल है)। एक संपत्ति zoom एक Microsoft एक्सटेंशन है जो तत्व को लेआउट संपत्ति सेट करने के साइड इफेक्ट के साथ, सब कुछ मापता है। और यह प्रत्येक तत्व को अपनी सामग्री को पाठ की एक बड़ी पंक्ति में सम्मिलित करने के लिए बाध्य display: inline करना चाहिए , लेकिन IE इस inlineतरह के "मार्कअप" संपत्ति के साथ तत्व को संसाधित करता है inline-block।

और यहाँ हम CSS हैक्स की सही क्षमता देखते हैं। ब्राउज़र-विशिष्ट नियम, जानबूझकर खराब सिंटैक्स के साथ जो एक ब्राउज़र को अनदेखा करेगा, एक प्रभाव को पुन: उत्पन्न करेगा जो अभी भी आप जो लिख रहे हैं, उससे समझ से बाहर है। संपूर्ण पाठ्यपुस्तकों ने बताया कि कैसे कुछ सरल बनाने के लिए, जैसे कि एक ग्रिड, लेकिन इसके लिए उस समय के अधिकांश ब्राउज़रों में काम करना है। आप देखेंगे * html, html > /**/ bodyऔर अन्य सभी प्रकार की बकवास भी करेंगे । यहाँ पूरी सूची है ! और हैक "clearfix" याद है? पूर्ण संस्करण , सभी ब्राउज़रों के साथ संगत , थोड़ा खराब है:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

क्या यह कोई आश्चर्य है कि लोगों ने सीएसएस के बारे में शिकायत करना शुरू कर दिया है?

इस लानत-मलामत के काम को अंजाम देने की कोशिशों में अंधी नकल का दौर था। उदाहरण: किसी ने (मैंने एक बार स्रोत कोड का पता लगा लिया था, लेकिन अब उसे नहीं पा सकता है) हमेशा स्थापित करने का अजीब विचार था body { font-size: 62.5% }, क्योंकि रिश्तेदार इकाइयाँ "अच्छी" हैं, डिफ़ॉल्ट डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट आकार 16px (जो) को ओवरराइड करने की इच्छा से यह सही निकला) और IE त्रुटियों से निपटने की आवश्यकता है। कुछ समय बाद, उसने ऐसा करना बंद कर दिया, लेकिन नुकसान हो गया था, और हजारों वेबसाइटों ने इस तरह से काम किया है, इसे "प्रैक्टिस" माना। इसका मतलब है कि यदि आप किसी भी दिशा में अपने ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट आकार को बदलना चाहते हैं, तो आप बकवास करते हैं - यदि आप इसे कम करते हैं और वेब पृष्ठों का एक गुच्छा सूक्ष्म बन जाता है, यदि आप इसे बढ़ाते हैं, तो आप इसे बढ़ाते हैं तो सब कुछ छोटा रहेगा। , फिर आपके निर्णय का सम्मान करने वाली साइटें विशाल हो जाएंगी। कम से कम आज हमारे पास बेहतर स्केलिंग है, मुझे लगता है।

हां, और याद रखें: StackOverflow अभी तक दिखाई नहीं दिया है। सारा ज्ञान मुँह से निकला था। यदि आप भाग्यशाली हैं, तो आप कुछ साइटों के बारे में जानते हैं, जैसे कि क्विरक्समोड और एरिक मेयर।

दरअसल, मेयर की सीएसएस / एज साइट देखें । कुछ जंगली उदाहरण हैं जो लोगों ने किया, यहां तक कि 2002 में सिर्फ CSS 1 के साथ। मुझे अभी भी लगता है कि कॉम्पलेक्सिरल एक शुद्ध प्रतिभा है, हालांकि इन दिनों यह सब opacityऔर केवल एक छवि के साथ किया जाता है । रैग्डफ्लोट के तरीकों ने केवल कुछ साल पहले देशी सीएसएस समर्थन प्राप्त किया, जिसके आगमन के साथ shape-outside! इस लेखक ने हमें एक सीएसएस रीसेट भी दिया , जो डिफ़ॉल्ट ब्राउज़र शैलियों के बीच के अंतर को समाप्त करता है।

(सीएसएस में एरिक मेयर की भूमिका कठिन है। जब उनकी छोटी बेटी रेबेका की छह साल पहले मृत्यु हो गई, तो वह अपने खुद के सीएसएस रंग के साथ अमर हो गईं, विद्रोही, एक अनोखा मामला। कि उसका ऑनलाइन समुदाय कितना सराहता है! खैर, अब मुझे इस कहानी पर थोड़ा रोना होगा।)

भविष्य आ रहा है, लेकिन धीरे-धीरे

डिजाइनरों और डेवलपर्स ने धीरे-धीरे उन सीमाओं को धक्का दिया जो ब्राउज़र सक्षम हैं। अब तक ब्राउज़रों ने कुछ हद तक खराब प्रबंधन किया है। सभी फ़िक्सेस, वर्कअराउंड और लाइब्रेरी गुप्त, नाजुक, त्रुटि प्रवण और / या भारी थे।

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

लेकिन कई हताश करने वाले प्रयास हुए। चूंकि W3C का सिर अभी भी अपने स्वयं के चूतड़ में बैठा था - एक्सएमएल के पक्ष में प्रस्तावित HTML सुधारों को भी खारिज कर दिया - कुछ सक्रिय ब्राउज़र डेवलपर्स (ऐप्पल, मोज़िला और ओपेरा) ने अपना क्लब स्थापित करने का फैसला किया। जून 2004 में, WHATWG वर्किंग ग्रुप का गठन किया गया और इसने HTML5 मानक पर काम शुरू किया। अंततः, यह पूरी तरह से एक्सएचटीएमएल की आवश्यकता को समाप्त करता है और नियमित रूप से HTML के साथ काम करने पर कई सुरक्षा मुद्दों को समाप्त करता है। इसके अलावा, इसने कुछ नए लाभ प्रदान किए, जैसे कि ऑडियो, वीडियो के लिए देशी समर्थन, और दिनांक और रंगों के लिए प्रपत्र नियंत्रण। और अन्य चीजें जो अनाड़ी रूप से जावास्क्रिप्ट नियंत्रणों द्वारा समर्थित हैं। और, उम, वे अभी भी अनाड़ी रूप से वहां समर्थित हैं।

फिर सीएसएस 3 आया। मुझे नहीं पता कि यह किस बिंदु पर हुआ। वह धीरे-धीरे दिखाई दिया, उसकी सारी शक्ति के साथ, जैसे कि एक अंडे से चूजे निकले और जल्दी में नहीं, लानत है, कहीं जाने के लिए।

मैं बहुत सी उचित धारणाएँ बना सकता हूँ। मुझे लगता है कि इसके साथ शुरुआत हुई border-radius। विशेष रूप से, के साथ -moz-border-radius। मुझे नहीं पता कि यह पहली बार कब पेश किया गया था, लेकिन मोज़िला बग ट्रैकर ने 1999 में इसका उल्लेख किया।

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

मुझे लगता है कि सीएसएस 3 के लिए धक्का वास्तव में शुरू हुआ जब फ़ायरफ़ॉक्स ने बंद कर दिया - और डिजाइनरों ने संपत्ति की खोज की -moz-border-radius। अचानक निर्मित गोल कोनों दिखाई दिए! फ़ोटोशॉप में कोई और अधिक उपद्रव नहीं है, बस एक पंक्ति लिखें! लगभग रात भर, हर जगह गोल और गोल कोनों को देखा जाता था।

और वहां से सब कुछ एक स्नोबॉल की तरह लुढ़का। नई सीएसएस फ़ंक्शंस की मदद से आम समस्याओं को एक-एक करके हल किया गया, जिन्हें सीएसएस - सीएसएस 3 के नए संस्करण में जोड़ा गया। मुख्य लोगों ने पहले बताई गई डिज़ाइन समस्याओं को हल किया:

के साथ गोल कोनों border-radius।
उपयोग करने वाले स्नातक linear-gradient(), आदि।
अपने आप में कई पृष्ठभूमि एक समस्या नहीं थी, लेकिन कुछ अन्य चीजों की सुविधा थी।
opacityरंगों में पारदर्शिता और अल्फा चैनल का उपयोग करना ।
कंटेनरों में छाया।
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
वेब फोंट जो कुछ समय के लिए सीएसएस में रहा है, लेकिन केवल आईई में लागू किया गया है और केवल कुछ डंबल-लोड किए गए फोंट के साथ। अब हम विंडोज के साथ आने वाले चार खराब फॉन्ट तक सीमित नहीं हैं और जो किसी और के पास नहीं हैं!

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

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

नर्क विक्रेता ब्राउज़रों में उपसर्ग करता है

अफसोस! दुनिया अभी भी ठीक नहीं थी।

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

और उपसर्गों का नरक शुरू हुआ , जो आज भी जारी है।

मोज़िला -moz-border-radius, इसलिए, जब सफ़ारी ने इसे लागू किया, तो उसने इसे -webkit-border-radius("WebKit" Apple कांटा KHTML का नाम कहा)। तब CSS 3 विनिर्देश ने इसे मानकीकृत किया और इसे सरल रूप से नाम दिया border-radius। इसका मतलब यह था कि यदि आप गोल सीमाओं का उपयोग करना चाहते हैं, तो आपको वास्तव में तीन नियमों को समझने की आवश्यकता है:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

पहले दो वास्तव में वर्तमान ब्राउज़रों में प्रभाव शामिल थे, और अंतिम एक भविष्य के लिए पंजीकृत है: जब ब्राउज़र वास्तविक नियम को लागू करते हैं और उपसर्गों को छोड़ देते हैं, तो यह प्रभावी होगा।

आपको इसे हर लानत समय पर करना होगा, क्योंकि CSS एक प्रोग्रामिंग लैंग्वेज नहीं है और इसमें मैक्रोज़, फ़ंक्शंस या पसंद नहीं है। कभी-कभी ओपेरा और IE ने उपसर्गों के साथ अपने स्वयं के कार्यान्वयन को पेश किया -o-और -ms-, परिणामस्वरूप, लाइनों की कुल संख्या पांच तक पहुंच गई। ग्रेडिएंट के साथ यह बहुत खराब हो गया; वाक्यविन्यास गंभीर असंगत संशोधनों की एक श्रृंखला के माध्यम से चला गया, इसलिए आप कॉपी / पेस्ट करने और संपत्ति के नाम को बदलने पर भी भरोसा नहीं कर सकते थे!

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

इससे भी बदतर, कुछ केवल उस फॉर्म का उपयोग करेंगे जो उनके पसंदीदा ब्राउज़र में काम करता है। मोबाइल वेब ब्राउज़र के उदय के साथ चीजें विशेष रूप से खराब हो गईं। IOS और Android पर अंतर्निहित ब्राउज़र सफारी (WebKit) और Chrome (मूल रूप से WebKit, अब कांटा) हैं, इसलिए आपको केवल -webkit- उपसर्ग की आवश्यकता है। जिसने मोज़िला को Android के लिए फ़ायरफ़ॉक्स रिलीज़ करते समय और अधिक कठिन बना दिया।

आईई 6 के साथ उस विफलता को याद रखें? चलो फिर शुरू करें! स्थिति इतनी भयावह थी कि मोज़िला ने अंततः कई विशेषताओं को लागू करने का फैसला किया , जो -webkit-अभी भी डेस्कटॉप फ़ायरफ़ॉक्स पर भी समर्थित हैं। स्थिति इतनी बेवकूफ है कि फ़ायरफ़ॉक्स अब इन गुणों के माध्यम से कुछ प्रभावों का समर्थन करता है, जैसे कि -webkit-text-स्ट्रोक , जो मानकीकृत नहीं है।

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

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

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

flexbox

लेकिन फिर, जैसे कि स्वर्ग से एक देवदूत आया ... flexbox ।

Flexbox एक बहुत लंबे समय के लिए ही अस्तित्व में है - आंशिक समर्थन कथित तौर पर फ़ायरफ़ॉक्स 2 में वापस आ गया था, पहले से ही 2006 में! वह कई असंगत संशोधनों से गुजरा और उसे हमेशा के लिए स्थिर कर दिया। तब IE वर्षों तक समर्थन को लागू नहीं कर सका, और आप उस लेआउट पर भरोसा नहीं करना चाहते हैं जो आपके केवल आधे दर्शकों के लिए काम करता है। केवल अपेक्षाकृत हाल ही में (2015? बाद में?) Flexbox को सुरक्षित उपयोग के लिए पर्याप्त व्यापक समर्थन मिला। और मैं कसम खा सकता हूं कि मैं अभी भी ऐसे लोगों से मुठभेड़ करता हूं जिनकी सफारी उपसर्गों के बिना इसे बिल्कुल नहीं पहचानती है, हालांकि लगता है कि सफारी ने पांच साल पहले उपसर्ग गिरा दिया है ...

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

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

एक बार यह हो जाने के बाद, आपके पास सुविधाजनक विकल्पों के लिए कई विकल्प भी होंगे: आप बच्चों के बीच अतिरिक्त स्थान वितरित कर सकते हैं , आप उन्हें एक ही ऊँचाई तक खींच सकते हैं या उन्हें अलग-अलग तरीकों से संरेखित कर सकते हैं, यदि आप फिट नहीं होते हैं, तो आप उन्हें कई पंक्तियों में भी स्थानांतरित कर सकते हैं!

इसके साथ, हम अपने थंबनेल ग्रिड को और अनुकूलित कर सकते हैं :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

यह सिर्फ एक चमत्कार है। आप तुरंत भूल सकते हैं inline-block। यह कोड बहुत स्पष्ट रूप से व्यक्त करता है कि हमें क्या चाहिए।

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

मैं कहूंगा कि फ्लेक्सबॉक्स का बड़े पैमाने पर परिचय सीएसएस के आधुनिक युग में शुरू हुआ। केवल एक अनसुलझी समस्या थी। ...

IE की धीमी, दर्दनाक मौत

IE 6 ने बहुत लंबे समय के लिए बाजार छोड़ दिया। 2010 की शुरुआत तक या तो यह बाजार के 10% से नीचे नहीं गिर सकता था (अभी भी बहुत बड़ा हिस्सा है)।

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

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

, इसलिए, यदि आपने उस वेबसाइट का समर्थन किया था जिसका उपयोग किया गया था - या बदतर, आवश्यकउपयोग के लिए - व्यवसाय से या अन्य देशों के लोगों द्वारा, आप IE के समर्थन के साथ बहुत अधिक फंस गए हैं। छोटे लोग व्यक्तिगत उपकरण और वेबसाइट बनाने के तुरंत आईई 6 संगतता को छोड़ देते हैं और IE 6 उपयोगकर्ताओं पर वेबसाइटों के लिए तेजी से अप्रिय बैनर प्रदर्शित करते हैं। ... लेकिन अगर आप एक व्यवसायी हैं, तो संभावित दर्शकों के 20% के तत्काल नुकसान की व्याख्या कैसे करें? बस और मेहनत करो!

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

YouTube टीम के अलग-अलग डेवलपर्स से अलग-अलग अनुरोध आए। अनुमति के लिए किसी से भी पूछे बिना, जुलाई 2009 में उन्होंने IE 6 उपयोगकर्ताओं के साथ एक चेतावनी बैनर जोड़ा जिसमें किसी चीज़ को स्विच किया जा सकेदूसरा, विरासत ब्राउज़र समर्थन के रूप में जल्द ही समाप्त हो जाएगा। एक महीने के भीतर, IE6 यातायात का वैश्विक हिस्सा 10% से अधिक गिर गया। सभी नायक रेनकोट नहीं पहनते हैं।

मैं उस दिन IE6 के अंत की शुरुआत को चिह्नित करता हूं जब YouTube वास्तव में IE के लिए समर्थन बंद कर देता है। यह ब्राउज़र के इस संस्करण के जारी होने के लगभग नौ साल बाद 13 मार्च 2010 को हुआ। मुझे नहीं पता कि YouTube कॉरपोरेट उपयोगकर्ताओं या दक्षिण कोरियाई सरकार को कितना प्रभावित करता है, लेकिन एक बड़ी वेब कंपनी के संपूर्ण ब्राउज़र का समर्थन करने से इनकार करने से एक बहुत ही मजबूत संदेश जाता है।

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

अभी

अभी CSS बहुत अच्छा है। आपको आस-पास की वस्तुओं को बस रखने के लिए अजीब हैक की आवश्यकता नहीं है। ब्राउज़र विकास उपकरण अब अंतर्निहित हैं और अद्भुत हैं - फ़ायरफ़ॉक्स ने आपको विशेष रूप से चेतावनी देना शुरू कर दिया है जब कुछ सीएसएस गुण अन्य गुणों के मूल्यों के कारण प्रभावी नहीं होते हैं! अस्पष्ट स्टैकिंग साइड इफेक्ट्स जैसे "स्टैकिंग कॉन्टेक्ट्स" को अब गुणों की तरह स्पष्ट रूप से सेट किया जा सकता है isolation: isolate।

वास्तव में, मैं बस आधुनिक सीएसएस सुविधाओं के बारे में दिमाग में आने वाली हर चीज को सूचीबद्ध करता हूं। यह शैलियों के सभी संभावित उपयोगों के लिए एक मार्गदर्शक नहीं है, लेकिन अगर 2008 के बाद से आपके सीएसएस ज्ञान को अपडेट नहीं किया गया है, तो मुझे उम्मीद है कि यह आपकी भूख को बढ़ावा देगा। और यह सब सिर्फ CSS है! इतना पहले जो असंभव, दर्दनाक, या आवश्यक अजीब प्लग-इन अब शुरू में समर्थित है - ऑडियो, वीडियो, फ्रीहैंड ड्राइंग, 3 डी रेंडरिंग ... जावास्क्रिप्ट के लिए विशाल एर्गोनोमिक सुधारों का उल्लेख नहीं करना।

ख़ाका

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

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

box-sizingव्यक्तिगत तत्वों के लिए IE कंटेनर मॉडल का चयन करने की अनुमति देता है यदि आपको अंतरिक्ष की एक निश्चित राशि पर कब्जा करने के लिए पूरे तत्व की आवश्यकता होती है, और सीमाओं और मार्जिन को कुल चौड़ाई से घटाया जाता है ।

display: contentsएक तत्व की सामग्री को उसके मूल तत्व के रूप में डंप करता है, जैसे कि यह बिल्कुल भी नहीं था। display: flow-root- यह मूल रूप से स्वचालित क्लीयरिक्स है, केवल एक दशक बाद।

widthअब करने के लिए सेट किया जा सकता है min-content, max-contentया एक समारोह fit-content()और अधिक लचीला व्यवहार के लिए।

white-space: pre-wrapरिक्त स्थान बनाए रखता है, लेकिन उन लाइनों को तोड़ देता है जहां अतिप्रवाह से बचने के लिए आवश्यक है। यह भी उपयोगी pre-lineहै कि यह एक के लिए रिक्त स्थान के अनुक्रम को ध्वस्त करता है, लेकिन शाब्दिक नए सिरे को संरक्षित करता है।

text-overflowसीमा से अधिक होने पर यूलिपिस (या एक कस्टम वर्ण) का उपयोग करके क्रिया पाठ को काट देता है, और न केवल इसे काटता है। विनिर्देशों में भी सुचारू रूप से छिपाने वाले पाठ का कार्य है (फीका आउट), लेकिन इसे अभी तक लागू नहीं किया गया है।

shape-outsideपाठ प्रवाह के आकार को बदलता है। यहां तक कि यह छवि के अल्फा चैनल को एक रूप में उपयोग कर सकता है।

resizeएक मनमाना तत्व देता है एक आकार बदलने वाला विवरणक (यदि यह अतिप्रवाह है)।

writing-modeपत्र की दिशा निर्धारित करता है। यदि आपके डिज़ाइन को कई मोड में संचालित करना है, तो कुछ सीएसएस गुण इसका समर्थन करते हैं, आप उन्हें मानक गुणों के विकल्प के रूप में उपयोग कर सकते हैं: inset-blockऔर inset-inlineस्थिति के लिए, block-sizeऔर inline-sizeचौड़ाई / ऊंचाई के लिए, border-blockऔर border-inlineसीमाओं के लिए, और समान गुणों को इंडेंट करने के लिए।

सौंदर्यशास्र

सीएसएस संक्रमण आसानी से एक मूल्य को प्रक्षेपित करता है जब भी यह बदलता है, चाहे एक प्रकार के प्रभाव के कारण :hoverया, उदाहरण के लिए, जावास्क्रिप्ट से जोड़ा गया एक वर्ग। सीएसएस एनिमेशन समान हैं, लेकिन स्वचालित रूप से पूर्वनिर्धारित एनिमेशन खेलते हैं। दोनों कई अलग-अलग "चिकनाई" कार्यों को लागू कर सकते हैं ।

border-radiusकंटेनर के कोनों को गोल करता है। सभी कोने अलग-अलग आकार के हो सकते हैं, और गोल या अण्डाकार भी हो सकते हैं। वक्र सीमा, पृष्ठभूमि और आयत के किसी भी छाया पर भी लागू होता है।

छाया बनाने के स्पष्ट प्रभाव के लिए कंटेनरों की छाया का उपयोग किया जा सकता है। आप insetविभिन्न स्मार्ट प्रभावों के लिए कई छाया और छाया का उपयोग भी कर सकते हैं ।

text-shadowयह क्या कहता है, हालांकि आप कुछ प्रकार की पाठ रूपरेखा बनाने के लिए कुछ छाया भी जोड़ सकते हैं।

transformआप एक तत्व के लिए एक मनमाना बहु-मंच परिवर्तन लागू करने की अनुमति देता है - वह है, स्केल, घुमाएँ, झुकाव, चाल और / या लेआउट को प्रभावित किए बिना परिप्रेक्ष्य परिवर्तन करना।

filter(IE 6 से अलग) कई विशेष दृश्य फिल्टर प्रदान करता है जिन्हें एक तत्व पर लागू किया जा सकता है। उनमें से अधिकांश रंग बदलते हैं, लेकिन वहाँ भी है blur(), और drop-shadow()(इसके विपरीत box-shadow, यह बाहरी तत्व मन पर लागू होता है, और इसके कंटेनर के लिए नहीं)।

linear-gradient()। radial-gradient(), नई और कम समर्थित conic-gradient(), अपने विकल्पोंrepeating-* - वे सभी ग्रेडिएंट इमेज बनाते हैं और सीएसएस में कहीं भी इस्तेमाल किया जा सकता है, जहां इमेज की उम्मीद की जाती है, आमतौर पर पसंद करते हैं background-image।

scrollbar-colorवर्तमान ब्राउज़र में काफी कम स्क्रॉल गति के एक अप्रिय दुष्प्रभाव के साथ, स्क्रॉल बार का रंग बदलता है।

background-size: coverऔरcontain वे आनुपातिक रूप से पृष्ठभूमि की छवि को स्केल करेंगे ताकि यह या तो पूरी तरह से तत्व को कवर करने के लिए पर्याप्त हो जाए (भले ही यह फसली हो) या अंदर फिट करने के लिए पर्याप्त छोटा हो (भले ही तत्व पूरी पृष्ठभूमि को कवर नहीं करता है)।

object-fit एक समान विचार है, लेकिन अन्य वस्तुओं जैसे <img> के लिए। उपयुक्त object-positionकार्य की तरह background-position।

कई पृष्ठभूमि का उपयोग करना संभव है, जो विशेष रूप से ग्रेडिएंट के लिए उपयोगी है - आप नीचे कई ग्रेडिएंट, अन्य बैकग्राउंड इमेज और एक ठोस रंग को स्टैक कर सकते हैं।

text-decorationपहले से अधिक विचित्र हो गया; अब आप लाइन का रंग सेट कर सकते हैं और कई अलग-अलग प्रकार की लाइनों का उपयोग कर सकते हैं, जिसमें धराशायी, बिंदीदार और लहराती भी शामिल हैं।

सीएसएस काउंटरों का उपयोग मनमाने ढंग से तत्वों की संख्या के लिए किया जा सकता है, तत्वों के किसी भी सेट पर <ol> का उपयोग करने की संभावना प्रदान करता है।

छद्म तत्व आपको ::markerएक सूची आइटम के मार्कर कंटेनर को स्टाइल करने की अनुमति देता है या यहां तक कि इसे पूरी तरह से कस्टम काउंटर के साथ बदल देता है। ब्राउज़र समर्थन अधूरा है, लेकिन सुधार कर रहा है। इसी तरह, नियम@counter-styleपूरी तरह से नई काउंटर शैली लागू करता है (उदाहरण के लिए, 1 2 3, i ii iii, ABC, आदि) जिसे आप कहीं भी उपयोग कर सकते हैं, हालांकि अभी तक केवल फ़ायरफ़ॉक्स ही इसका समर्थन करता है।

image-set()संभावित छवियों की एक सूची प्रदान करता है और ब्राउज़र को उपयोगकर्ता की स्क्रीन के पिक्सेल घनत्व के आधार पर सबसे उपयुक्त एक का चयन करने की अनुमति देता है।

@font-faceएक फ़ॉन्ट को परिभाषित करता है जिसे बाहरी स्रोत से डाउनलोड किया जा सकता है, हालांकि आप Google फ़ॉन्ट्स का उपयोग कर सकते हैं ।

pointer-events: noneतत्व पूरी तरह से माउस को अनदेखा करता है; यह मार्गदर्शन का जवाब नहीं देता है, और क्लिक इसके माध्यम से नीचे तत्व तक जाता है।

image-renderingछवि के प्रक्षेप विधि को निकटतम-पड़ोसी में बदल सकता है, हालांकि ब्राउज़र समर्थन अभी भी विषम है, और आपको कुछ ब्राउज़र-विशिष्ट गुणों को सक्षम करने की भी आवश्यकता हो सकती है।

clip-pathएक तत्व को एक मनमाने ढंग से आकार देता है। वहाँ भी है maskएक मनमाना अल्फा मुखौटा है, लेकिन ब्राउज़र समर्थन एक समान नहीं है, और यह आम तौर पर एक नहीं बल्कि जटिल प्रक्रिया है।

सिंटेक्स और सामान

@supportsआपको ब्राउज़र का समर्थन करने के आधार पर विभिन्न सीएसएस-कोड लिखने की अनुमति देता है, हालांकि वर्तमान में यह उतना उपयोगी है जितना कि 2004 में होगा।

A > Bतत्काल बच्चों का चयन करता है। A + Bभाइयों और बहनों को चुनता है। A ~ Bतत्काल (तत्व से) भाइयों और बहनों का चयन करता है। स्क्वायर ब्रैकेट विशेषताओं के आधार पर चुनने के लिए चीजों का एक गुच्छा कर सकते हैं; सबसे स्पष्ट है input[type=checkbox], हालांकि दिलचस्प चीजें संबंधित भागों के साथ की जा सकती हैं <a href>।

अब छद्म वर्गों का एक पूरा समूह हैं। उनमें से कई फार्म तत्वों के लिए हैं: :enabledऔर :disabled; :checkedऔर :indeterminate(यह भी लागू होता है <option>); :requiredऔर :optional; :read-writeऔर :read-only; :in-range/ :out-of-rangeऔर :valid/:invalid(HTML5 क्लाइंट-साइड फॉर्म सत्यापन के साथ उपयोग के लिए); :focusऔर :focus-within; और :default(जो डिफ़ॉल्ट फॉर्म बटन और किसी भी पूर्वनिर्धारित चेकबॉक्स, रेडियो बटन और <option>') का चयन करता है ।

संबंधित तत्वों के एक सेट के भीतर विशिष्ट तत्वों के लिए आवेदन के लिए :first-child, :last-childसाथ ही साथ :only-child; :first-of-type, :last-of-typeऔर :only-of-type(जहां "प्रकार" का अर्थ है टैग का नाम); है :nth-child(), और :nth-last-child(), (दूसरे, तीसरे और आगे तत्वों में से प्रत्येक का चयन करने के लिए)। चयनकर्ता को निष्क्रिय कर देता है। बच्चों के बिना और पाठ के बिना तत्वों का चयन करता है। वह तत्व चुनता है जिसके लिए URL टुकड़ा कूदता है (उदाहरण के लिए, यदि पता बार प्रदर्शित होता है:nth-of-type():nth-last-of-type()

:not():empty:targetindex.html#foo, उसी समय, वह तत्व जिसका पहचानकर्ता समान है (चयनित है foo)।

::beforeऔर ::afterअब दो कॉलनों के साथ यह इंगित करने के लिए कि वे छद्म तत्व बनाते हैं, और केवल चयनकर्ता के क्षेत्र को परिभाषित नहीं करते हैं जिससे वे संलग्न हैं। ::selectionसमायोजित करता है कि चयनित पाठ कैसे प्रदर्शित किया जाता है; ::placeholderबदलता है कि प्रतिस्थापन पाठ कैसे दिखना चाहिए (पाठ क्षेत्रों में)।

मीडिया क्वेरीज़ सिर्फ चीजों का एक पूरा गुच्छा है, ताकि आपका पृष्ठ कैसे देखे जाने के आधार पर अनुकूलित कर सके। मीडिया क्वेरी यह prefers-color-schemeबताती है कि उपयोगकर्ता का सिस्टम किसी हल्के या अंधेरे विषय पर स्थापित है या नहीं, इसलिए आप स्वचालित रूप से उसके अनुसार कॉन्फ़िगर कर सकते हैं।

आप जैसे या पारभासी रंग लिख सकते हैं#rrggbbaa#rgba, साथ ही कार्यों का उपयोग कर rgba()और hsla()।

कोणों को एक पूर्ण चक्र के अंशों के रूप में वर्णित किया जा सकता है turn। बेशक, degऔर rad(और grad) भी उपलब्ध हैं।

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

calc()एक मनमाना अभिव्यक्ति की गणना करता है और स्वचालित रूप से इसे अपडेट करता है (हालांकि इस तरह की गणना की आवश्यकता आंशिक रूप से समाप्त हो जाती हैbox-sizing)

vw, vh, vmin, औरvmax आप चौड़ाई या व्यूपोर्ट की ऊंचाई के प्रतिशत के रूप लंबाई निर्दिष्ट कर सकते हैं, या जो भी अधिक हो / कम।

Fuh! मुझे यकीन है कि मैं बहुत कुछ भूल गया हूं, और मेरे सहयोगी टिप्पणियों में सूची को पूरक करेंगे। अब मैं एमडीएन देखने से बच सकता हूं और लेख के अंतिम, मजेदार भाग पर जा सकता हूं।

थंबनेल का आधुनिक ग्रिड

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

और यह कितना सरल है:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

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

आशुलिपि संपत्ति gridथोड़ा डराने वाली लगती है, लेकिन केवल इसलिए कि यह लचीली है। वह कहता है: एक समय में ग्रिड को एक लाइन भरें, जितनी आवश्यक हो उतनी लाइनें उत्पन्न करें; फिट के रूप में कई 250px कॉलम बनाते हैं, और उनके बीच शेष स्थान को समान रूप से विभाजित करते हैं।

CSS ग्रिड भी <dl> के रखने के लिए सुविधाजनक हैं, जो ऐतिहासिक रूप से बहुत बड़ा सिरदर्द रहा है: एक <dl> में <dt> की कोई भी संख्या होती है, इसके बाद <dd> (शून्य सहित) की कोई भी संख्या होती है। पहले, यह शैली का एकमात्र तरीका थाfloat, जिसका मतलब निश्चित चौड़ाई था। अब आप केवल पहले कॉलम में <dt> और दूसरे में <dd> निर्दिष्ट कर सकते हैं, और CSS ग्रिड बाकी की देखभाल करता है।

यह एक वास्तविक पृष्ठ पर कैसे दिखता है? साइडबार के साथ वह कहानी? देखें कि यह कितना आसान है:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

किया हुआ। आसान। यह भी कोई फर्क नहीं पड़ता कि मार्कअप में विवरण को किस क्रम में सूचीबद्ध किया जाए।

दूसरी ओर

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

लेकिन बहुत बुरा यह है कि मैं अभी भी नियमित रूप से उन साइटों पर आता हूं जो जावास्क्रिप्ट का उपयोग करके पूरे लेआउट को बनाते हैं । यदि आप uMatrix स्क्रिप्ट अवरोधक का उपयोग करते हैंआपका पहला अनुभव पाठ का एक गुच्छा है जो पाठ के एक और समूह को ओवरलैप करता है। क्या यह वास्तव में एक कदम पीछे है? यह क्या है कि शीर्षक और साइडबार को सही ढंग से केवल तभी पोस्ट किया जाता है जब स्क्रिप्ट निष्पादित होती है? यह सीएसएस के बिना पेज लोड करने जैसा नहीं है - सादे HTML में, डिफ़ॉल्ट रूप से कुछ भी ओवरलैप नहीं हो सकता है! आपको जानबूझकर ऐसा करने का संकेत देना चाहिए!

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

यहां तक कि Google डॉक्स / शीट्स / आदि के संस्करणों में भी। Android के लिए, उदाहरण के लिए, वेब संस्करणों की क्षमताओं का केवल 5%। मुझे नहीं पता कि इसके साथ क्या करना है।

भविष्य के लिए अपूर्ण विकल्प

मुझे नहीं पता कि सीएसएस आगे कैसे विकसित होगा, विशेष रूप से अब कि फ्लेक्सबॉक्स और ग्रिड ने हमारी सभी समस्याओं को हल कर दिया है। अस्पष्ट रूप से जानते हैं कि कुछ काम अधिक व्यापक गणितीय समर्थन पर चल रहे हैं, और संभवतः रंग बदलने के लिए कुछ कार्य, जैसे कि सास में। एक पेंटिंग एपीआई है जो आपको कैनवस एपीआई का उपयोग करके जावास्क्रिप्ट का उपयोग करके मक्खी पर एक पृष्ठभूमि उत्पन्न करने की अनुमति देता है, जो कि ... बहुत अच्छा है। जाहिर है, विनिर्देश में मुझे पहले से ही attr()किसी भी संपत्ति के मूल्य की गणना करने के लिए मिला है। यह अच्छा लगता है और यहां तक कि आप सीएसएस में HTML तालिकाओं को पूरी तरह से लागू करने की अनुमति दे सकते हैं, लेकिन आप चर के साथ भी ऐसा कर सकते हैं। मेरा मतलब है, ठीक है, "कस्टम गुण" (आधिकारिक नाम)। मैं :is()चयनकर्ता सूचियों और सबग्रिड के मिलान से अधिक चिंतित हूंनेस्टेड सबनेट के लिए।

उन चीजों को सूचीबद्ध करना बहुत आसान है जो योजनाओं में थे, लेकिन उन्हें लागू नहीं किया गया है।

प्रदर्शन: रन-इन संस्करण 2 (98 वें में वापस) के बाद से सीएसएस का हिस्सा रहा है, लेकिन यह ज्यादातर समर्थित नहीं है। विचार यह है कि एक ब्लॉक अगले में डाला जाता है। उदाहरण के लिए, यह कोड:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
ऐसे आउटपुट के अनुरूप:

शीर्षक अनुच्छेद
अनुच्छेद

और, हम्म, मैं समझने लगा हूं कि यह क्यों समर्थित नहीं है। यह WebKit में मौजूद था, लेकिन यह शायद इतना अक्षम था कि इसे छह साल पहले हटा दिया गया था।
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

आप अब भी यहीं हैं? अब यह सब खत्म हो गया है। घर जाने का समय।

और, शायद, Blink के साथ टकराव पर अपना योगदान देने का उपयोग कर मोनोकल्चर बनाने फ़ायरफ़ॉक्स , सहित फोन पर , अगर किसी कारण से आप एक iPhone है, जो आम तौर पर अन्य ब्राउज़र इंजन पर प्रतिबंध लगाता है का उपयोग नहीं कर रहे हैं। यह माइक्रोसॉफ्ट द्वारा किए गए किसी भी काम से बहुत बुरा है, लेकिन हम इसे किसी कारण से स्वीकार करते हैं ...

पुराना और नया सीएसएस। वेब डिज़ाइन का इतिहास