كيفية تحويل شيفرة CSS إلى تنسيقات مرئية

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

اقرأ هذا المقال بتركيز وفي بيئة هادئة.

التحليل Parsing

تبدأ عملية تحليل أو معالجة تنسيق CSS حالما ينتهي المتصفح من تحميله، إذ يُمكن أن يتواجد هذا التنسيق ضمن ملفاتٍ خاصةٍ به بلاحقة css، أو مضمنًا بملفاتٍ فردية داخل وسم <style>، أو مُضمنًا سطريًا ضمن وسوم HTML باستخدام سمة style. يُحلّل ويُرمّز تنسيق CSS بالاعتماد على مواصفات الأنماط، بحيث ستحصل في نهاية هذه العملية على هيكلية بيانات تتضمن كل المُحددات selector والخصائص وقيم هذه الخصائص.

ألقِ نظرةً على تنسيق CSS التالي:

.fancy-button {
    background: green;
    border: 3px solid red;
    font-size: 1em;
}

سينتج عنه هيكلية البيانات التالية لتسهيل استخدامها في مراحل لاحقة.

لاحظ كيف أنّ المتصفح تخلص من الاختصارات الموجودة في background وborder واستبدلها بقيمها الحقيقية، حيث تُستخدم الاختصارات من قِبل المطورين، بينما يتعامل المتصفح مع القيمة الحقيقية لهذه الاختصارات، كما يتابع محرك المتصفح بناء شجرة DOM بعد الانتهاء مما سبق.

الحسابات

بعد الانتهاء من تحليل التنسيق الموجود ضمن المحتوى المقروء، تأتي المرحلة الثانية وهي إنجاز حسابات التنسيق حيث يوجد لكل القيم قيم محسوبة قياسية يجب تخفيضها إليها. وبعد الانتقال من مرحلة الحسابات، ستُخفض قيم الأبعاد لواحدٍ من ثلاثة مُخرجاتٍ مُحتلمة، هي auto أو نسبة مئوية أو قيمة مُقاسة بالبكسل. ألقِ نظرةً على الأمثلة التالية لتتوضح لديك ثم وازن بين ما كتبه المطوّر والنتيجة التالية لمرحلة الحسابات.

توريث التنسيق Cascade

توجد عدة مصادر لتنسيق CSS، ولذلك يحتاج المتصفح لطريقةٍ يُحدد فيها أي تنسيقٍ يجب تطبيقه على عنصرٍ ما، ولعمل ذلك يستخدم المتصفح ميزةً تُدعى دقة التحديد specificity، والتي تحسب عدد الوسوم والأصناف والمعرفات ومحددات السمات المُستخدمة في مُحدد، إضافةً إلى تصاريح important! الموجودة. حيث تُعطى التنسيقات المُضمنة باستخدام سمة style الترتيب الأعلى لتتفوق على أي تنسيق من وسم <style> أو ملف css خارجي، وعند استخدام المطور important! على قيمة تنسيقٍ ما فسوف يتفوق هذا التنسيق على أي تنسيق CSS مهما كان موقعه إلا في حال وجود تصريح important! أيضًا.

لتوضيح الأمر أكثر ستُعرض بعض المحددات مع درجة التحديد.

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

في المثال التالي ستكون خلفية وسم div بلونٍ أزرق.

div {
    background: red;
}

div {
    background: blue;
}

سنتوسّع أكثر في مثال fancy-button.:

.fancy-button {
    background: green;
    border: 3px solid red;
    font-size: 1em;
}

div .fancy-button {
    background: yellow;
}

سوف ينتج عن تنسيق CSS هيكلة البيانات التالية، وسنتابع البناء على هذا المثال في بقية المقال.

تتبع وفهم المصادر

يوجد مصادرٌ مختلفةٌ لتنسيقات CSS، وهي:

• المستخدم user: أي تنسيقٍ مضبوطٍ ليكون شاملًا داخل وكيل المستخدم من قِبل المستخدم.
• المؤلف author: تنسيقات مطوّر الويب.
• وكيل المستخدم user agent: أي شيءٍ يستطيع إخراج تنسيقات CSS، وهو المتصفح بالنسبة لمعظم المطورين والمستخدمين.

يضمن توريث التنسيق لكلٍ من المصادر السابقة أن تكون الأولوية للمصدر الأول "المستخدم" ثم "المؤلف" ثم "وكيل المستخدم".

لاحظ ماذا سيحدث عند ضبط المستخدم لحجم خط المتصفح إلى قيمة صغرى 2em.

تطبيق توريث التنسيق

سيُرتب المتصفح هيكلية البيانات حالما يحصل عليها كاملةً من جميع المصادر ليبدأ عملية الترتيب أولًا حسب المصدر، ثم حسب درجة التحديد، وأخيرًا حسب ترتيب المستند.

ينتج عما سبق القيم والخصائص التي سوف تُستخدم للصنف fancy-button. (كلما كان ترتيبه في الجدول "أعلى" على كلما كان أفضل)، فعلى سبيل المثال، نلاحظ من الجدول السابق أن إعدادات تفضيلات متصفح المستخدم لها أولوية على تنسيق المطوّر.

يتحرى المتصفح الآن عن جميع عناصر DOM المطابقة للمحدّدات المذكورة سابقًا ويعطّل التنسيقات المحسوبة الناتجة عن العناصر المطابقة، لتكون عناصر الوسم div في هذه الحالة كالتالي:

للتعرّف على المزيد عن آلية عمل توريث التنسيق، ألقِ نظرةً على التوثيق الرسمي.

نموذج كائن CSS

لقد قُطع شوطٌ طويلٌ للوصول لهذه المرحلة ولكن لم تنته بعد، ويجب الآن تحديث نموذج CSSOM الموجود ضمن document.stylesheets لكي يُمثل جميع ما حُلّل وحُسِب حتى هذه النقطة.

يستخدم مطورو الويب هذه المعلومة دون إدراكهم لها، فمثلًا عند استدعاء getComputedStyle()‎، سوف تُفعّل العملية المذكورة سابقًا عند الضرورة.

التخطيط Layout

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

سيُغطي هذا القسم مبادئ مخطط CSS التالية:

• تنسيق المحتوى Formatting Context إذ توجد عدة أنواعٍ لتنسيق المحتوى يستدعيها المطور من خلال قيمة display للعنصر، ومن أكثر هذه التنسيقات استخدامًا نجد الكتلة Block والمرن flex والشبكة grid، وخلايا الجدول table-cells والمُضمنة سطريًا inline، كما يُمكن لتنسيقات CSS أخرى فرض صيغة التنسيق أيضًا، مثل position: absolute أو باستخدام float أو باستخدام أعمدة متعددة.
• كتلة الاحتواء Containing block وهي عبارة عن كتلة أب تستقي التنسيقات منها.
• الاتجاه المُضمن سطريًا Inline direction وهو يمثّل الاتجاه الذي يُكتب به النص اعتمادًا على نمط الكتابة للعنصر، فمثلًا هو عبارة عن المحور الأفقي في الكتابة العربية، أما عند الكتابة باللغة الصينية فهو المحور الأفقي.
• اتجاه الكتلة Block direction والذي يُماثل عمل الاتجاه المُضمن سطريًا، ولكنه يكون عموديًا على ذلك المحور، وبالتالي يكون محوره في الكتابة العربية هو المحور العمودي، بينما يكون محوره هو الأفقي عند الكتابة باللغة الصينية.

تفسير قيم الأبعاد التلقائية auto

تكون قيم الأبعاد في مرحلة الحسابات واحدةٌ من ثلاثة احتمالات هي auto، أو نسبة مئوية، أو بكسل. والهدف من المُخطط هو قياس حجم وتحديد موقع كل صندوق ضمن شجرة الصناديق وتحضيرهم لعملية الرسم والطباعة على الشاشة، إذ يوجد العديد من الأمثلة البصرية ستسهّل فهم آلية بناء شجرة الصناديق وتجعل متابعتها أسهل، بحيث لا تُعرض صناديق تنسيقات CSS الفردية بل فقط الصندوق الأساسي. ألقِ نظرةً على مُخطط عبارة "Hello World" باستخدام الشيفرة التالية.

<body>
<p>Hello World</p>
<style>
    body {
        width: 50px;
    }
</style>
</body>

يبدأ المتصفح بعنصر body الرئيسي، حيث يُنشئ الصندوق المبدئي الذي يملك عرضًا بقيمة 50 بكسل وارتفاعًا افتراضيًا auto.

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

ينتقل المتصفح الآن للنص "Hello World"، وهو عبارة عن عقدة نصية في DOM وبناءً عليها يُنشأ صندوقًا سطريًا داخل المخطط، حيث يُلاحظ خروج النص عن حدود عنصر body، وهذا ما ستُعالجه الخطوة اللاحقة.

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

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

بعد الانتهاء من المُخطط سوف يمر المتصفح على جميع عناصر شجرة الصندوق ليُفسر أيًّا من قيمة auto أو قيمة مئوية لم تُفسر بعد. تستطيع أن تلاحظ في الصورة أعلاه أن المقطع وbody الآن يحتويان كامل العبارة بسبب ضبط الارتفاع height إلى القيمة auto.

التعامل مع العومان float

سننتقل الآن لأمورٍ أكثر تعقيدًا. بفرض لدينا مُخططًا عاديًا، وزرًا يحوي عبارة "Share It" وقيمة float تُشير إلى يسار مقطع النص الأجنبي. تعتمد خاصية العوم float على مبدأ " تقلص لتُناسب shrink-to-fit" حتى يتسع المحتوى، حيث يصغر الصندوق حتى حجم مُناسب للإحاطة بمحتواه إذا كانت أبعاده auto. توجد صناديق أخرى مماثلة لصندوقfloat مثل الصناديق ذات الموقع absolute بما فيها العناصر ذات الموقع الثابت fixed، وخلايا الجدول ذات الحجم auto.

ألقِ نظرةً على الشيفرة التابعة للزر السابق.

<article>
    <button>SHARE IT</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesq</p>
</article>
<style>
    article {
        min-width: 400px;
        max-width: 800px;
        background: rgb(191, 191, 191);
        padding: 5px;
    }

    button {
        float: left;
        background: rgb(210, 32, 79);
        padding: 3px 10px;
        border: 2px solid black;
        margin: 5px;
    }

    p {
        margin: 0;
    }
</style>

تبدأ العملية هنا كما في المثال السابق "Hello World"، لذلك سنتجاوز هذه المرحلة وصولًا إلى مرحلة معالجة الزر العائم.

تُنشئ خاصية float كتلة تنسيق محتوى جديدة Block Formatting Context أو اختصارًا BFC، وهي كتلة تتقلص لتحيط بالمحتوى، لذلك يعمل المتصفح على نوع مُخطط مُعين يُدعى قياس المحتوى content measure، حيث يبدو هذا المخطط في هذا النمط مُماثلًا لبقية المُخططات، ولكن مع اختلافٍ مهمٍ هو أنه أُنشئ في مساحةٍ لا نهائية.

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

اقتباس

ملاحظة: اللون المُستخدم للأزرار هنا للتوضيح فقط.

يعلم محرك المتصفح الآن أن العرض الأصغري هو 86 بكسل والأعظمي 115 بكسل، وسوف يُمرر هذه المعلومات للصندوق الأب ليُقرر العرض ويحدد الموقع الصحيح للزر.

توجد مساحة في هذا المثال تتسع لنمط float بحجمه الأعظمي وهو الحجم الذي سيُعرض به الزر.

يُغيّر المتصفح تموضع محتوى تنسيق كتلة article، ليضمن التزام المتصفح بالمعايير والتفاف المحتوى حول العنصر العائم float، حيث يُمرّر الموقع إلى المقطع ليستخدمه أثناء إنشاء التخطيط.

يتابع المتصفح من هنا نفس عملية التخطيط التي شُرحت في المثال الأول، ولكنه يتأكد من أنّ أي محتوى سطري أو أنّ موقع بداية أي كتلة هو خارج المساحة المحجوزة من قبل float.

يتابع المتصفح المرور على الشجرة واستنساخ العُقد متجاوزًا المساحة المحجوزة للكتلة السابقة، وهذا يسمح للسطر الأخير من النص (والسطر الذي قبله) بالانطلاق من بداية صندوق المحتوى مع اتجاه السطر، ثم يعود المتصفح ليمر على الشجرة بالاتجاه المعاكس ليُفسر قيم auto وقِيَم النسب المئوية حسب الحاجة.

فهم عملية التجزئة Fragmentation

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

لفهم الأمر، ألقِ نظرةً على نفس المثال الذي يستخدم CSS متعدد الأعمدة.

<body>
    <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh orci, tincidunt eget enim et, pellentesque condimentum risus. Aenean sollicitudin risus velit, quis tempor leo malesuada vel. Donec consequat aliquet mauris. Vestibulum ante ipsum primis in faucibus
        </p>
    </div>
<style>
    body {
        columns: 2;
        column-fill: auto;
        height: 300px;
    }
</style>
</body>

حالما يصل المتصفح لصندوق محتوى التنسيق متعدد الأعمدة، سيلاحظ وجود مجموعةٍ من الأعمدة.

سوف يتبع نفس نموذج الاستنساخ كما في السابق، ثم يُنشئ مُجزّأةً بأبعادٍ صحيحةٍ ليُنفذ رغبة المؤلف بما يخص الأعمدة.

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

الرسم

تحدثنا حتى الآن عن كامل محتوى CSS وتحليله وتوريثه ضمن شجرة DOM والمخطط الكامل، لكننا لم نتحدث عن تطبيق اللون أو الحدود أو الظلال وما شابهها من تصميمٍ للمخطط، ويُدعى ما سبق من أمور بالرسم.

توجد معايير للرسم في تنسيقات CSS، وتستطيع قراءة شرح كامل ضمن CSS 2.2 Appendix E.

تتبع عملية الرسم الترتيب التالي:

• الخلفية
• الحدود
• المحتوى

بالتالي إذا عُدنا لزر "Share it" السابق واتّبعنا نفس العملية، فسوف تسير بالترتيب الموّضح في الشكل التالي.

حالما تنتهي العملية السابقة، سوف يُحوّل العنصر إلى صورة نقطية وهي النتيجة النهائية لكل عنصر ضمن المُخطط.

خاصية تكديس المحتوى

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

إن إنشاء محتوى مُكدس جديد يُغير ترتيب رسم العناصر، ألقِ نظرةً على المثال التالي:

<body>
<div id="one">
    Item 1
</div>
<div id="two">
    Item 2
</div>
<style>
body {
    background: lightgray;
}
div {
    width: 300px;
    height: 300px;
    position: absolute;
    background: white;
    z-index: 2;
}
#two {
    background: green;
    z-index: 1;
}
</style>
</body>

سوف يُرسم الملف السابق حسب ترتيب ورود العناصر دون استخدام z-index أي أنه سيرسم "item2" فوق "item1"، ولكن عند استخدام z-index، يتغير ترتيب الرسم.

ستُشرح كل خطوة كما هو الحال في الأمثلة السابقة.

يبدأ المتصفح بالصندوق الجذر المرسوم في الخلفية.

يتجاوز المتصفح ترتيب العناصر في الملف ليبدأ بأدنى مستوى في المحتوى المُكدّس (في هذه الحالة هو العنصر "item2")، ثم يبدأ برسم العنصر التالي متّبعًا نفس القواعد السابقة.

ينتقل المتصفح الآن للمستوى الأعلى للمحتوى المُدّكس (وهو "item1" في هذه الحالة)، ثم يرسم هذا العنصر معتمدًا على الترتيب المُعرف في CSS 2.2.

لا يأخذ z-index اللون بالحسبان، بل هو مسؤول فقط عن العنصر المرئي بالنسبة للمستخدِم وبالتالي النص واللون الظاهرين له.

التكون Composition

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

لتفسير حاجة أي موقع أكثر من صورة نقطية أو مكوّن طبقة، ألقِ نظرةً على المثال التالي الأكثر تعقيدًا، وافترض أن فريق عملك يحتاج لفت النظر لجزء من الموقع من خلال جعله ينبض باستخدام تحويل CSS.

ستكون الشيفرة لهذا القسم والذي يُدعى Clippy كالتالي:

<div class="clippy"></div>
<style>
.clippy {
    width: 100px;
    height: 100px;
    animation: pulse 1s infinite;
    background: url(clippy.svg);
}

@keyframes pulse {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(2, 2);
    }
}
</style>

عندما يقرأ المتصفح أن المطور يريد تحريك Clippy ضمن حلقة لا نهائية فسيكون لديه خياران:

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

سوف يختار المتصفح في معظم الحالات الخيار الثاني ليُنشئ التالي.

ثم يُعيد رسم الصورة النقطية Clippy في الموقع الصحيح مع تطبيق الحركة النابضة له وهذا يُحقق أداءً أفضل، ففي كثيرٍ من المحركات يكون المكوّن ضمن خيطٍ thread خاصٍ به، وهذا يحول دون حجز الخيط الرئيسي.

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

تطبيق وهم التفاعلية

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

ألقِ نظرة على المثال التالي الذي سوف نستخدم ضمنه زر Share it بإسلوبٍ متجانسٍ تفاعلي.

button {
    float: left;
    background: rgb(210, 32, 79);
    padding: 3px 10px;
    border: 2px solid black;
}

button:hover {
    background: teal;
    color: black;
}

أُضيف هنا شبه صنف يُخبر المتصفح أن عليه تغيير خلفية الزر ولون النص عندما يحرك المستخدم الفأرة فوق الزر وهذا يدفع للتساؤل "كيف يتعامل المتصفح مع هذه الحالة؟".

يتتبع المتصفح مجموعةً متنوعةً من المُدخلات تمر بعملية تُدعى hit testing أثناء تغيّرها، وتبدو العملية للمثال السابق كالتالي.

1. يحرك المستخدم الفأرة فوق الزر.
2. يرفع المتصفح حدث event يُخبر بأن الفأرة قد تحركت لتدخل خوارزمية hit testing، والتي تسأل ما يلي "ما هو الصندوق أو الصناديق التي تلمسها الفأرة؟"
3. تُعيد الخوارزمية الصندوق المرتبط بزر Share it.
4. يسأل المتصفح نفسه "هل يجب أن أفعل أي شيءٍ طالما أن الفأرة تتحرك فوق هذا الصندوق؟"
5. يُشغل المتصفح بسرعة التنسيقات والتوريث لهذا الصندوق وأبنائه ليُقرر وجود شبه صنف hover: مع تعديلات رسم للتنسيق فقط ضمن هذه الكتلة.
6. يعلق المتصفح هذه التنسيقات في عنصر DOM (كما هو الحال في مرحلة التوريث) وهو الزر في هذه الحالة.
7. يتجاوز المتصفح المخطط السابق ويرسم مباشرةً صورةً نقطيةً جديدة.
8. تُمرر الصورة النقطية الجديدة للمكوّن ثم إلى المستخدم.

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال Braces to Pixels لصاحبه Greg Whitwort.

اقرأ أيضًا

• تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS
• تنسيق الصور في CSS
• التنسيقات الأساسية للعناصر في CSS
• تنسيق الخلفيات Backgrounds في CSS