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

نشرت: 2019-05-01

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

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

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

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

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

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

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<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>

Grid level 2 and subgrid

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

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

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

Use CSS to test browser support

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

@supports (display: grid) {
  div {
    display: grid;
  }
}

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

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

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

@media (max-width: 20em)

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

@media (min-width: 20em) and (max-width: 35em)

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

استنتاج

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