وحدات CSS الجديدة (والقديمة) التي بالكاد سمعت عنها

تم تطوير جافا سكريبت بسرعة كبيرة مؤخرًا ، لكن اللغات المساعدة لمطور الويب لا تقف ثابتة.

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

في هذه المقالة ، سنتحدث عن ميزات CSS التي لم تسمع عنها على الأرجح ، وإذا سمعت ، فمن غير المحتمل أن نستخدمها - حول الوحدات. لا ، نحن لا نتحدث عن الوحدتين vw لـ vw و vh (على الرغم من أنه لا يزال يتعين عليّ شرحهما لأشخاص لا يجيدون CSS).



فيما يلي وحدات CSS الجديدة التي سيتم إدراجها في CSS Values ​​and Units Module Level 4 .

lh و rlh

لنبدأ على الفور بالجزء الممتع. lh هو ارتفاع السطر الحالي ، والذي يمكن أن يكون مفيدًا جدًا عند حساب ارتفاع النص. لسوء الحظ ، لا يوجد متصفح يدعمه.
rlh ، بدوره ، عن طريق القياس مع rem for em يطابق ارتفاع خط العنصر الجذر.

vi و vb

فيما يلي ابتكار آخر مثير للاهتمام ، والذي ، بالقياس مع vw و vh يعادل نسبة من حجم النافذة. وهي:

• vi يعادل 1٪ من حجم إطار العرض في اتجاه كتابة السطر ؛
• vb يعادل 1٪ من حجم إطار العرض عبر اتجاه كتابة السطر.

ما هذه المحاور المضمنة والكتلة ؟ في حالة اللغات ذات الكتابة الأفقية ، على سبيل المثال مع اللغة الإنجليزية أو العربية (حيث تكتب من اليمين إلى اليسار) ، فهي المحاور الأفقية والرأسية ، على التوالي ، والوحدات هي ما يعادل vw و vh .

في حالة اللغات ذات الكتابة الرأسية (على سبيل المثال ، باللغة اليابانية) ، فإن هذه المحاور متبادلة .

تم أخذ هذه الاختلافات في الاعتبار في CSS منذ البداية (على سبيل المثال ، في خاصية display ) ، والآن يتم استخدامها بشكل منهجي لإنشاء عدد متزايد من مواصفات CSS.

من المؤسف أنه في هذه الحالة لا يوجد متصفح واحد يدعم هذه الوحدات حتى الآن.

ic

منذ أن بدأنا الحديث عن التدويل ، من المناسب الانتقال إلى وحدة ic ، النظير الشرقي للوحدة ch ، مما يعني حجم الحرف 0. ic ، بدوره ، يعني حجم ideogram CJK (الصينية واليابانية والكورية) 水 ("الماء" ، U + 6C34) ، وبمعنى واسع ، يمكن فهم هذه الوحدة على أنها عدد الأيدوجرامات.

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

ومرة أخرى ، لا يوجد دعم في المتصفحات.

cap

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

هذا يرجع إلى حقيقة أنه لا يمكن استخدام هذه الوحدة مع أي متصفح حتى الآن.

لنتحدث الآن عن وحدات قياس أكثر تحديدًا ...

دعونا نلقي نظرة على المواصفات القديمة (المستوى 3) - على الرغم من أنه يجب استخدامها على نطاق واسع وصيانتها ، فلا يعرف الجميع بعض مكوناتها.

turn والوحدات ذات الصلة

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

استخدمنا deg لتدوير الأشياء مع transform ، أليس كذلك؟ turn واحدة 360 deg . لا شيء معقد. هذا مفيد جدًا للرسوم المتحركة (خاصة لعمليات التدوير بزاوية 360 درجة) وقيم التقدم المحسوبة في JavaScript.

لكن هذا ليس كل شيء! تشير المواصفة أيضًا إلى الوحدات grad rad ، المقابلة grad والراديان.

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

Q

نظرًا لأن هذه الوحدة تشير إلى المستوى 3 ، فيجب أن تدعمها جميع المتصفحات. في الواقع ، يتم دعمه فقط في Firefox منذ الإصدار 49 الذي تم إصداره حديثًا نسبيًا (من سبتمبر 2016).

إذن ما هو Q ؟ إنها 0.25 مم فقط - ربع مليمتر.

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

نسبة العرض إلى الارتفاع

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

أين يمكنني تطبيقه؟ بطبيعة الحال ، في استفسارات وسائل الإعلام! مثال:

 @media screen and (min-aspect-ratio: 16/10) { /* something for wide screens */ } 

أخبار سارة: مدعومة من جميع المتصفحات! مرحى!

Hz و kHz

ما هذا؟ ذهبنا إلى المدرسة بأن هذه وحدات تردد . ما علاقة CSS بها؟

هذا صحيح ، هذه وحدات تردد ، وفي وقت كتابة هذا التقرير ، لا توجد خصائص CSS تتطلب التردد. ومع ذلك ، تم تحديد وحدات التردد. لماذا؟

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

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

من السهل تخمين أنه لا يوجد متصفح يدعم وحدات التردد - لا يزال لا يمكن استخدامها.

الخطط المستقبلية

عزيزي القارئ ، في الختام ، أود أن أسأل ما إذا كنت قد استخدمت أو ستستخدم وحدات القياس أعلاه؟ ربما ستفعل ذلك الآن؟

ألق نظرة على VPS.today ، موقع للعثور على خوادم افتراضية. 1500 تعريفة من 130 مضيفًا ، وواجهة مريحة وعددًا كبيرًا من المعايير للعثور على أفضل خادم افتراضي.