.card { display: grid; grid-template-columns: 150px 1fr; gap: 1rem;
}
.card .nav { display: flex; gap: 0.5rem;
}

تصميم

أنت حقا يجب أن تتعلم حول flexbox و شبكة إذا لم تكن كذلك - فهي حقًا حجر الزاوية في تطوير CSS هذه الأيام. أكثر من أي ميزة حصلنا عليها في CSS3.

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

html { --bgColor: #70f1d9; --font-size-base: clamp(1.833rem, 2vw + 1rem, 3rem); --font-size-lrg: clamp(1.375rem, 2vw + 1rem, 2.25rem);
} html.dark { --bgColor: #2d283e;
}

خصائص CSS المخصصة

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

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

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001s !important; }
} @media (prefers-color-scheme: dark) { :root { --bg: #222; }
}

استعلامات التفضيل

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

.block { background: hsl(0 33% 53% / 0.5); background: rgb(255 0 0); background: /* can display colors no other format can */ color(display-p3 0.9176 0.2003 0.1386) background: lab(52.2345% 40.1645 59.9971 / .5);} background: hwb(194 0% 0% / .5);
}

تغييرات اللون

ينتقل بناء جملة اللون إلى الوظائف التي تقبل ألفا (الشفافية) دون الحاجة إلى تغيير اسم الوظيفة. على سبيل المثال ، إذا كنت تريد اللون الأزرق النقي في أيام CSS3 ، فقد تفعل ذلك rgb(0, 0, 255). اليوم ، ومع ذلك ، يمكنك القيام بذلك بأسلوب بدون فاصلة (كلا العملان): rgb(0 0 255)، ثم أضف ألفا بدون استخدام وظيفة مختلفة: rgb(0 0 255 / 0.5). نفس الوضع بالضبط ل hsl(). مجرد دقة صغيرة ، وكيف ستعمل وظائف الألوان في المستقبل فقط عمل.

الحديث عن بناء جمل الألوان في المستقبل:

body { font-family: 'Recursive', sans-serif; font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1;
}

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

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

.cut-out { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mask { mask: url(mask.png) right bottom / 100px repeat-y;
}

.move-me { offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite;
} @keyframes move { 100% { offset-distance: 100%; }
}

مسارات

SVG انفجرت أيضًا منذ CSS3. تستطيع محصول مستقيم أي عنصر في الأشكال عبر clip-path، بجلب صفات تشبه SVG إلى CSS. ليس هذا فقط ، ولكن يمكنك تحريك العناصر على طول المسارات ، وتعويم العناصر على طول المسارات ، وحتى تحديث مسارات عناصر SVG.

كل هؤلاء يشعرون بأنهم مرتبطون بي نوعًا ما:

• clip-path - يسمح لنا حرفيًا بقص العناصر إلى أشكال.
• masks - مشابه للقص ، لكن يمكن أن يكون للقناع صفات أخرى مثل كونه قائمًا على قناة ألفا للقناع.
• offset-path - يوفر مسارًا يمكن وضع عنصر عليه ، بشكل عام لغرض بتحريكه على طول هذا المسار.
• shape-outside - يوفر مسارًا لعنصر عائم تلتف حوله العناصر الأخرى.
• d - ملف SVG d السمة على أ <path> يمكن أن يكون تم التحديث عبر CSS.

.disable { filter: blur(1px) grayscale(1);
} .site-header { backdrop-filter: blur(10px);
} .styled-quote { mix-blend-mode: exclusion;
} 

مرشحات CSS

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

كل هؤلاء يشعرون بأنهم مرتبطون بي نوعًا ما:

• filter - جميع أنواع التأثيرات المفيدة الشبيهة ببرنامج Photoshop مثل السطوع والتباين وتدرج الرمادي والتقليل وما إلى ذلك. يعد التعتيم قوة فريدة حقًا.
• background-blend-mode - مرة أخرى ، يستحضر برنامج فوتوشوب كيف يمكنك مزج الطبقات. اضرب الطبقات لتغميق ودمجها. تراكب لخلط الخلفية واللون. يعتبر التفتيح والتغميق من التأثيرات الكلاسيكية التي لها فائدة حقيقية في تصميم الويب ، ولن تعرف أبدًا متى سيخلق تأثير الإضاءة الباطني مظهرًا رائعًا.
• backdrop-filter - نفس القدرات التي تمتلكها filter، لكنهم فقط تطبيق في الخلفية وليس العنصر بأكمله. يعد عدم وضوح الخلفية فقط تأثيرًا مفيدًا بشكل خاص.
• mix-blend-mode - نفس القدرات التي تمتلكها background-blend-mode، ولكن للعنصر بأكمله بدلاً من الاقتصار على الخلفيات.

import "https://unpkg.com/extra.css/confetti.js";

body { background: paint(extra-confetti); height: 100vh; margin: 0;
}

هوديني

هوديني عبارة عن مجموعة من التقنيات التي تستند جميعها أساسًا إلى توسيع CSS باستخدام JavaScript ، أو على الأقل على تقاطع CSS و JavaScript.

• واجهة برمجة تطبيقات الرسام - تُرجع صورة مبنية من <canvas> واجهات برمجة التطبيقات ويمكن التحكم من خلال الخصائص المخصصة.
• خصائص وقيم API / OM مكتوب - يعطي أنواعًا للقيم (على سبيل المثال 10px) كان من الممكن أن تكون سلاسل.
• تخطيط API - قم بإنشاء الخاصة بك display خصائص.
• واجهة برمجة تطبيقات الرسوم المتحركة

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

my-component { --bg: lightgreen;
} :host(.dark) { background: black; } my-component:part(foo) { border-bottom: 2px solid black;
}

الظل DOM

يظهر Shadow DOM قليلاً إذا لعبت به <svg> و <use> عنصر. العنصر "المستنسخ" الذي يأتي من خلاله له ظل DOM له قيود على كيفية تحديد "من خلاله". ثم ، عندما تدخل <web-components>، إنها نفس كرة الشمع.

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