أصبحت مهتمًا بتصميم وتطوير الويب في أواخر التسعينيات. لعنة ، منذ متى. وكم كانت فظيعة. أعني أن إنشاء موقع ويب ونشره كان عملًا صعبًا ، ويمكن عد العملاء على الأصابع.

يبدو لي أن معظم المطورين يتذكرون تلك الأيام ، أو على الأقل العقد المقبل ، ولكن لا. لقد صادفت مؤخرًا تغريدة ، فوجئ مؤلفها بتقنية إعداد الزوايا الدائرية قبل الظهور border-radius(قم بعمل صورة منفصلة لكل زاوية مستديرة ووضعها بدقة). ما زلت أتذكر كيف انتظرنا مع التنفس المتأخر عندما border-radiusأصبح المعيار وتمت إزالة البادئة في المتصفحات منه.

من ناحية أخرى ، حاول الكثير تصميم مواقع الويب قليلاً في الأيام الخوالي ويعتقدون أن لا شيء تغير منذ ذلك الحين.

هذه المقالة للجميع. تاريخ CSS وتصميم الويب ، كما أتذكره.

(يرجى الانتباه إلى أن الذكريات والأبحاث متشابكة بشكل وثيق في هذه المقالة. لذلك ، لا يمكنني أن أضمن أن كل شيء تم إعداده بشكل صحيح حقًا ، خاصة فيما يتعلق بالسببية. يمكنك قراءة سجل CSS الرسمي من W3C ، وهو أقصر بكثير وأفضل التطابقات الواقع ويحتوي على لعنات أقل بكثير).

(بالإضافة إلى ذلك ، ستستفيد المقالة بشكل كبير من المزيد من الرسوم التوضيحية ، ولكن كتابة النص استغرق مني الكثير من الوقت).

الأيام الأولى

لم يكن هناك CSS في البداية.

كان سيء جدا.

الأداة المفضلة لدي في هذا العصر هي كتاب O'Reilly ، الذي درسته HTML: الدليل النهائي . تم نشر العديد من إصدارات هذا الدليل في منتصف وأواخر التسعينات. يتحدث الكتاب عن HTML فقط ، دون ذكر CSS على الإطلاق. لم أعد أحتفظ به بعد الآن ولا يمكنني العثور على عمليات مسح على الإنترنت ، ولكن هناك صفحة من الإصدار الأحدث من هذا الكتاب HTML & XHTML: The Definitive Guide (سنتحدث عن XHTML لاحقًا). فيما يلي نصائح لتصميم مواقع الويب المتطورة من التسعينيات:

"سلط الضوء بوضوح على رأس وتذييل الصفحة بخطوط أفقية."

لا ، هذا ليس هوborder-top. ذلك<hr>. يكاد يكون من المؤكد أن عنوان الصفحة يتم توسيطه<center>.

الصفحة لها خلفية قياسية ، ولون الخط ولون النص. جزئيا لأن هذا الدليل يقدم أولا المفاهيم الأولية ؛ جزئياً لأنه كتاب أبيض وأسود ، وجزئياً لأنه يعكس الواقع - تلوين شيء ما على الصفحة كان البواسير الضخمة.

لنفترض أنك تريد جعل جميع الرؤوس حمراء. للقيام بذلك ، ضع العلامات التالية:

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

... لكل عنوان . آمل ألا تقرر أبدًا التبديل إلى اللون الأزرق!

أوه ، وكتبت علامات HTML مخصصة بحروف كبيرة. لا أتذكر لماذا قررنا جميعًا أنها فكرة جيدة. ربما كان ذلك قبل ظهور تمييز بناء الجملة في برامج تحرير النصوص (كان عمري 12 عامًا واستخدمت المفكرة) ، ومن السهل تمييز علامات العناوين عن النص الرئيسي.

وبالتالي ، فإن الحفاظ على الموقع كان كابوسًا حقيقيًا. قرر الكثير أنه من الأسهل عدم استخدام أي تصميم ، فقط الإعدادات الافتراضية. إلى حد ما ، كان الأمر لطيفًا: تسمح لك المتصفحات بتغيير هذه القيم الافتراضية ، بحيث يمكنك قراءة النص على الإنترنت بالشكل الذي تريده.

أتذكر كيف ظهر حل بديل مثير للاهتمام في العديد من مواقع Geocities: مظهر جديد تمامًا لكل صفحة ويب جديدة. اللعنة ، صحيح؟ فقط افعل ما تريد في كل صفحة جديدة.

ربما كان هذا هو ذروة تصميم الويب.

الجحيم ، أفتقد تلك الأيام. شبكة مفتوحة بالكامل ، لا يوجد تويتر ، ولا الفيسبوك. إذا كان لديك ما تقوله ، يجب عليك إنشاء موقع الويب الخاص بك. كان ذلك رائعًا. لم يكن أحد يعرف ماذا يفعل. أراهن على أن الغالبية العظمى من مصممي الويب في ذلك الوقت كانوا مراهقين هواة جاهلين (مثلي) ينسخون صفحات من مراهقين هواة جاهلين آخرين. كان نصف الإنترنت عبارة عن بوابات من صنع المعجبين حول الرسوم المتحركة ، مع شاشات تحذير لا يمكن تفسيرها تفيد بأن الموقع يعمل بشكل أفضل مع دقة شاشة تبلغ 640 × 480 (من المفترض أن كل شخص عمره 12 عامًا مع دقة شاشة غير كافية يجب أن يشتري شاشة جديدة). يستخدم جميع الأشخاص الرائعين Internet Explorer 3 - المتصفح الأكثر تقدمًا. ومع ذلك ، لا يزال بعض الخاسرين جالسين في Netscape Navigator ، لذا في الصفحة الرئيسية ، تحتاج إلى وضع ملف GIF المتحرك "الأفضل في IE".

لقد كانت أيضًا عصر "الألوان الآمنة للإنترنت" - لوحة مكونة من 216 لونًا ، حيث تساوي كل قناة00، 33، 66، 99، ccأو ff، لأن البعض لا يزال هناك شاشة 256 لونًا! اليوم لا نفكر في ذلك ، مع الأخذ في الاعتبار اللون 24 بت.

في الواقع ، كان الكثير مما نعتبره الآن أمرا مفروغا منه وغير مفهوم. هل تريد نفس التنقل في كل صفحة من صفحات الموقع؟ حسنًا ، لا توجد مشكلة: انسخ / الصق رمز التنقل في كل صفحة. إذا قمت بتحديث هذا الرمز ، فتأكد من تحديث كل صفحة - ولكن على الأرجح ستنسى القيام بذلك في بعض الصفحات ، وسيبدو الموقع كموقع أثري ، مع عدة طبقات من الصفحات من "عصور" مختلفة.

من الأسهل استخدام الإطارات.عندما يتم تقسيم نافذة المتصفح إلى شبكة ويتم تحميل صفحة منفصلة في كل خلية ... ولكن بعد ذلك يتم الخلط بين الأشخاص إذا وصلوا إلى صفحة منفصلة بدون إطارات ، كما هو الحال غالبًا عندما يأتون من محرك بحث مثل AltaVista (لا أصدق أن أشرح الإطارات ، ولكن لم يستخدمها أحد حقًا منذ عام 2001 ... هل تعرف ما هي إطارات iframe؟ هنا الحرف "i" يعني المضمنة ، أي الإطارات المدمجة لتمييزها عن الإطارات العادية على الشاشة بأكملها).

لم تحصل PHP على هذا الاسم حتى الآن ، ولم يسمع به أحد. كان من الصعب حقًا فهم هذا المزيج الغريب من Perl و CGI ، ولم يعمل على جهاز الكمبيوتر الخاص بك ، وكان من الصعب العثور على الأخطاء وتشخيصها ، ولم تدعمها Geocities على أي حال. إذا كنت حقًا مطورًا محظوظًا ومتقدمًا ، فقد عمل مضيفك على خادم الويب Apache ، وبعد ذلك يمكنك استخدام لغة التجميع الديناميكي المضمنة في جانب الخادم وتضمين شيء مثل هذا:

<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>

لا بأس. سيرى Apache تعليقات خاصة ويدرج محتويات الملفات المشار إليها. العيب هو أنه لا يمكنك التحقق من أي شيء على جهاز الكمبيوتر الخاص بك ، فقد كان كل التنقل مفقودًا ، لأن متصفح الويب الخاص بك فسر هذه التعليمات على أنها تعليقات HTML عادية. بالطبع ، كان من المستحيل تثبيت Apache في المنزل ، لأن لديك جهاز كمبيوتر ، وليس خادمًا .

لسوء الحظ ، اختفت جميع المواقع القديمة لفترة طويلة وأصبحت مغطاة في رماد التاريخ ، حيث كان كل شيء لم يتم فعله هذا الأسبوع قديمًا ونسيًا منذ فترة طويلة. كان من المفترض أن تجعل الويب المعلومات أبدية ، ولكن بدلاً من ذلك ، أصبح الكثير منها سريع الزوال. افتقد تلك الأوقات عندما كان لجميع أصدقائي تقريبًا مواقعهم الخاصة. يعد Twitter و Instagram كوجود عبر الإنترنت بديلاً ضعيفًا.

... فلنلق نظرة على موقع Space Jam.

مثال: Space Jam

إذا كنت لا تعرف ، فإن Space Jam هو أفضل فيلم على الإطلاق. يتحدث عن مهنة كرة السلة قصيرة الأجل للغاية للأرنب باغز باني ، الذي ، مع مايكل جوردان الحي ، ينقذ الكوكب من نوع من التهديد من الأجانب. ثم جاءت سلسلة من ناجحة جدا ومضحك للغاية عواقب ل هذا الفيلم.

ونحن محظوظون حقًا أنه بعد مرور 24 عامًا على إطلاقه ، لا يزال موقع Space Jam يعمل ! هنا والآن لدينا الفرصة لدراسة أفضل إنجاز لتصميم الويب لنموذج 1996.

أولاً ، لاحظ أن كل صفحة من صفحات الموقع ثابتة. وهذه صفحة ثابتة بامتداد .htmلا.htmlلأنه قبل Windows 95 كنا لا نزال مرتبطين بأسماء ملفات 8.3 (ثمانية أحرف للاسم وثلاثة أحرف للملحق). لا أعرف سبب أهمية ذلك في عنوان URL ، لأنه لم يكن أحد يشغل Windows 3.11 على خادم ويب ، ولكن لا بأس.

إليك CSS للصفحة الرئيسية:

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

هاها ، أنا أمزح فقط! ما نوع CSS الجحيم؟ تم إصدار "Jam Cosic Jam" قبل شهر من نشر هذا المعيار (في الواقع ، هناك سطر واحد في شفرة المصدر للصفحة ، لكنني متأكد من أنه تمت إضافته في وقت لاحق لربط بعض الروابط بالقواعد التي يلزم إدراجها بسبب الإلتزامات القانونية).

انتبه إلى الموقع الدقيق للغاية للارتباطات التشعبية للتنقل. تم تحقيق هذا الإنجاز بنفس الطريقة التي تم بها الجميع في عام 1996: استخدام الجداول.

في الواقع ، تتمتع الجداول بميزة وظيفية واحدة على CSS في التخطيط ، وهو أمر مهم جدًا في تلك الأيام ، لأنه مع الضغط على Ctrl ، يمكنك تحديد خليةالجداول أو حتى القليل. يوضح هذا المصحح الغريب "الرجعية" كيفية وجود الخلايا في التخطيط. لقد كان رائعًا لأن أول مصحح أخطاء Firebug العادي لم يظهر إلا في عام 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>لضبط وضع رأسي على سطر واحد، عند الضرورة.

يمكن العثور على قطع أثرية رائعة أخرى على الصفحة ، بما في ذلك رأس يحتوي على بناء Apache SSI! يجب أن يكون قد كسر بهدوء للجميع عندما انتقل الموقع إلى الاستضافة لسنوات عديدة من حياته. الآن يتم استضافتها على Amazon S3. تعلمون جيدا الأمازون؟ مكتبة؟

<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>

حسنًا ، انظر إلى صفحة Jam Central . من أجل المصداقية ، قمت بتقليل الدقة في المستعرض إلى 640 × 480 (على الرغم من أنه من أجل الانغمار الكامل ، كان يجب أن أحفظ مساحة رأسية أكبر قليلاً لشريط العنوان وشريط المهام وخمسة إلى ستة أشرطة أدوات IE).

انتبه إلى الإطارات: يؤدي الشعار الموجود في الزاوية العلوية اليسرى إلى الصفحة المقصودة ، مما يحفظ مكانًا على الشاشة بشكل صحيح حتى لا يتكرر كل هذا التنقل ، وفي الزاوية اليمنى العليا يوجد لافتة إعلانية سخيف تم حظرها بسبع طرق مختلفة. الأجزاء الثلاثة هي صفحات منفصلة.

لاحظ أيضًا النص الأحمر غير المقروء تمامًا على خلفية مزخرفة ، وهي واحدة من أضمن علامات تصميم الويب في التسعينيات. قد تسأل ، لماذا لا تستخدم خلفية طبيعية للنص؟ انت أحمق. كيف افعلها؟ بعد كل شيء ، السمة backgroundهي فقط مع <body>! يمكنك وضع طاولة ، لكن الطاولات تدعم خلفية صلبة فقط ، ستبدو مملة!

ولكن انتظر ، ما هي أداة التنقل الجديدة هذه؟ كيف تمكنت من تعليق جميع الروابط؟ طاولة أخرى؟ حسنًا ، لا ، على الرغم من أن المصممين غالبًا ما ملأوا الطاولة بقطع من صورة شرائح. ولكن هنا لدينا imagemap من وظيفة 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. سنعود إلى هذا اللغز الصغير لواجهة المستخدم عدة مرات ؛ يمكنك مشاهدة أمثلة حقيقية (وشفرة المصدر مع ترميز العينة) في صفحة منفصلة .

دعونا نلقي نظرة على حجم إطارات "كاملة الحجم ، بالألوان الكاملة ، وجودة الإنترنت" من الفيلم من أجل الاهتمام.

مهلا ، نعم هم أقل من 16 كيلو بايت! سيتم تحميل هذه الصورة بشكل أسرع من تسع ثوان!

(أتذكر مشكلة الفيديو المضمّن ، ولم يكن من الممكن حلها حتى ظهرت علامة HTML5 <video>بعد بضع سنوات. حتى ذلك الحين ، كان علي استخدام بعض المكونات الإضافية ، وكانت كلها رهيبة).

(نعم ، بالمناسبة: تمت إضافة إطار ملون إلى الصور داخل الروابط افتراضيًا. هنا ، يظهر الارتباط بوضوح ، لذلك يبدو الإطار فائضًا ومزعجًا. قبل CSS ، يجب تعطيلها لكل صورة فردية باستخدام السمة <img border=0>).

التخطيط المعتاد لتلك الأوقات

هنا بدأنا ، وامتص. إذا كنت تريد نمطًا شائعًا على أكثر من بضع صفحات ، فقد كانت إمكانياتك محدودة للغاية ، وظل لصق النسخ هو الأداة الوحيدة. اختار موقع Space Jam عدم القلق بشأن اتساق التصميم على الإطلاق - مثل العديد من المواقع الأخرى.

ثم جاءت CSS. لقد كانت معجزة حقيقية . اختفت كل هذه التكرارات في كل صفحة. هل تريد جعل جميع عناوين المستوى الأعلى للون معين؟ ليس هناك أى مشكلة:

H1 {
    color: #FF0000;
}

بام! وكل شيء. بغض النظر عن عدد العناوين الموجودة <h1>في المستند الخاص بك ، سيكون كل منها أحمر حارًا ، ولن تضطر أبدًا إلى التفكير في الأمر مرة أخرى. والأفضل من ذلك: يمكنك وضع هذا الجزء في ملفك وتطبيق هذا الخيار الجمالي المريب على كل صفحة من موقعك دون أي جهد تقريبًا! وينطبق الشيء نفسه على خلفية البلاط الرائعة ولون الرابط وحجم الخط في الجداول.

(تذكر فقط التفاف محتويات العلامات <style>في تعليقات HTML ، وإلا ستعرضها المتصفحات القديمة التي لا تدعم CSS كنص).

ليس من الضروري تطبيق العلامات على كل شيء على التوالي. قدم CSS مفهومي "الفئات" و "ID" ، لذلك يمتد النمط فقط إلى العناصر المميزة بشكل خاص. محدد النوعP.importantينطبق فقط على فقرات الفصل الدراسي <P CLASS="important">، ولكنه #headerيؤثر فقط <H1 ID="header">(الفرق هو أن المعرفات يجب أن تكون فريدة في المستند ، ويمكن استخدام الفئات في أي عدد من المرات). باستخدام هذه الأدوات ، يمكنك إنشاء علاماتك الخاصة بك بشكل فعال ، والحصول على نسخة فردية من HTML فريدة لموقعك!

لقد كانت قفزة كبيرة إلى الأمام ، ولكن في ذلك الوقت لم يفكر أحد (على الأرجح) في استخدام CSS للتخطيط. عندما تم نشر توصية CSS 1 في 96 ديسمبر ، لم يلمسها تخطيطًا على الإطلاق ، فقد فصلت وظائف HTML الموجودة فقط عن العلامات التي تم إرفاقها بها. كان لدينا ألوان الخطوط والخلفية بفضل <FONT COLOR>و<BODY BACKGROUND>. الشيء الوحيد الذي أثر على الأقل عن بعد على موقع الأشياء على الصفحة هو الخاصية floatالمكافئة <IMG ALIGN>، التي سحبت الصورة إلى الجانب وتضمنت تدفق النص حولها ، كما هو الحال في الصحف. ليست مثيرة للإعجاب.

لكن هذا ليس مفاجئا. لم تكن هناك أدوات تخطيط حقيقية في HTML باستثناء الجداول ، وخصائص الجدول من الصعب للغاية التعميم في CSS أو ربطها ببنية العلامات ، لذلك لم يكن هناك شيء نضيفه إلى CSS 1. لقد قمنا بأتمتة القليل ، على سبيل المثال ، استخدام العلامات <FONT>، لذلك تصميم الويب أصبحت أقل مملة وأقل عرضة للخطأ ، أصبحت شفرة الصفحة أنظف وأسهل بكثير في الحفاظ عليها. خطوة جيدة إلى الأمام ، وقبلها الجميع بسعادة ، لكن الجداول ظلت الأداة الرئيسية للتخطيط.

ومع ذلك ، كان ذلك طبيعيا. بشكل عام ، تحتاج مدونتك فقط إلى عنوان وشريط جانبي. تعمل الجداول بشكل جيد مع هذا ، وهذا الهيكل الأساسي مناسب لمعظم المواقف. ليس من الصعب نسخ / لصق بضعة أسطر <TABLE BORDER=0>و <TD WIDTH=20%>.

لعدة سنوات ، كان هذا هو المعيار. جداول للتخطيط ، CSS لـ ... حسنًا ، للأناقة. الألوان والأحجام ، والخط العريض ، والتسطير. كان هناك حتى مثل هذه الحيلة الغبية عندما تم التأكيد على الارتباط فقط عندما كان مؤشر الماوس فوقها. الجمال!

(حقيقة ممتعة: كود HTML لمعظم خدمات البريد الإلكتروني لم يأت بعد من تلك الحقبة).

(ثم جئت إلى الصناعة ، في سن البلوغ البالغة من العمر 11 عامًا ، دون معرفة ما كنت أفعله ، ودرست بشكل أساسي مع أطفال آخرين في سن 11 عامًا لم يكن لديهم أي فكرة عما يفعلونه. تم إنشاء جزء ضخم من الشبكة من قبل 11 عامًا الأطفال الذين يصنعون مواقعهم الخاصة ، وكان ذلك رائعًا. لماذا تذهب إلى موقع تجاري إذا كان بإمكانك التعرف على هواية محددة جدًا لرجل أو فتاة من الجانب الآخر من الكوكب؟)

اوقات مظلمة

بعد عام ونصف ، في منتصف عام 1998 ، قدم لنا CSS 2 (بالمناسبة ، أحب الخلفية في تلك الصفحة). كان هذا تحديثًا متواضعًا ، أزال بعض أوجه القصور في مناطق مختلفة ، ولكن الأكثر إثارة للاهتمام كان إضافة زوج من بدائل تحديد المواقع: positionسمحت لك الخاصية بوضع العنصر في إحداثيات دقيقة ، inline-blockوسمح لك وضع العرض بترتيب الكتل في صف واحد تلو الآخر.

هذه فاكهة محيرة ، ولكن لا يمكن الوصول إليها! positionبدا الاستخدام عاديًا ، لكن تحديد الموقع بدقة بالبكسل يتعارض بشكل خطير مع تصميم HTML المرن ، وعندما يتم تغيير حجم الشاشة ، ينهار كل شيء بالضرورة أو تنشأ عيوب خطيرة أخرى. بدا هذا المتواضعinline-block مثيرة للاهتمام الى حد بعيد؛ ومع ذلك ، فقد حل المشكلة الرئيسية لتخطيط HTML ، والتي تتمثل في وضع الأشياء على التوالي. ولكن في البداية ، لم يقم أي متصفح بتنفيذ هذه الخاصية ، لذلك تجاهلها المصممون.

لا أستطيع أن أقول على وجه اليقين لأي سبب - ربما بسبب ظهور الموضع أو تحت تأثير عامل آخر ، ولكن في ذلك الوقت ، قرر المتحمسين محاولة إنشاء تخطيط باستخدام CSS. من الناحية المثالية ، يمكنك فصل محتوى صفحتك تمامًا عن مظهرها. حتى أنه كان هناك موقع ويب CSS Zen Garden (لا يزال على قيد الحياة) ، والذي أخذ هذه الفكرة إلى أقصى حد. عليه ، يتم تحويل نفس كود HTML إلى مشاريع مختلفة تمامًا بعد تطبيق أوراق أنماط مختلفة.

كانت المشكلة أن دعم CSS المبكر كان عربات التي تجرها الدواب إلى حد كبير. إذا نظرنا إلى الوراء ، أعتقد أن مطوري المتصفح قاموا ببساطة بتكرار معالجة علامات HTML وانتهى الأمر بهذا. لا يزال موقع RichInStyle يحتوي على قائمة واسعة من أخطاء CSS في المتصفحات في تلك السنوات. هنا بعض ما افضل:

يتجاهل 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؟ ها.

ومع ذلك ، كانت شعبية هذه الفكرة تتزايد. حتى أنها أصبحت نوعًا من شعار توحيد الجزء المتقدم من النخبة المصممة - أفضل الممارسات ، التي تم الاستشهاد بها باعتبارها الحجة الحقيقية الوحيدة في النقاش. وقالوا إن استخدام الجداول للتخطيط سيء. تخلط الجداول بين قارئي الشاشة (قارئات الشاشة) ، فهي غير صحيحة لغويًا ، وتتفاعل بشكل سيئ مع وضع CSS! كل هذا صحيح ، ولكن كان من الصعب قبوله.

حسنًا ، عد إلى ذلك خلال دقيقة. أولاً ، دعنا نلقي نظرة على بعض الأجواء التي تطور فيها تطوير الويب في منطقة 2000.

نهاية حروب المتصفح والركود اللاحق

النسخة القصيرة هي: كسبت Netscape أموالاً من بيع متصفح Navigator (مدفوع للأعمال التجارية ، مجانًا للاستخدام الشخصي) ، ثم دخلت Microsoft السوق باستخدام Internet Explorer مجاني تمامًا ، وبعد ذلك كان لدى Microsoft الجرأة لتوصيل IE بـ Windows. هل يمكنك أن تتخيل؟ هل تعمل مع متصفح ؟ وكان ذلك صفقة كبيرة. دعوى قضائية ضد مايكروسوفت ، خسرت ، ولكن نتيجة لذلك ، لم يتغير شيء تقريبًا.

فعلت Microsoft ما تريده على أي حال ، وعملت. لقد دمرت عمليا نتسكيب. كان كلا المستعرضين عربات التي تجرها الدواب بشكل هائج ، ولكن عربات التي تجرها الدواب بطرق مختلفة. لذلك ، من شبه المؤكد أن موقعًا تم اختباره في متصفح واحد سينهار في متصفح آخر. وهذا يعني أنه عندما انخفضت حصة Netscape في السوق ، اهتم مصممو الويب بقدر أقل من الاهتمام ، بحيث تم فتح عدد أقل من مواقع الويب بشكل طبيعي فيها ، ونتيجة لذلك انخفضت حصة Netscape Navigator بشكل أكبر.

ربما ليست أخبارًا جيدة جدًا للمستخدمين على أنظمة التشغيل بخلاف Windows. وهو أمر مضحك لأنه كان IE 5.5 لنظام التشغيل Mac ، وكان بشكل عام عربات التي تجرها الدواب أقل من IE 6 (بالمناسبة ، لم يكن بيل جيتس في ذلك الوقت مهووسًا رائعًا كرجل أعمال عدواني لا يرحم والذي صنع ثروة ل تعمد تدمير أي منافسة تقف في الطريق ، والتي تسببت في نهاية المطاف في إلحاق الضرر بالصناعة بأكملها ، وهذا هو ، بالمناسبة).

عندما ظهر Windows XP مع Internet Explorer 6 في منتصف عام 2001 ، تحول Netscape Navigator من Juggernaut ضخم إلى قزم صغير للتطبيقات المتخصصة.

وبعد ذلك ، بعد أن سيطرت السوق بالكامل وبشكل كامل ، توقفت Microsoft. تم إطلاق Internet Explorer منذ إنشائه كل عام أو نحو ذلك ، ولكن بعد IE 6 كان هناك تأخير لأكثر من خمس سنوات. لا تزال عربات التي تجرها الدواب ، ولكن في غياب المنافسين لم يكن واضحا. وبالتالي ، بدا نظام التشغيل Windows XP جيدًا بما يكفي للاستحواذ على سوق أجهزة الكمبيوتر المكتبية ، كما أن الإصدار التالي من نظام التشغيل Windows لم يتم طرحه في نفس الوقت تقريبًا.

توقف أيضًا عن عمل اتحاد W3C ، الذي يقبل المعايير (لا يجب الخلط بينه وبين W3Schools و SEO leeches). في منتصف التسعينات ، تم تعديل HTML عدة مرات ، ثم تم تجميده كملف HTML 4. تم تحديث CSS من الإصدار الأول إلى الإصدار الثاني في عام ونصف فقط ، ولكنه تجمد أيضًا على هذا. تحديث ثانوي لـ CSS 2.1لن تصل إلى حالة "توصية المرشح" حتى بداية عام 2004 ، واستغرق الأمر سبع سنوات أخرى لقبول النسخة النهائية.

في هذه الحالة من الهيمنة الكاملة على IE 6 ، بدا أن الشبكة بأكملها تبدو مجمدة في الوقت المناسب. المعايير لا تهم ، لأنه في الواقع كان هناك متصفح واحد فقط. كل ما فعله أصبح المعيار الفعلي. مع تزايد شعبية الإنترنت ، جعلت قبضة الاختناق IE أيضًا من الصعب استخدام أي نظام أساسي بخلاف Windows ، حيث كان IE متاحًا فقط لـ Windows. لم يكن من الممكن أبدًا ضمان عمل الموقع في أي متصفح آخر.

(هناك فكرة أن الاحتكارات سيئة. يجب أن يكون هناك نوع من القانون ضدها!)

في الوقت نفسه ، ساءت Netscape موقفها ، بعد أن بدأت في تغيير على نطاق واسع للمحرك. ونتيجة لذلك ، تم إصدار معيار Netscape 6 الأكثر اتساقًا ، وكان السعر بضع سنوات من الغياب عن السوق ، حيث واصلت شركة IE في ذلك الوقت زيادة حصتها. لن يصل متصفح Netscape 6 إلى 10٪ أبدًا ، بينما سيصل IE إلى 96٪. من ناحية أخرى ، خرج المحرك الجديد بمصادر مفتوحة كجزء من Mozilla Application Suite ، والتي ستلعب دورًا في وقت لاحق.

ولكن قبل ذلك كانت هناك بضع سنوات أخرى ، ولكن في الوقت الحالي ...

وضع التوافق

كانت جميع تطبيقات CSS المبكرة في المتصفحات مليئة بالأخطاء. ولعل أكثرها شهرة هو وجود خلل في نموذج الصندوق.

كما ترى ، الحاوية (المساحة المستطيلة التي يشغلها عنصر) لها أبعاد عديدة: عرضها وارتفاعها ، ثم الحشو ، ثم حد اختياري ، ثم الحقل الذي يفصلها عن الحاويات المجاورة. يشير CSS إلى أن كل هذه المسافات تتكدس معًا. على سبيل المثال ، حاوية ذات الأنماط التالية:

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

... سيبلغ عرضه 124 بكسل ، من الحدود إلى الحدود.

ومع ذلك ، اتخذ IE 4 و Netscape 4 نهجًا مختلفًا: فقد نظروا إلى العرض والارتفاع كبعد من الحد إلى الحد ، حيث يتم طرح الحدود والهوامش للحصول على عرض العنصر نفسه. يبلغ عرض نفس الحقل في هذه المتصفحات 100 بكسل من الحد إلى الحد ، وسيبقى 76 بكسل للمحتوى.

قررت IE 6 تصحيح هذا التناقض مع المواصفات. لسوء الحظ ، فإن إجراء تغييرات من شأنه أن يكسر تصميم عدد من مواقع الويب التي عملت بشكل جيد في كل من IE و Netscape.

لذلك ، توصل فريق IE إلى حل وسط غريب للغاية: لقد أعلنوا عن السلوك القديم (إلى جانب العديد من الأخطاء الرئيسية الأخرى) باعتباره "وضع التوافق" (وضع المراوغات ، حرفيا "العمل مع المراوغات") وتشغيله بشكل افتراضي . للتبديل إلى الوضع "الصارم" أو "القياسي" الجديد ، كان من الضروري تحديد "doctype" في بداية المستند ، قبل الوسم <html>. بدا شيء من هذا القبيل:

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

لسنوات عديدة ، كان على الجميع إدراج هذا السطر الغبي في بداية كل مستند HTML (ستقوم HTML5 فيما بعد بتبسيطه <!DOCTYPE html>). إذا فكرت في الأمر ، فهذه طريقة غريبة حقًا لاختيار سلوك CSS الصحيح. كان إعلان doctype جزءًا من مواصفات HTML منذ منتصف التسعينات ، ولكن لم يستخدمه أحد . أعتقد أن فكرة Microsoft كانت السماح بالاختيار دون إدخال ملحقات خاصة. يمكن أن يؤدي استخدام مثل هذا الإعلان إلى تجنب السلوك الذي كان خاطئًا في البداية. خروج ملائم لفريق IE!

الشيء المضحك هو أن وضع التوافق مع "المراوغات" لا يزال موجودًا. ولا يزال مثبتًا بشكل افتراضيفي جميع المتصفحات ، بعد عشرين سنة! تم تغيير القائمة الدقيقة "المراوغات" بمرور الوقت. على وجه الخصوص ، لا يستخدم Chrome ولا Firefox نموذج حاوية IE حتى في هذا الوضع ، ولكن تتم محاكاة العديد من الأخطاء الأخرى.

تحتوي المتصفحات الحديثة أيضًا على وضع "قياسي تقريبًا" يحاكي ميزة واحدة فقط. ربما تكون هذه هي ثاني أكثر وظيفة فاضحة: إذا كانت خلية الجدول تحتوي على صورة فقط ، فسيتم حذف المساحة أدناه. وفقًا لقواعد CSS المعتادة ، تكون الصورة في السطر (الفارغ) من النص ، الأمر الذي يتطلب بعض المساحة أدناه - للعناصر بين السطور من الأحرف ، مثل "y". تعذر على المتصفحات المبكرة التعامل مع هذا بشكل طبيعي ، ومع ذلك ، اعتمدت بعض مواقع الويب التي تم إنشاؤها بعد حوالي 2000 على هذه الميزة ، على الرغم من أن كل شيء آخر كان متوافقًا تمامًا. على سبيل المثال ، قاموا بقص صورة كبيرة إلى قطع ، والتي تم وضعها في خلايا الجدول بالقرب من بعضها البعض. إذا أضفت مساحة فارغة ، وفقًا للمعيار ، فسوف تنهار الصورة.

ولكن نعود إلى الماضي. على الرغم من أن المعايير سادت بشكل رسمي ، إلا أنها خلقت مشكلة جديدة. نظرًا لأن IE 6 سيطر على الويب ، وكانت إعلانات DOCTYPE اختيارية ، لم يكن من الضروري التفكير في دعم هذه المعايير في "الوضع الصارم" للمتصفح. في النهاية ، قامت المتصفحات الأخرى بمحاكاة ذلك ، وأصبح السلوك المخصص هو المعيار الواقعي. أطلق مصممو الويب الذين اهتموا بمثل هذه الأشياء (على حسابنا ، كان هناك الكثير منا) حملة رفيعة المستوى لتمكين الوضع الصارم ، حيث كانت هذه خطوة أولى ضرورية للغاية لضمان التوافق مع المتصفحات الأخرى.

XHTML Rise and Fall

وفي الوقت نفسه ، فقد W3C الاهتمام بـ HTML لصالح XHTML. هذه محاولة لإعادة تصميم HTML باستخدام بناء جملة XML بدلاً من SGML.

(ما هو SGML ، تسأل؟ لا أعرف. لا أحد يعرف. هذا هو النحو الذي تم بناء HTML عليه ، وهذا هو الشيء الوحيد المعروف عنه).

بالنسبة للائتلاف ، كانت هناك في ذلك الوقت أسباب وجيهة إلى حد معقول لاتخاذ مثل هذا القرار. كقاعدة ، تم كتابة HTML يدويًا (كما هو الآن) ، وهذا يعني الوجود الإلزامي للأخطاء العشوائية. لم ترفض المتصفحات HTML buggy ، ولكنها تضمنت طرقًا مختلفة لإصلاح الأخطاء - وكما هو الحال في كل شيء آخر ، عالجت المتصفحات المختلفة الأخطاء بشكل مختلف. يبدو أن HTML المشوه قليلاً يعمل بشكل جيد في IE 6 (حيث يعني "عمل بشكل جيد" "فعلت ما كنت تتوقعه منه") ، لكنه انهار تمامًا في المتصفحات الأخرى.

اختار اتحاد W3C XML لأنه في أوائل 2000s رأوا XML كحل عالمي لجميع المشاكل. إذا كنت لا تعرف ، فإن لدى XML نهجًا أكثر وضوحًا وعدوانية في معالجة الأخطاء - إذا كان المستند يحتوي على خطأ في التحليل ، فإن المستند بأكمله غير صالح. هذا يعني أنه إذا حددت XHTML وقمت بعمل خطأ مطبعي واحد ، فلن يتم عرض أي شيء في المتصفح على الإطلاق . مجرد خطأ.

تمتص. للوهلة الأولى ، يبدو كل شيء طبيعيًا ، ولكن ضع في اعتبارك: يتم تجميع XML العام بشكل ديناميكي باستخدام المكتبات التي تتعامل مع المستند على أنه شجرة تتعامل معها ، وفي النهاية يحولها إلى نص. يعد هذا أمرًا رائعًا للاستخدام العام لـ XML من أجل إجراء تسلسل للبيانات عندما تكون بياناتك بالفعل شجرة وتكون معظم بنية XML بسيطة وقابلة للتكرار ، لذلك من السهل إخفاءها في الوظائف.

HTML ليست كذلك. يحتوي مستند HTML على بنية متكررة قليلة موثوقة ؛ حتى هذه المقالة على الصفحة يتم تنسيقها بشكل رئيسي عن طريق العلامات <p>، ولكنها تحتوي أيضًا على غير متوقع <em>داخل النص الرئيسي وعشوائي<h3>بين الفقرات. ليس من الممتع جدًا ترميز هذا في شكل شجرة. وهذا أمر مهم ، لأنه في نفس الوقت تقريبًا ، اكتسب العرض من جانب الخادم زخمًا ، و HTML الذي تم إنشاؤه في ذلك الوقت والآن! - يتم تسليمه مع القوالب التي تعتبره دفق نص.

إذا كانت صفحات HTML عبارة عن مستندات ثابتة بحتة ، فعندئذٍ يمكن أن تعمل XHTML - تكتب مستندًا ، وتراه في متصفح وتعلم أن كل شيء يعمل. ليس هناك أى مشكلة. ولكن لإنشاء مستند ديناميكيًا والمخاطرة بأنه في بعض المواقف الحدودية ، سيتم خداع الموقع بالكامل ، وسيرى الزائر مجرد خطأ في المتصفح؟ تمتص هذا.

بالطبع ، لعب انتشار معيار Unicode الجديد في ذلك الوقت دورًا أيضًا. ثم لم يكن من الواضح دائمًا كيفية استخدامه ، وكان تسلسلًا سيئًا واحدًا من UTF-8 كافياً لاعتبار مستند XML بأكمله مشوهًا و "غير صالح"!

لذا ، بعد بعض التدليل ، نسينا تقريبا XHTML. غادر وراء مسارين فقط:

توقف الجميع عن استخدام أسماء العلامات بأحرف كبيرة! وداعا <BODY>مرحبا <body>! XML حساس لحالة الأحرف وكانت جميع علامات XHTML صغيرة ، لذلك لم تعمل علامات العنوان ببساطة (حقيقة ممتعة: لا تزال واجهة برمجة تطبيقات جافا سكريبت تمر بأسماء علامات HTML في حالة الأحرف الكبيرة). ربما يرجع ذلك إلى تزايد شعبية تسليط الضوء على بناء الجملة. لم نعد نكتب في المفكرة ، كما في عام 1997.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

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

أفتقد شيئًا واحدًا فقط في XHTML. هناك يمكنك استخدام لغة XSLT metalanguage لجعل القالب "داخل المتصفح" (أي إدراج محتويات الصفحة في التخطيط العام للموقع) دون كتابة البرامج النصية. كانت الطريقة الوحيدة الممكنة للقيام بذلك ، وكان الأمر رائعًا إذا كان كل شيء يعمل. لكن بعض الخلل الصغير يمكن أن يدمر كل شيء.

مظهر تخطيط CSS

عودة إلى CSS!

أنت مصمم ويب مبتدئ ، ولسبب ما ترغب في تجربة استخدام أنماط CSS للتخطيط ، على الرغم من أنها مخصصة بوضوح للألوان والأشياء الأخرى فقط. ماذا أفعل؟

كما ذكرت ، المشكلة الرئيسية هي الوضع الأفقي للأجسام بجانب بعضها البعض . الوضع الرأسي ليس مشكلة - هذا سلوك HTML عادي. السبب الوحيد لاستخدام الجميع للجداول هو أنه يمكنهم تقسيم المادة إلى خلايا وترتيبها جنبًا إلى جنب في أعمدة.

قدم CSS 2 بعض أوضاع العرض التي تتوافق مع أجزاء الجدول. ولكن لاستخدامها ، تحتاج إلى نفس مستويات التداخل الثلاثة كما في الجداول الحقيقية: الجدول نفسه ، ثم الصف ، ثم الخلية. إنهم ليسوا هنا ، وعلى أي حال ، لن تبدأ IE قريبًا في دعم مثل هذه الأوضاع.

هناك المزيد position، لكنه يسعى باستمرار لوضع الأشياء فوق بعضها البعض. همم

ما تبقى؟

في الواقع، أداة واحدة فقط: float.

قلت أنه floatيسمح لك بتدفق الصحف حول الصورة مع النص ، لكن هذا وصف عام جدًا. من حيث المبدأ، يمكن تطبيقه على أي عنصر. إذا كنت بحاجة إلى شريط جانبي ، فيمكنك إمالته إلى الحافة اليسرى ، وتعيين عرض 20٪ من الصفحة ، والحصول على شيء مثل هذا:

+ --------- +
| الشريط الجانبي | اهلا ومرحبا بكم في موقعي الالكتروني!
| |
+ --------- +

لسوء الحظ ، فإن الخصائص floatبحيث يتدفق النص حولها. وبالتالي ، إذا كان النص في الصفحة أطول من الشريط الجانبي ، فسيظهر أدناه - وسيتم تدمير الوهم. ولكن يمكن التحايل عليه. توضح مواصفات CSS أنه floatلا يمكن أن يتدفق المحتوى حول بعضها البعض ، لذا يكفي وضع واحد آخر float!

+ --------- + + ----------------------------------- +
| الشريط الجانبي | | اهلا ومرحبا بكم في موقعي الالكتروني! |
| | | |
+ --------- + | هنا فقرة أطول لإظهار |
            | أن دماغي المجرة CSS تطفو |
            | هراء يمنع التفاف النص. |
            + ----------------------------------- +

نجح هذا النهج ، ولكن قيوده كانت أسوأ بكثير من قيود الجدول. على سبيل المثال ، إذا أضفت تذييلًا ، فسيصعد إلى يمين النص الرئيسي ، لأن المتصفح "المؤشر" لا يزال في الأعلى ، على يمين الكتل العائمة. لذلك ، تحتاج إلى استخدامه clearلتزيين عنصر تحت جميع العوامات. وإذا جعلت الشريط الجانبي بنسبة 20٪ من عرض الصفحة ، والجسم بنسبة 80٪ ، فإن أي مسافة بينهما ستدفع الصفحة بعيدًا عن الشاشة وتظهر شريط تمرير أفقي قبيح. تحتاج دائمًا إلى تذكر هذا الحساب الغبي. إذا كان لديك الحدود أو الخلفيات تعيين على كلا الجانبين، ثم أنها سوف تكون ذات ارتفاعات مختلفة، لذلك ما عليك القيام به حقا أشياء غريبة حتى أناصلحه. وسيقرأ قراء الشاشة الشريط الجانبي بالكامل قبل الانتقال إلى النص الرئيسي ، الذي يعد وقحًا جدًا بالنسبة للمستخدمين. لذلك، تحتاج إلى استخدام حتى إعداد أكثر تعقيدا مع ثلاثة أعمدة، الذي يظهر الأولى المتوسطة في HTML.

ونتيجة لذلك ، نحصل على تصميم يبدو جميلًا ويعمل بشكل جيد ويتدرج بشكل صحيح ، ولكن يتم وصفه بواسطة كود CSS الفوضوي للغاية. لا شيء كتبته يتوافق فعليًا مع ما تريده - وهذه هي الأجزاء الرئيسية من التصميم ، وليست الإطارات الجانبية! كان من الصعب فهم كيفية توصيل رمز CSS وما يظهر على الشاشة. ومن ثم سيزداد الوضع سوءًا قبل أن يتحسن أخيرًا.

شبكة الصور المصغرة - 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 محتوى الصفحة في شكل معقول ، ثم يصف CSS الشكل الذي يبدو عليه بالفعل.

لسوء الحظ ، سيكون التنفيذ يوم floatوقح قليلاً. يتكيف هذا الإصدار الجديد بشكل أفضل مع أحجام الشاشات المختلفة ، ولكنه يتطلب بعض الاختراقات: يجب أن تكون الخلايا ذات ارتفاع ثابت ، ويكون توسيط الشبكة بالكامل أمرًا صعبًا للغاية ، ويختفي تأثير الشبكة مع عناصر أوسع. يصبح من الواضح أننا حصلنا على نفس الجدول تقريبًا ، ولكن مع عدد مرن من الأعمدة. نحن فقط نحاول تقليده.

أنت بحاجة أيضًا إلى هذه التعويذة الغريبة clearfixالشهيرة في تلك الحقبة. لأن العوامة لا تتحرك "المؤشر" ، ثم<ul>بعناصر عائمة ارتفاع صفر. تنتهي تمامًا من حيث تبدأ ، وتحصل جميع الصور المصغرة العائمة على قسط كافٍ من النوم من الأسفل. الأسوأ من ذلك ، نظرًا لأن جميع العناصر اللاحقة لا تحتوي على عوامات متجاورة ، فإنها ستتجاهل الصور المصغرة تمامًا ، وتستمر في العرض تحت "شبكة" فارغة - مما يخلق فوضى!

الحل هو إضافة عنصر وهمي في نهاية القائمة ، والذي لا يشغل مساحة ، ولكن مع سمة CSS clear: both، التي تحذفه تحت جميع العوامات. هذا يدفع بشكل فعال الأخير <ul>تحت الصور المصغرة ، ويلتزم به بدقة من الأسفل.

في وقت لاحق ، ستبدأ المتصفحات في دعم العناصر الزائفة لـ "المحتوى الناتج" ::beforeو::after، والذي سيتخلى عن العنصر الوهمي تمامًا. غالبًا ما تتضمن أوراق الأنماط من منتصف العقد الأول من القرن الحادي والعشرين الخطوط التالية:

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

ومع ذلك كان أفضل من الجداول.

DHTML

كحالة بحث موجزة إلى عالم جافا سكريبت ، مكّنت الخاصية الجديدة المتدرجة position حقًا من تصميم ديناميكي إلى حد ما. أنا أعارض بشدة مثل هذه البدعة ، ليس أقلها أنه لم يفعلها أحد بشكل صحيح ، ولكن كان من الممتع اللعب.

وهكذا بدأ عصر "HTML الديناميكي" ، أي HTML مع تأثيرات JavaScript. الآن انتهى هذا المصطلح تمامًا ، لأنه لا يمكننا الآن إنشاء مدونة ثابتة بدون جافا سكريبت. بدأ كل شيء أكثر ضررًا بكثير: تم لصق المراهقين على لمعان الصفحة الذي تبع مؤشر الماوس ، أو ساعة تناظرية صغيرة تم تحديدها في الوقت الفعلي.

كانت مجموعة Dynamic Drive هي المجموعة الأكثر شعبية من هذه البرامج النصية . - لا يزال هذا الموقع موجودًا بأعجوبة. من المحتمل أنه يحتوي على مئات الألعاب التي لم يتم تحديثها منذ أوائل العقد الأول من القرن الحادي والعشرين.

إذا كنت لا ترغب في الخوض في هذه المجموعة ، فإليك مثال: كل عام (باستثناء العام الحالي ، عندما نسيت ، آسف) في عيد ميلادي ، أحب إضافة حلويات وغيرها من الهراء إلى مدونتي. أنا كسول جدًا ، لذلك بدأت التقليد بمساعدة هذا النص ، الذي وجدته في مكان ما . تم تصميمه في الأصل لرقائق الثلج ووضعه على الصفحة مجموعة من الصور مع position: absolute، ثم قم بتغيير الإحداثيات بشكل متكرر.

قارن هذا بالنسخة التي كتبتها من الصفر منذ بضع سنوات : هنا فقط كود JS صغيرلتخصيص الصور ، ثم يقوم المتصفح بتحريكها باستخدام CSS. هذا نص برمجي أقل وظيفية إلى حد ما ، ولكنه يسمح للمتصفح بالقيام بكل العمل ، ربما حتى مع تسريع الأجهزة. هذا هو المدى الذي وصلنا إليه.

الويب 2.0

الأوقات المظلمة لا يمكن أن تستمر إلى الأبد. وقعت سلسلة من الأحداث التي دفعتنا إلى النور.

كان أحد الأحداث الرئيسية إصدار Firefox - أو ، بالنسبة للأكثر تقدمًا ، فينيكس في البداية ، ثم Firebird. ظهر الإصدار 1.0 في نوفمبر 2004 - وبدأ في التخلص من IE جيدًا. عمل المتصفح على النواة المعاد كتابتها لـ Netscape 6 ، والتي يتم استخراجها من قلب Mozilla Suite إلى تطبيق منفصل. كانت سريعة وبسيطة وأفضل بكثير في الحفاظ على المعايير ، على الرغم من عدم أهمية أي شيء على الإطلاق.

الشيء الحقيقي هو أن Firefox لديه علامات تبويب. في IE 6 لم يكونوا كذلك. إذا أردت فتح صفحة ويب ثانية ، فتحت نافذة جديدة. أن لعنة تمتص الرجال. أصبح فايرفوكس معجزة حقيقية.

بالطبع ، لم يكن Firefox هو المتصفح الأول الذي يحتوي على علامات تبويب ؛ في المتصفح الكامل من Mozilla Suite ، كانت موجودة أيضًا ، وفي الأوبرا المتقدمة كانت موجودة منذ أمد بعيد. ولكن لأسباب مختلفة ، كان Firefox هو الذي انطلق ، ليس أقله حقيقة أنه لم يكن لديه لوحة إعلانية عملاقة في الأعلى ، مثل Opera.

بالطبع ، روج المصممون لفايرفوكس فيما يتعلق بدعم المعايير ، لكن هذه الحجة اجتذبت مصممين آخرين فقط ، وليس والديهم. كان اختبار Acid2 ، المصمم لاختبار معايير الويب الحديثة ، أحد أكثر العروض شيوعًا وإثارة . أظهر ابتسامة لطيفة ، إذا تم وضع المعايير بشكل صحيح ، وصورة جهنمية في IE 6 .

نتيجة اختبار Acid2 في متصفح IE 6

في وقت مبكر فايرفوكس لم يكن مثاليا. ولكن بالطبع ، دعم المعايير بشكل أفضل بكثير ، ويمكنك أن ترى التقدم حتى يجتاز المتصفح جميع الاختبارات تمامًا مع إصدار Firefox 3.

تم مساعدة Firefox أيضًا بواسطة محرك جافا سكريبت الأسرع: كان ذلك قبل JIT. كان أسرع بكثير من IE. على سبيل المثال ، بقدر ما أتذكر ، نفذ IE 6 getElementByIdالتكرار من خلال المستند بأكمله ، حتى في حالة المعرفات الفريدة. ألق نظرة على إعلانات إصدار jQuery القديمة ، والتي كانت عادةً مصحوبة برسوم بيانية للأداء ، وهناك جميع المتصفحات بترتيب من حيث الحجم أسرع من IE 6-8.

أوه ، وبعد ذلك كان IE 6 عبارة عن ثغرة أمنية مشي عملاقة ، خاصة مع الدعم الأصلي للمكونات الثنائية العشوائية التي تحتاج فقط إلى النقر فوق "نعم" في مربع الحوار السريع للحصول على وصول كامل وغير محدود إلى نظامك. ربما لم يساهم هذا في سمعة IE.

على أي حال ، مع ظهور أدنى بديل لـ IE ، حتى المصممين الأكثر شراسة لم يتمكنوا فقط من تحسين الموقع لـ IE 6 والانتهاء عند هذا الحد. الآن كان هناك سبب لاستخدام الوضع الصارم ، كان هناك سبب للاهتمام بالتوافق والمعايير ، وبذل فايرفوكس جهودًا مستمرة للامتثال لهم قدر الإمكان ، بينما ظل IE 6 في حالة ركود.

(أود أن أقول أن هذا التأثير فتح الباب لنظام التشغيل OS X وكذلك لـ iPhone. أنا لا أمزح! فكر في الأمر: إذا لم يعمل متصفح iPhone في الواقع مع أي شيء ، لأن الجميع لا يزالون يبنون مواقع لـ IE 6 ، سيبقى مجرد بديل باهظ الثمن لـ Palm. تذكر أنه في البداية لم تكن Apple تريد حتى إطلاق تطبيقاتها الخاصة - فقد اعتمدت على الإنترنت).

(بالمناسبة ، تم إصدار Safari في يناير 2003 ، استنادًا إلى تفرع KHTML من متصفح KDE Konqueror. أعتقد أنني استخدمت KDE في ذلك الوقت ، لذلك كان الأمر مثيرًا للاهتمام للغاية ، ولكن لم يفكر أحد حقًا في OS X معها حصة سوق سخيفة من 2٪).

ظهر عامل مهم آخر في 1 أبريل 2004 ، عندما أعلنت Google عن Gmail. هاها انه سخيف. واجهة ويب مريحة للبريد؟ نكتة جيدة ، جوجل.

يا القرف. إنهم لا يمزحون.كيف يعمل هذا الشيء التفاعلي؟

اليوم ، يعرف كل مطور ويب الجواب - هذا هو XMLHttpRequest ، لذلك تمت تسميته لأنه لم يستخدمه أحد في أي وقت مضى لاستعلامات XML. تم اختراعه بواسطة Microsoft for Exchange mail ، ثم تم استنساخه بواسطة Mozilla (أقتبس للتو من ويكيبيديا ).

الشيء المهم هو أن XMLHttpRequest يسمح لك بإجراء طلب HTTP من JavaScript. يمكنك الآن تحديث جزء فقط من الصفحة بالبيانات الجديدة ، تمامًا في الخلفية ، دون إعادة التحميل. لم يكن أحد قد سمع بهذا الأمر من قبل ، وعندما أطلقت Google برنامج بريد إلكتروني كامل عليه ، كان ذلك سحرًا مطلقًا.

ربما كل هذا خطأ سيؤدي إلى مستقبل جهنمي حيث تقوم الصفحات الثابتة بتحميل ثلاث فقرات من النص في الخلفية باستخدام XHR بدون سبب واضح ، ولكن هذا هو موضوع مقال آخر .

في سياق مشابه ، تم إصدار jQuery ، معجزة مماثلة ، في أغسطس 2006. لم يصف فقط الاختلافات بين واجهات برمجة التطبيقات IE "JScript" والمناهج القياسية التي اعتمدتها جميع الآخرين (والتي تم إجراؤها سابقًا من قبل مكتبات أخرى) ، ولكن أيضًا مبسط إلى حد كبير العمل مع مجموعات كاملة من العناصر في نفس الوقت ، والتي ظلت تاريخياً بمثابة ألم كبير في المؤخرة. الآن أصبح من السهل جدًا تطبيق CSS في كل مكان من JavaScript! هذه فكرة سيئة ، ولكن في هذه الحالة لم يكن هناك خيار أفضل!

أسمعك تمانع: JavaScript مرة أخرى! هل هذا مقال عن CSS؟

انت على حق تماما! أذكر الشعبية المتزايدة لجافا سكريبت ، لأنه أدى مباشرة إلى حالة CSS الحديثة ، وذلك بفضل عامل رائع آخر:

طموح

أظهر Firefox أن المتصفحات يمكن أن تنمو بسرعة كبيرة - كان كل تحسن جديد في Acid2 مثيرًا. أظهر لنا Gmail أن الويب قادر على أكثر من مجرد عرض النص العادي مع تساقط الثلوج.

وبدأ الناس يتخيلون .

كانت المشكلة أن المتصفحات لم تتحسن. كان Firefox في بعض النواحي أسرع وأكثر التزامًا بمواصفات CSS ، ولكنه في الأساس لم يفعل شيئًا جديدًا. تم تحسين مربع الأدوات فقط ، مما أثر بشكل أساسي على JavaScript. CSS هي لغة ثابتة ، لذا لا يمكنك كتابة مكتبة لتحسينها. كان من الممكن إنشاء CSS باستخدام JavaScript ، ولكن اللعنة ، إنها دائمًا فكرة سيئة.

كانت المشكلة الأخرى هي أن CSS 2 جيدة حقًا في تصميم المستطيلات. كان الأمر رائعًا في التسعينيات ، عندما كان لكل نظام تشغيل واجهة مستطيلة الشكل. ولكن حان الوقت لنظامي التشغيل Windows XP و OS X ، حيث أصبح كل شيء لامعًا ولامعًا ومستديرًا. كان من الغريب بعض الشيء أن الزوايا المستديرة وعلامات الاختيار الأنيقة مع الظلال موجودة في متصفح الملفات الخاص بك ، ولكن ليس في أي مكان على الإنترنت.

لذلك عادت الأوقات المظلمة.

عصر الاختراق CSS

أراد المصممون الكثير مما لا يستطيع CSS تقديمه.

زوايا مدورة. خرجت الأزرار المربعة من الموضة ، والآن أراد الجميع أزرارًا ذات زوايا مستديرة ، لأن "المستقبل يكمن معهم" (الأزرار الأصلية خرجت أيضًا عن الموضة لسبب ما). للأسف ، لم تتمكن 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 — — !

لكن كل هذه اعتبارات جمالية بحتة. إذا كنت مهتمًا بالتخطيط ، حسنًا ، فإن ظهور Firefox على الفور جعل حياتك أسهل بكثير وأكثر تعقيدًا.

هل تتذكر inline-block؟ فايرفوكس 2 يدعمه في الواقع! كانت عربات التي تجرها الدواب ومخفية وراء بادئة البائع ، لكنها نجحت إلى حد ما ، مما سمح للمصممين بمحاولة استخدامه. ثم خرج Firefox 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. إيه.

لحسن الحظ ، اكتشف عبقرية مطلقة في مرحلة ما hasLayoutتحسينًا داخليًا في IE يشير إلى ما إذا كان العنصر يحتوي على ترميز اه ... اسمع ، لا أعرف. بشكل أساسي ، فإنه يغير مسار العرض للعناصر - لذلك ليست هذه الأخطاء ولكن تظهر الأخطاء الأخرى ، مثل وضع التوافق بناءً على كل عنصر! ونتيجة لذلك ، اتضح أن كل ما سبق يعمل في 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 */

هل من المستغرب أن الناس بدأوا يشكون من CSS؟

لقد كانت حقبة من لصق النسخ الأعمى في محاولات غير مجدية لجعل هذا الشيء اللعين يعمل. مثال: شخص ما (اكتشفت شفرة المصدر ذات مرة ، ولكن لا يمكنني العثور عليها الآن) كانت لديه فكرة غريبة عن التثبيت دائمًا body { font-size: 62.5% }، حيث يفترض أن الوحدات النسبية "جيدة" ، بدافع الرغبة في تجاوز حجم الخط الافتراضي الافتراضي للمتصفح وهو 16 بكسل (والذي ، اتضح الحق) وضرورة التعامل مع أخطاء IE. بعد مرور بعض الوقت ، توقف عن فعل ذلك ، ولكن تم إلحاق الضرر ، وتصرفت الآلاف من مواقع الويب بهذه الطريقة ، معتبرين أنها "أفضل الممارسات". هذا يعني أنه إذا كنت تريد تغيير حجم الخط الافتراضي لمتصفحك في أي اتجاه ، فسوف تحصل على هراء - إذا قمت بتقليله وأصبحت مجموعة من صفحات الويب مجهرية ، إذا قمت بزيادته ، فسيظل كل شيء صغيرًا إذا قمت بزيادةه أكثر ، ستصبح المواقع التي تحترم قرارك ضخمة. اليوم على الأقل لدينا مقياس أفضل ، على ما أعتقد.

نعم ، وتذكر: StackOverflow لم يظهر بعد. تم نقل كل المعرفة من الفم إلى الفم. إذا كنت محظوظًا ، فأنت تعرف بعض المواقع التي تحتوي على نصائح مثل QuirksMode و Eric Meyer's.

في الواقع ، تحقق من موقع css / edge الخاص بـ Mayer . هناك بعض الأمثلة الجامحة التي فعلها الناس ، حتى مع CSS 1 فقط ، في عام 2002. ما زلت أعتقد أن اللولب المركب عبقري نقي ، على الرغم من أنه يتم في هذه الأيام مع opacityصورة واحدة فقط. تلقت الأساليب من raggedfloat دعم CSS الأصلي قبل بضع سنوات فقط ، مع ظهور shape-outside! أعطانا هذا المؤلف أيضًا إعادة تعيين CSS ، مما أدى إلى إزالة الاختلافات بين أنماط المتصفح الافتراضية.

(من الصعب المبالغة في تقدير دور إريك ماير في CSS. عندما توفيت ابنته الصغيرة ريبيكا قبل ست سنوات ، تم تخليدها بلون CSS الخاص بها ، rebeccapurple، حالة فريدة. هذا هو مدى تقدير مجتمعه عبر الإنترنت! حسنًا ، علي الآن أن أبكي قليلاً على هذه القصة.)

المستقبل قادم ولكن بشكل تدريجي

دفع المصممون والمطورون تدريجياً حدود ما تستطيع المتصفحات القيام به. إدارة المتصفحات حتى الآن سيئة إلى حد ما. كانت جميع الإصلاحات والحلول والمكتبات سرية ، وهشة ، وعرضة للخطأ ، و / أو ثقيلة.

من الواضح أن المتصفحات تحتاج إلى وظائف جديدة. ولكن مجرد الإفراج عنه لم يكن كافيا. قامت Microsoft بالكثير من هذا ، وأدت في الأساس إلى فوضى جديدة.

ولكن جرت عدة محاولات يائسة. نظرًا لأن رأس W3C كان لا يزال جالسًا في وسطه - حيث رفض حتى تحسينات HTML المقترحة لصالح XML - قرر بعض مطوري المتصفح النشطين (Apple و Mozilla و Opera) إنشاء ناديهم الخاص. في يونيو 2004 ، تم تشكيل مجموعة عمل WHATWG ، وبدأت العمل على معيار HTML5. في النهاية ، يلغي تمامًا الحاجة إلى XHTML ويزيل عددًا من مشكلات الأمان عند العمل مع HTML العادي. بالإضافة إلى ذلك ، قدم بعض الفوائد الجديدة ، مثل الدعم الأصلي للصوت والفيديو وعناصر التحكم في النموذج للتواريخ والألوان. وأشياء أخرى مدعومة بشكل خرقاء بعناصر تحكم JavaScript. و ، ما زالوا مدعومين بشكل خرقاء هناك.

ثم جاء CSS 3. لا أعرف متى حدث هذا. ظهر ببطء ، بكل قوته ، مثل كتكوت تفقس من بيضة وليس في عجلة من أمرها ، اللعنة ، للذهاب إلى أي مكان.

يمكنني عمل الكثير من الافتراضات المعقولة. أعتقد أنها بدأت مع border-radius. على وجه التحديد ، مع -moz-border-radius. لا أعرف متى تم تقديمه لأول مرة ، لكن متتبع حشرات Mozilla يذكره في عام 1999.

انظر ، يتم تقديم واجهة مستخدم Firefox الخاصة باستخدام CSS. إذا أرادت Mozilla القيام بشيء لا يمكن فعله باستخدام CSS ، فقد أضافت ملكيتها الخاصة ببادئة -mozللإشارة إلى أنه كان اختراعها الخاص. وإذا لم يكن هناك ضرر حقيقي في ذلك ، فقد جعل العقار متاحًا لمواقع الويب.

أعتقد أن الدفع من أجل CSS 3 بدأ بالفعل عندما انطلق فايرفوكس - واكتشف المصممون العقار -moz-border-radius. فجأة ظهرت زوايا دائرية مدمجة! لا مزيد من الضجة في Photoshop ، ما عليك سوى كتابة سطر واحد! بين عشية وضحاها تقريبا ، تم نشر الزوايا المستديرة والدائرية في كل مكان.

ومن هناك تدحرج كل شيء مثل كرة الثلج. تم حل المشاكل الشائعة واحدًا تلو الآخر بمساعدة وظائف CSS الجديدة ، والتي تم دمجها في إصدار جديد من CSS - CSS 3. وحل المشكلات الرئيسية مشكلات التصميم المذكورة سابقًا:

زوايا مدورة border-radius.
التدرجات باستخدام linear-gradient()وما إلى ذلك.
الخلفية المتعددة في حد ذاتها لم تكن مشكلة ، لكنها سهلت بعض الأشياء الأخرى.
الشفافية باستخدام opacityقناة ألفا بالألوان.
الظلال في الحاويات.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
خطوط الويب التي كانت في CSS لبعض الوقت ، ولكن تم تنفيذها فقط في IE وفقط مع بعض الخطوط البكم المحملة DRM. الآن نحن لا نقتصر على الخطوط الأربعة السيئة التي تأتي مع Windows والتي لا يمتلكها أي شخص آخر!

لقد كانت رائعة! لم هذه الميزات لن يحل أي مشاكل التخطيط، لكنها لم تحل المشاكل الجمالية التي تستخدم لمصممي عمل حول مصقول استخدام الكثير من الصور و / أو جافا سكريبت. وهذا يعني تنزيلات أقل وصورًا أقل تم استخدامها بدلاً من النص ، وهو أمر جيد جدًا للويب.

المفارقة العظيمة هي أن تأثيرات التصميم هذه خرجت عن الموضة على الفور تقريبًا ، والآن عدنا إلى مستطيلات مسطحة.

بائع الجحيم البادئات في المتصفحات

واحسرتاه! لم يكن العالم على ما يرام.

تم تطوير بعض هذه الأدوات الجديدة في الأصل من قبل صانعي المتصفح وهي مسبوقة. تم تطوير بعض التطبيقات اللاحقة من قبل لجنة CSS ، ثم تم تنفيذها بواسطة المتصفحات عندما كان التصميم لا يزال قيد التطوير. لذلك كانت هناك بادئات هنا أيضًا.

وبدأ جحيم البادئات التي تستمر حتى يومنا هذا.

كانت موزيلا -moz-border-radius، لذلك ، عندما نفذها Safari ، -webkit-border-radiusوسمتها ("WebKit" هو اسم Apple fork KHTML). ثم قامت مواصفات CSS 3 بتوحيدها وتسميتها ببساطة border-radius. هذا يعني أنه إذا كنت تريد استخدام حدود دائرية ، فأنت في الواقع بحاجة إلى توضيح ثلاث قواعد:

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

تضمن الأولين في الواقع التأثير في المتصفحات الحالية ، وآخرها مسجل للمستقبل: عندما تطبق المتصفحات القاعدة الحقيقية وتسقط البادئات ، ستصبح سارية المفعول.

كان عليك القيام بذلك في كل مرة ، لأن CSS ليست لغة برمجة ولا تحتوي على وحدات ماكرو أو وظائف أو ما شابه. في بعض الأحيان عرض أوبرا وIE تطبيقات الخاصة بهم مع البادئات -o-و -ms-، ونتيجة لذلك، بلغ إجمالي عدد الأسطر الخمسة. مع التدرجات أصبحت أسوأ بكثير. خضع بناء الجملة لعدد من المراجعات الخطيرة غير المتوافقة ، لذلك لا يمكنك حتى الاعتماد على النسخ / اللصق وتغيير اسم الموقع!

والعديد من المصممين أخطأوا. لا يمكنني إلقاء اللوم عليهم كثيرا. أعني ، إنها سيئة. لكن العديد من الصفحات أشارت إلى نماذج البادئة فقط ، وليس النهائية ، لذلك كان على المتصفحات الحفاظ على نماذج البادئة لفترة أطول مما ترغب في عدم كسر أي شيء. وإذا كان نموذج البادئة لا يزال يعمل ، وكنت معتادًا على استخدامه ، فقد لا تحتاج حقًا إلى خيار عالمي.

الأسوأ من ذلك ، سيستخدم البعض فقط النموذج الذي يعمل في المتصفح المفضل لديهم. أصبحت الأمور سيئة بشكل خاص مع ظهور متصفحات الويب للجوال. المتصفحات المدمجة في iOS و Android هي Safari (WebKit) و Chrome (في الأصل WebKit ، الآن شوكة) ، لذلك تحتاج فقط إلى البادئة -webkit-. الأمر الذي جعل موزيلا أكثر صعوبة عندما أصدر Firefox لنظام Android.

تذكر هذا الفشل مع IE 6؟ ها نحن مرة أخرى! كان الوضع مزعجًا لدرجة أن Mozilla قررت في النهاية تنفيذ عدد من الميزات -webkit-التي لا تزال مدعومة حتى على Firefox لسطح المكتب. الموقف غبي جدًا لدرجة أن فايرفوكس يدعم الآن بعض التأثيرات فقط من خلال هذه الخصائص ، مثل -webkit-text-stroke ، وهو غير قياسي.

علاوة على ذلك ، يسمى محرك Chrome المتشعب الحالي Blink ، لذلك يجب ألا يستخدم الخصائص من الناحية الفنية -webkit-. ومع ذلك فهي كذلك. على الأقل هذا ليس سيئًا مثل سلاسل وكيل المستخدم المربكة .

الآن تخلى مبدعو المتصفحات عن البادئات إلى حد كبير. بدلاً من ذلك ، فإنهم يخفون الوظائف التجريبية وراء الأعلام (لذلك ، سيعملون فقط على آلات التطوير التي تجبرهم على العمل). يجب أن تكون الميزات الجديدة من الناحية النظرية أصغر وأسهل للاستقرار.

ربما أصبحت هذه الفوضى عاملاً محفزًا كبيرًا لتطوير Sass و LESS ، وهما اللغتان اللتان تنتجان كود CSS (المعالجات المسبقة). لديهم أهداف متشابهة للغاية: يضيف كل من المتغيرات والوظائف وبعض أشكال وحدات الماكرو إلى CSS ، مما يسمح لك باستبعاد العديد من التكرار واختراق المتصفح وغير ذلك من الهراء من التعليمات البرمجية. الجحيم ، ما زلت أستخدم SCSS بنفسي ، على الرغم من أن الاستخدام العام للصناعة يتناقص تدريجيًا.

Flexbox

ولكن بعد ذلك ، كما لو أن ملاك نزل من السماء ... flexbox .

لقد كان Flexbox موجودًا لفترة طويلة جدًا - يُزعم أن الدعم الجزئي قد عاد إلى Firefox 2 ، بالفعل في عام 2006! لقد مر بالعديد من المراجعات غير المتوافقة واستغرق الأمر إلى الأبد لتحقيق الاستقرار. ثم لم يتمكن IE من تنفيذ الدعم لسنوات ، ولا تريد الاعتماد على التخطيط الذي يعمل لنصف جمهورك فقط. في الآونة الأخيرة فقط نسبيًا (2015؟ في وقت لاحق؟) حصل Flexbox على دعم واسع بما يكفي للاستخدام الآمن. ويمكنني أن أقسم أنني ما زلت أواجه أشخاصًا لا يتعرف Safari على ذلك على الإطلاق بدون بادئات ، على الرغم من أنه يبدو أن Safari قد أسقط البادئات قبل خمس سنوات ...

على أي حال ، يعد flexbox تطبيق CSS لأداة تخطيط واجهة المستخدم الرسومية الشائعة إلى حد ما: لديك أحد الوالدين مع العديد من الأطفال ، ولدى الوالدين بعض المساحة الحرة ، ويتم مشاركتها تلقائيًا بين الأطفال. وذلك يضع الأشياء بجانب بعضها البعض .

الفكرة العامة هي أن المتصفح يحسب مقدار المساحة الحرة التي يمتلكها الوالد و "الحجم الأولي" لكل طفل ، ويحسب مقدار المساحة الإضافية الموجودة ، ويوزعها وفقًا لمرونة كل طفل. تخيل شريط أدوات: يمكنك منح كل زر حجمًا ثابتًا (المرن 0) ، ولكن أضف الفواصل التي تقسم المساحة المتبقية بالتساوي ، لذا امنحهم المرن 1.

بمجرد القيام بذلك ، سيكون لديك أيضًا العديد من الخيارات للخيارات المريحة: يمكنك توزيع مساحة إضافية بين الأطفال ، يمكنك تمديدهم إلى نفس الارتفاع أو محاذاةهم بطرق مختلفة ، حتى يمكنك نقلهم إلى عدة صفوف إذا لم يكن جميعهم مناسبًا!

من خلال هذا ، يمكننا تحسين شبكة الصور المصغرة بشكل أكبر :

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

هذه مجرد معجزة. يمكنك أن تنسى على الفور inline-block. يعبر هذا الرمز بوضوح شديد عما نحتاجه.

... تقريبا. لا يزال لديه مشكلة في أن الخلايا العريضة جدًا ستمزق الشبكة ، لأن هذا لا يزال صفًا أفقيًا ، يتم نقله إلى عدة خطوط مستقلة. لكن هذا لا يزال رائعًا ويحل عددًا من مشكلات التخطيط الأخرى. ربما هذا يكفي. إذا فقط ...

أود أن أقول أن الإدخال الهائل لـ flexbox بشرت في العصر الحديث من CSS. كانت هناك مشكلة واحدة فقط لم تحل ...

وفاة بطيئة ومؤلمة من IE

ترك IE 6 السوق لفترة طويلة جدا. حتى بداية عام 2010 أو نحو ذلك ، لم يكن من الممكن أن تنخفض إلى ما دون 10٪ من السوق (لا تزال قطعة كبيرة).

وصل فايرفوكس إلى الإصدار 1.0 في نهاية عام 2004. ظهر IE 7 بعد عامين فقط ، ولم يقدم سوى تحسينات متواضعة ، وعانى من مشكلات التوافق مع مواقع IE 6 ، ولم ير العديد من مستخدمي IE 6 (معظمهم من المستخدمين عديمي الخبرة) سببًا للتحديث على الإطلاق. يأتي نظام Vista مع IE 7 ، ولكن تبين أن نظام Vista كان نوعًا من الفشل - لا أعتقد أنه في حياتي كلها كان قريبًا من تجاوز XP.

وشملت العوامل الأخرى سياسات تكنولوجيا المعلومات في الشركات ، والتي غالبًا ما تتخذ شكل "عدم تحديث أي شيء" - وغالبًا لسبب وجيه ، لأنني سمعت قصصًا لا نهاية لها حول التطبيقات الداخلية التي عملت فقط في IE 6 لجميع أنواع الأسباب المروعة. ثم كانت هناك كل كوريا الجنوبية ، التي كانت مطلوبة قانونًا لاستخدام IE 6 لأنها كرست في القانون بعض متطلبات الأمان التي لا يمكن تنفيذها إلا باستخدام عنصر تحكم ActiveX في IE 6.

لذلك ، إذا كنت تدعم موقع الويب الذي تم استخدامه - أو ما هو أسوأ ، مطلوبللاستخدام - من قبل أشخاص من رجال الأعمال أو من دول أخرى ، أنت عالق إلى حد كبير بدعم IE 6. تخلى الأشخاص الذين يصنعون أدوات شخصية صغيرة ومواقع ويب على الفور عن توافق IE 6 وعرضوا لافتات مزعجة بشكل متزايد على مواقع الويب لمستخدمي IE 6 ... ولكن إذا كنت رجل أعمال ، كيف تفسر الخسارة الفورية لـ 20٪ من الجمهور المحتمل؟ فقط اعمل بجد!

على مر السنين ، نما الإجهاد حيث أصبحت CSS فعالة بشكل متزايد وبقي IE 6 مرساة. ما زال لا يفهم ألفا PNGبدون حلول ، وفي غضون ذلك ، كان لدينا المزيد والمزيد من الوظائف المهمة ، مثل الفيديو الأصلي في HTML5. أصبحت الحلول أكثر إرباكًا ، وكانت قائمة الوظائف التي لم تستطع استخدامها أطول. سأظهر كيف تبدو مدونتي في IE 6 ، ولكن من غير المحتمل أن تتصل بها - TLS التي تدعمها قديمة جدًا ومكسورة لدرجة أنها معطلة بالفعل في معظم الخوادم!

جاءت الطلبات المنفصلة من مطورين فرديين من فريق YouTube. دون أن يطلبوا إذنًا من أي شخص ، أضافوا في يوليو 2009 لافتة تحذير تطالب مستخدمي IE 6 بالتبديل إلى شيء ماآخر ، حيث سينتهي دعم المتصفح القديم قريبًا. في غضون شهر واحد ، انخفضت الحصة العالمية من حركة مرور IE6 بأكثر من 10٪. ليس كل الأبطال يرتدون معاطف مطر.

أود أن أشير إلى بداية نهاية IE6 في ذلك اليوم عندما قام YouTube بالفعل بإيقاف دعم IE 6. حدث هذا في 13 مارس 2010 ، بعد حوالي تسع سنوات من إصدار هذا الإصدار من المتصفح. لا أعرف مدى تأثير YouTube على مستخدمي الشركات أو حكومة كوريا الجنوبية ، ولكن رفض شركة ويب كبيرة دعم متصفح كامل يرسل رسالة قوية جدًا.

بالطبع ، كانت هناك إصدارات أخرى من IE ، وكان الكثير منها في حد ذاته صداعًا مختلفًا. لكن كل متابع أصبح أقل إيلامًا ، والآن لا تحتاج إلى التفكير كثيرًا في الاختبار في IE (الآن Edge). حان الوقت لشركة Microsoft للتخلي عن محرك العرض الخاص بها والتبديل إلى نسخة Chrome.

الآن

CSS جيد جدًا الآن. لا تحتاج إلى عمليات اختراق غريبة لوضع الأشياء في مكان قريب. أدوات تطوير المتصفح مدمجة الآن ومذهلة للغاية - بدأ Firefox بتحذيرك على وجه التحديد عندما لا تصبح بعض خصائص CSS سارية بسبب قيم الخصائص الأخرى! يمكن الآن تعيين الآثار الجانبية الضمنية غير الواضحة مثل "سياقات التراص" بشكل صريح - مثل الخصائص isolation: isolate.

في الواقع ، دعني أسرد فقط كل ما يتبادر إلى الذهن حول ميزات CSS الحديثة. هذا ليس دليلاً لجميع الاستخدامات الممكنة للأنماط ، ولكن إذا لم يتم تحديث معلومات CSS الخاصة بك منذ عام 2008 ، آمل أن يعزز ذلك شهيتك. وكل هذا مجرد CSS! يتم الآن دعم الكثير من المكونات الإضافية التي كانت مستحيلة أو مؤلمة أو مطلوبة في البداية - الصوت والفيديو والرسم الحر والعرض ثلاثي الأبعاد ... ناهيك عن التحسينات المريحة الضخمة لـ JavaScript.

نسق

يمكن لحاوية الشبكة أن تفعل كل ما فعلته الجداول تقريبًا ، بل وأكثر من ذلك ، بما في ذلك تحديد عدد الأعمدة تلقائيًا. هذا مذهل المزيد عن هذا أدناه.

تقوم حاوية Flexbox بتحليل أطفالها إلى صف أو عمود ، مما يسمح للجميع بإعلان حجمهم الافتراضي ومقدار المساحة التي يريدون استخدامها. يمكنك لف هذه الحاويات ، وإعادة ترتيب الأطفال دون تغيير ترتيب المصدر ، ومحاذاة الأطفال بعدة طرق.

أعمدة يمكن تقسيم النص، أيضا، إلى عدة أعمدة.

خاصية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يحدد اتجاه الحرف. إذا كان تصميمك لديها للعمل في عدة وسائط، وبعض خصائص CSS تدعم هذا، يمكنك استخدامها كبديل للخصائص القياسية: inset-blockو inset-inlineلتحديد المواقع، block-sizeو inline-sizeللعرض / ارتفاع، border-blockو border-inlineإلى حدود، وخصائص مشابهة لالمسافة البادئة.

جماليات

تقوم انتقالات CSS بسلاسة باستيفاء القيمة كلما تغيرت ، سواء بسبب تأثير نوع :hoverأو ، على سبيل المثال ، فئة تمت إضافتها من JavaScript. الرسوم المتحركة في CSS متشابهة ، ولكنها تقوم بتشغيل الرسوم المتحركة المحددة مسبقًا تلقائيًا. يمكن لكليهما تطبيق عدد من وظائف "النعومة" المختلفة .

border-radiusتقريب الزوايا الحاوية. يمكن أن تكون جميع الزوايا ذات أحجام مختلفة ، ويمكن أن تكون مستديرة أو بيضاوية الشكل. ينطبق المنحنى أيضًا على الحدود والخلفية وأي ظلال من المستطيل. يمكن استخدام

ظلال الحاويات للتأثير الواضح لإنشاء الظلال. يمكنك أيضًا استخدام ظلال وظلال متعددة insetلتأثيرات ذكية مختلفة.

text-shadowيفعل ما يقوله ، على الرغم من أنه يمكنك أيضًا إضافة بعض الظلال لإنشاء نوع من مخطط النص.

transformيسمح لك بتطبيق تحويل تعسفي متعدد الخطوات على عنصر - أي ، تغيير الحجم ، التدوير ، الإمالة ، النقل و / أو إجراء تحويل منظور دون التأثير على التخطيط.

filter(يختلف عن IE 6) يقدم العديد من المرشحات البصرية الخاصة التي يمكن تطبيقها على عنصر. معظمها يغير اللون ، ولكن هناك أيضًا blur()، و drop-shadow()(على عكس box-shadowذلك ، يتم تطبيقه على عقل العنصر الخارجي ، وليس على الحاوية الخاصة به).

linear-gradient(). radial-gradient()، جديدة وأقل المدعومة conic-gradient()، خياراتهاrepeating-* - جميعهم ينشئون صورًا متدرجة ويمكن استخدامها في أي مكان في CSS حيث تكون الصورة متوقعة ، عادةً مثل background-image.

scrollbar-colorيغير لون شريط التمرير ، مع تأثير جانبي غير سار بسرعات تمرير أقل بكثير في المتصفحات الحالية.

background-size: coverوcontain أنها سوف النطاق نسبيا صورة الخلفية بحيث يصبح كافيا إما كبيرة لتغطية كامل عنصر (حتى إذا تم اقتصاص منه) أو ما يكفي صغيرة لتناسب داخل (حتى إذا كان العنصر لا تغطي الخلفية كلها).

object-fit هي فكرة مماثلة ، ولكن بالنسبة لكائنات أخرى مثل <img>. object-positionالأعمال المناسبة مثل background-position.

من الممكن استخدام العديد من الخلفيات ، وهو أمر مفيد بشكل خاص للتدرجات - يمكنك تكديس العديد من التدرجات وصور الخلفية الأخرى ولون خالص في الأسفل.

text-decorationأصبح أكثر غرابة من ذي قبل ؛ يمكنك الآن تعيين لون الخط واستخدام عدة أنواع مختلفة من الخطوط ، بما في ذلك الخطوط المتقطعة والمقطعة والمموجة. يمكن استخدام

عدادات CSS للترقيم التعسفي للعناصر العشوائية ، مما يوفر إمكانية استخدام <ol> في أي مجموعة من العناصر. يتيح

لك العنصر الزائف ::markerإمكانية تصميم حاوية العلامة لعنصر قائمة أو حتى استبدالها بالكامل بعداد مخصص. دعم المتصفح غير كامل ولكنه يتحسن. وبالمثل ، القاعدة@counter-styleيطبق أسلوب عداد جديد تمامًا (على سبيل المثال ، 1 2 3 ، i ii iii ، ABC ، إلخ.) يمكنك استخدامه في أي مكان ، على الرغم من أن Firefox فقط هو الذي يدعمه.

image-set()يوفر قائمة بالصور الممكنة ويسمح للمتصفح بتحديد الأنسب بناءً على كثافة البكسل لشاشة المستخدم.

@font-faceيحدد خطًا يمكن تنزيله من مصدر خارجي ، على الرغم من أنه يمكنك استخدام خطوط Google .

pointer-events: noneيجعل العنصر يتجاهل الماوس تمامًا ؛ لا يستجيب للتوجيه ، وتنتقل النقرات مباشرةً إلى العنصر أدناه.

image-renderingقد يغير طريقة الاستيفاء للصورة إلى أقرب جار ، على الرغم من أن دعم المتصفح لا يزال غير متجانس ، وقد تحتاج أيضًا إلى تمكين بعض الخصائص الخاصة بالمتصفح.

clip-pathتقليم عنصر إلى شكل تعسفي. هناك أيضًا maskقناع ألفا عشوائي ، ولكن دعم المتصفح ليس منتظمًا ، وهذا بشكل عام إجراء معقد إلى حد ما.

النحو والأشياء

@supportsيسمح لك بكتابة كود CSS مختلف اعتمادًا على ما يدعمه المتصفح ، على الرغم من أنه في الوقت الحالي بعيدًا عن كونه مفيدًا كما سيكون في عام 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()، :nth-of-type()و :nth-last-of-type()(لتحديد كل من الثاني والثالث، وهكذا دواليك العناصر).

:not()عكس المحدد. :emptyيحدد العناصر بدون أطفال وبدون نص. :targetيحدد العنصر الذي قفز إليه جزء عنوان URL (على سبيل المثال ، إذا ظهر شريط العنوانindex.html#foo، في هذه الحالة ، يتم تحديد العنصر الذي يساوي معرفه foo).

::beforeو ::afterالآن مع اثنين من كولون للإشارة إلى أنها إنشاء عناصر الزائفة، وليس فقط تحديد مجال محدد لالموصلة به. ::selectionيضبط كيفية عرض النص المحدد ؛ ::placeholderيغير كيف يجب أن يبدو النص البديل (في حقول النص). تقوم

استعلامات الوسائط بمجموعة كاملة من الأشياء بحيث يمكن أن تتكيف صفحتك اعتمادًا على كيفية عرضها. prefers-color-schemeيخبرك استعلام الوسائط إذا كان نظام المستخدم مثبتًا على موضوع فاتح أو غامق ، بحيث يمكنك تكوينه تلقائيًا وفقًا لذلك.

يمكنك كتابة ألوان شفافة مثل #rrggbbaaأو#rgba، وكذلك استخدام الوظائف rgba()و hsla(). يمكن وصف

الزوايا بأنها كسور لدائرة كاملة بها turn. بالطبع ، degو rad(و grad) متوفرة أيضًا. تسمح لك

متغيرات CSS ("الخصائص المخصصة" رسميًا) بتعيين قيم مسماة مخصصة يمكن استخدامها في أي مكان. يمكنك استخدام هذا لتقليل مقدار معالجة CSS المطلوبة في جافا سكريبت (على سبيل المثال ، لإعادة رسم جزء معقد من الصفحة عن طريق تعيين متغير CSS بدلاً من تعيين عدد من الخصائص يدويًا) ، أو الحصول على مكون عام يستجيب للمتغيرات التي تم تعيينها بواسطة المكون الأصلي.

calc()يحسب تعبيرًا تعسفيًا ويقوم بتحديثه تلقائيًا (على الرغم من أن الحاجة إلى مثل هذه الحسابات يلغي جزئيًاbox-sizing)

vw، vh، vmin،vmax وتسمح لك بتحديد الطول كنسبة مئوية من عرض أو ارتفاع إطار العرض ، أو أيهما أكبر / أقل.

فوه! أنا متأكد من أنني نسيت الكثير ، وسيكمل زملائي القائمة في التعليقات. يمكنني الآن الهروب من عرض MDN والانتقال إلى الجزء الأخير والممتع من المقالة.

شبكة الصور المصغرة الحديثة

في النهاية ، نصل إلى الطريقة النهائية والصحيحة بشكل موضوعي لبناء شبكة مصغرة: باستخدام شبكة CSS . يمكن فهم الاختيار الصحيح حتى لأنه يحتوي على شبكة في الاسم. ميزات CSS الحديثة جيدة جدًا: تتيح لك قول ما تريد - وستعمل بالطريقة التي قلتها ، بدلاً من استخدام نوبات الفودو الغامضة.

وإليك مدى البساطة:

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

منجز! ذلك يعطينا الشبكة . ولديك عدد لا يحصى من الخيارات الأخرى للعب بها ، تمامًا مثل flexbox ، ولكن هذه هي الفكرة الرئيسية. لا تحتاج حتى إلى تصميم العناصر نفسها ؛ تتم معظم أعمال التخطيط في الحاوية. تبدو

خاصية Shorthand gridمخيفة بعض الشيء ، ولكن فقط لأنها مرنة. يقول: املأ الشبكة سطرًا واحدًا في كل مرة ، مع توليد العديد من الخطوط حسب الضرورة ؛ جعل أعمدة 250 بكسل مناسبة ، وتقسيم المساحة المتبقية بينهما بالتساوي.

شبكات 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 ... */

منجز. سهل. ولا يهم أيضًا ترتيب سرد التفاصيل في الترميز.

من ناحية أخرى

شبكة الإنترنت لا يزال قليلا من الكارثة. لا يعرف الكثيرون حتى أن Flexbox والشبكة مدعومتان الآن بشكل عام تقريبًا ؛ ولكن بالنظر إلى الوقت الذي استغرقه الانتقال من المواصفات المبكرة إلى التنفيذ الواسع ، لا يمكنني إلقاء اللوم عليهم. بالأمس فقط رأيت موقعًا صغيرًا جديدًا ، يتألف بشكل أساسي من قائمة ضخمة من "الصور المصغرة" بمختلف العروض ، واستخدم العوامات! ولا حتى inline-block! أنا لا أعرف من علمهم هذه الاختراقات الصعبة ولماذا لم يقل كلمة عن flexbox.

لكن الأسوأ من ذلك هو أنني ما زلت أواجه بانتظام المواقع التي تجعل التخطيط بأكمله باستخدام جافا سكريبت . إذا كنت تستخدم مانع البرنامج النصي uMatrixتجربتك الأولى هي مجموعة من النصوص تتداخل مع مجموعة نصية أخرى. هل هذه حقا خطوة للوراء؟ ما هو وضع العنوان والشريط الجانبي بشكل صحيح فقط عند تنفيذ البرنامج النصي؟ هذا ليس مثل تحميل صفحة بدون CSS - في HTML العادي ، لا شيء يمكن أن يتداخل بشكل افتراضي! يجب أن تشير عمدا للقيام بذلك!

ثم هناك شبكة الهاتف المحمول ، والتي ، على الرغم من كل النوايا الحسنة ، تبين أنها فكرة سيئة في الأساس. كانت الفكرة هي استخدام استعلامات وسائط CSS على شاشة الهاتف المحمول التي تطابق موقعًا عاديًا ، ولكن بدلاً من ذلك تحتوي معظم المواقع الرئيسية على إصدارات جوال منفصلة تمامًا. هذا يعني أنه إما أن موقع الجوال لا يحتوي على مجموعة من الوظائف المهمة ، وعليك التنقل بشكل خرقاء على هاتفك ، أو أن النسخة الكاملة من الموقع مليئة بالحماقة التي لا يحتاجها أحد حقًا.

حتى في إصدارات Google Docs / Sheets / etc. لأجهزة Android ، على سبيل المثال ، 5٪ فقط من إمكانيات إصدارات الويب. لا أعرف ماذا أفعل بها.

خيارات غير مستوفاة للمستقبل

لا أعرف كيف ستطور CSS المزيد ، خاصة الآن بعد أن حل Flexbox والشبكة جميع مشاكلنا. إنني أدرك بشكل غامض أن بعض الأعمال جارية بشأن دعم رياضي أوسع ، وربما بعض الوظائف لتغيير الألوان ، كما هو الحال في ساس. هناك واجهة برمجة تطبيقات للطلاء تتيح لك إنشاء خلفية سريعة باستخدام جافا سكريبت باستخدام Canvas API ، وهو أمر رائع جدًا. على ما يبدو ، في المواصفات حصلت بالفعل على attr()حساب قيمة أي عقار. يبدو الأمر رائعًا وقد يسمح لك حتى بتنفيذ جداول HTML بالكامل في CSS ، ولكن يمكنك أن تفعل الشيء نفسه مع المتغيرات. أعني ، "خصائص مخصصة" (الاسم الرسمي). أنا مهتم أكثر :is()بمطابقة قوائم المحددات والشبكة الفرعيةللشبكات الفرعية المتداخلة.

من الأسهل بكثير سرد الأشياء التي كانت في الخطط ، ولكن لم يتم تنفيذها.

العرض: كان التشغيل جزءًا من CSS منذ الإصدار 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 باستخدام Firefox ، بما في ذلك على الهاتف ، إذا كنت لا تستخدم iPhone لسبب ما ، والذي يحظر بشكل عام محركات المتصفح الأخرى. إنه أسوأ بكثير من أي شيء قامت به Microsoft على الإطلاق ، لكننا نقبله فقط لسبب ما ...

CSS القديمة والجديدة. تاريخ تصميم الويب