7 تقنيات CSS جديدة ومذهلة لعام 2019

نشرت: 2019-05-01

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

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

1. رسالة أولية

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

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

يشير <number> إلى عدد الأسطر التي يشغلها الحرف والتي لا تُقبل فيها القيم السالبة ؛
يعد Normal مفيدًا إذا كنت تريد إعادة تعيين القيمة إذا كان من الممكن توريثها من التتالي ولم يتم تطبيق أي تأثير تحجيم على الحرف الأول ؛
يحدد <صحيح> عدد الأسطر التي يجب أن يغرق الحرف فيها عندما يكون حجمه مضبوطًا مسبقًا. يجب أن تكون القيم أكبر من الصفر ، وإذا لم يتم تحديد القيمة ، يتم تكرار قيمة الحجم ، وتقريبها إلى أقرب رقم صحيح موجب ؛

يمكن استخدام ::first-letter pseudo-element لاختيار الأحرف التي سيتم تنسيقها كأحرف أولية. لا يحدد ::first-letter pseudo-element الحرف الأول الحرف الأول من العنصر الذي يحتوي على العرض: مضمن ، ولكنه يعمل فقط على العناصر التي لها قيمة عرض من كتلة أو خلية جدول أو عنوان جدول أو عنصر قائمة .

[xhtml]
<! DOCTYPE html>
<html>
<head>
<ستايل>
ص {
عائلة الخطوط: Serif؛
حجم الخط: 20 بكسل ؛
الهامش السفلي: -15 بكسل ؛
}
h1 {
عائلة الخطوط: Sans-serif ؛
حجم الخط: 3.1em ؛
لون أسود؛
}
الجسم {
الحشو: 10 بكسل ؛
}
شعبة {
العرض: 550 بكسل ؛
ارتفاع الخط: 25 بكسل ؛
}
p: الأول من نوعه: الحرف الأول {
لون الخلفية: أسود ؛
اللون الابيض؛
تعويم: اليسار؛
حجم الخط: 50 بكسل ؛
الهامش الأيمن: 10 بكسل ؛
أعلى الهامش: 7 بكسل ؛
الحشو: 18 بكسل ؛
مربع الظل: 0 0 10px -2px أسود ؛
}
</style>
</head>
<الجسم>
<h1> حول الحرف الأول </ h1>
<div>
<p> فقط الشخص الذي يكرس نفسه لقضية ما بكل قوته وروحه يمكن أن يكون سيدًا حقيقيًا. لهذا السبب فإن الإتقان يتطلب من كل شخص "</ p>
<p> "يجب أن يكون الاهتمام بالإنسان ومصيره دائمًا الاهتمام الرئيسي لجميع المساعي الفنية. لا تنس هذا أبدًا وسط مخططاتك ومعادلاتك" </ p>
</div>
</body>
</html>
[/ xhtml]

Initial letter

2. الخطوط المتغيرة

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

تحدد الخطوط المتغيرة اختلافاتها من خلال محاور التباين وهناك 5 محاور قياسية:

مائل: يعمل المحور المائل بشكل مختلف لأنه ممكّن أو معطل ، ولا يوجد وسط بينهما. يمكن تعيين القيمة باستخدام خاصية نمط الخط في CSS. أيضًا ، من خلال تقديم توليف الخط: لا شيء ، سيمنع المستعرضات من تطبيق محور التباين بطريق الخطأ وخط مائل مركب.
wght: يتحكم في وزن الخط ويمكن تعيين القيمة باستخدام الخاصية font-weight CSS.
wdth: يتحكم في عرض الخط ويمكن ضبط القيمة باستخدام خاصية font-width CSS. في CSS باستخدام خاصية امتداد الخط ، يمكننا ضبط عرض الخط بقيم النسبة المئوية وإذا قدمنا قيمة خارج الخط- المجال المشفر ، يجعل المستعرض الخط عند أقرب قيمة مسموح بها.
opsz: يشير التحجيم البصري إلى ممارسة تغيير الحجم البصري للخط ويمكن ضبط القيمة باستخدام حجم الخط البصري في CSS. يتم تطبيق قيم الحجم البصري تلقائيًا بناءً على حجم الخط ، ولكن يمكن معالجتها باستخدام تباين الخط -إعدادات: عند استخدام حجم الخط البصري ، تكون القيم المقبولة تلقائية أو لا شيء ، وعند استخدام إعدادات تباين الخط ، يتم توفير قيمة رقمية.
slnt: يتحكم في انحدار الخط ويمكن ضبط القيمة باستخدام خاصية font-style CSS ، وهي متغيرة من خلال التعبير عنها كنطاق رقمي ، وهذا يسمح للخط بالتنوع في أي مكان على طول هذا المحور.

استخدام خطوط متغيرة مع @ font-face - عند استخدام خطوط متغيرة على الويب ، يتضمن ذلك تحديد قواعد @ font-face التي تشير إلى ملفات الخطوط المتغيرة ، فيما يلي رابطان يتيحان لك العثور على خطوط متغيرة: المحور-praxis.org و v -fonts.com.

[xhtml]
<! DOCTYPE html>
<html>
<head>
<title> حول الخطوط المتغيرة </title>
</head>
<ستايل>
@ font-face {
عائلة الخطوط: "Avenir Next Variable" ؛
src: url ('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') تنسيق ('truetype') ؛
}
لغة البرمجة {
عائلة الخطوط: 'Avenir Next Variable'، sans-serif؛
}
ص {
إعدادات تباين الخط: "wght" 630، "wdth" 88؛
}
</style>
<الجسم>
<h1> حول الخطوط المتغيرة </ h1>
<h2> حول الخطوط المتغيرة </ h2>
<p>
"يمكن لأي أحمق ذكي أن يجعل الأشياء أكبر وأكثر تعقيدًا ... يتطلب الأمر لمسة من العبقرية - والكثير من الشجاعة للتحرك في الاتجاه المعاكس."
</p>
</body>
</html>
[/ xhtml]

Variablefonts

3. الخصائص والقيم المنطقية

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

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

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

[xhtml]
<! DOCTYPE html>
<html>
<head>
<ستايل>
لغة البرمجة {
الخط: 20 بكسل Sans-serif ؛
}
الجسم {
الحشو: 25 بكسل ؛
لون الخلفية: أصفر فاتح.
لون أسود؛
}
.صندوق {
الحدود: 4 بكسل أسود صلب ؛
نصف قطر الحدود: 20 بكسل ؛
الحشو: 20 بكسل ؛
الهامش: 12 بكسل ؛
}
.واحد {
حجم الكتلة: 100 بكسل ؛
حجم مضمنة: 200 بكسل ؛
}
.اثنين {
الارتفاع: 100 بكسل ؛
العرض: 200 بكسل ؛
}
</style>
</head>
<الجسم>
</div>
<div id = "container">
<div class = "box one">
حجم كتلي هو 100 بكسل ، وحجمه المضمن هو 200 بكسل.
</div>
<div class = "box two">
طولي 100 بكسل وعرضي 200 بكسل.
</div>
</div>
</body>
</html>
[/ xhtml]

Logical properties and values

4. التمرير الالتقاط

تحدد خاصية CSS من نوع scroll-snap-type الصلابة التي يتم بها تطبيق نقاط المرفقات على حاوية التمرير ، بمعنى آخر ، تقوم بإغلاق منفذ العرض على عناصر أو مواقع معينة بعد أن ينتهي المستخدم من التمرير. إنها طريقة ممتازة لعرض معارض الصور سابقًا ، كان من الممكن استخدامه مع JavaScript ، ولكن بفضل وحدة CSS Scroll Snap الجديدة ، يمكن التحكم في التأثير في CSS. يتم إجراء التقاط التمرير عن طريق تحديد العنصر الرئيسي / الحاوية والعناصر الفرعية في الحاوية التي سيتم التقاطها وفقًا لـ القواعد المحددة داخل الحاوية. خاصية نوع التمرير-snap-type هي الخاصية الأكثر أهمية التي تنطبق على عنصر الحاوية. تحدد محور التمرير المفاجئ x أو y أو block أو inline أو كليهما ، وخاصية التمرير المفاجئة لا شيء ، تقارب أو إلزامي.

[xhtml]
<! DOCTYPE html>
<html>
<head>
<ستايل>
html ، body ، .C {
الارتفاع: 50٪؛
}
.C {
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مسافة بين ؛
التدفق المرن: العمود الآنراب ؛
عائلة الخطوط: arial ؛
}
.حاوية {
عرض: فليكس ؛
المرن: لا شيء ؛
تجاوز: تلقائي
}
.container.x {
العرض: 70٪؛
الارتفاع: 150 بكسل ؛
التدفق المرن: صف نوراب ؛
}
.container.y {
العرض: 256 بكسل ؛
الارتفاع: 256 بكسل ؛
التدفق المرن: العمود الآنراب ؛
}
.y.mandatory-scroll-snapping {
نوع التمرير المفاجئ: y إلزامي ؛
}
.x.proximity-scroll-snapping {
نوع التمرير المفاجئ: x القرب ؛
}
.container> div {
محاذاة النص: مركز ؛
محاذاة التمرير المفاجئة: مركز ؛
المرن: لا شيء ؛
}
.x.container> div {
ارتفاع الخط: 128 بكسل ؛
حجم الخط: 64 بكسل ؛
العرض: 100٪؛
الارتفاع: 128 بكسل ؛
}
.y.container> div {
ارتفاع الخط: 256 بكسل ؛
حجم الخط: 128 بكسل ؛
العرض: 256 بكسل ؛
الارتفاع: 256 بكسل ؛
}
.y.container> div: {
ارتفاع الخط: 1.4 ؛
حجم الخط: 80 بكسل ؛
}
.container> div: {
لون الخلفية: أبيض؛
}
.container> div: {
لون الخلفية: أبيض؛
}
</style>
</head>
<الجسم>
<div class = ". C">
<div class = "container x mandatory-scroll-snapping" dir = "ltr">
<div> التقاط التمرير </ div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>
<div class = "container y mandatory-scroll-snapping" dir = "ltr">
<div> حول التقاط Scropp </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>
</div>
</body>
</html>
[/ xhtml]

Scroll snapping

5. شبكة المستوى 2 والشبكة الفرعية

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

[xhtml]
<! DOCTYPE html>
<html>
<head>
<title> CSS Grid Level 2 - شبكة فرعية </ title>
</head>
<ستايل>
الجسم {
الهامش: 20 بكسل ؛
}
.واحد {
لون الخلفية: أسود ؛
اللون الابيض؛
نصف قطر الحدود: 20 بكسل ؛
الحشو: 20 بكسل ؛
حجم الخط: 120٪؛
}
.واحد {
لون الخلفية: lightgrey.
}
.جريد {
عرض: شبكة ؛
فجوة الشبكة: 10 بكسل ؛
أعمدة شبكة القوالب: 3fr 1.5fr 2fr 1fr 1fr 2fr ؛
لون الخلفية: أبيض؛
لون أسود؛
الهامش: 1.5em 0 ؛
}
.أ {
حشوة: 0؛
فجوة الشبكة: 15 بكسل ؛
عمود الشبكة: تلقائي / امتداد 4 ؛
عرض: شبكة ؛
أعمدة شبكة القوالب: 3fr 1.5fr 1.5fr ؛
}
</style>
<الجسم>
<div class = "GRID">
<div class = "one 1"> 1 </div>
<div class = "one 2"> 2 </div>
<div class = "one 3"> 3 </div>
<div class = "one 4"> 4 </div>
<div class = "one 5"> 5 </div>
<div class = "one 6"> 6 </div>
<div class = "one 7"> 7 </div>
<div class = "one 8"> 8 </div>
<div class = "one A">
<div class = "one 9"> 9 </div>
<div class = "one 10"> 10 </div>
<div class = "one 11"> 11 </div>
<div class = "one 12"> 12 </div>
<div class = "one 13"> 13 </div>
<div class = "one 14"> 14 </div>
</div>
<div class = "one 15"> 15 </div>
<div class = "one 16"> 16 </div>
<div class = "one 17"> 17 </div>
<div class = "one 18"> 18 </div>
<div class = "one 19"> 19 </div>
<div class = "one 20"> 20 </div>
</div>
</body>
</html>
[/ xhtml]

Grid level 2 and subgrid

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

6. استخدم CSS لاختبار دعم المتصفح

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

Use CSS to test browser support

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

[المغلق]
supports (عرض: الشبكة) {
شعبة {
عرض: شبكة ؛
}
}
[/ css]

7. تحسينات في بناء الجملة لاستعلامات الوسائط - المستوى 4

تحتوي مواصفات Media Queries Level 4 على بعض التحسينات على بناء الجملة لإجراء استعلامات عن الوسائط باستخدام ميزات لها نوع نطاق مثل الارتفاع والعرض.

للتوضيح ، نستخدم max-function للعرض

[المغلق]
media (أقصى عرض: 20em)
[/ css]

يمكننا تجربة عرض بين قيمتين عشوائيتين باستخدام min- و max-

[المغلق]
media (الحد الأدنى للعرض: 20em) و (أقصى عرض: 35em)
[/ css]

لفهم أفضل ، في المثال أعلاه نريد أن نقول إن العرض أكبر من أو يساوي 20em وأصغر أو يساوي 35em

خاتمة

يجب أن يكون مطورو مواقع الويب على دراية بأي تقنيات CSS جديدة وأن يطبقوها في المشاريع المستقبلية. سيرفعون معايير عملهم وسيسعد العملاء بالمظهر المحسن لموقع الويب.