حزمة Bun تحتوي على دعم مدمج لـ CSS مع الميزات التالية:

• تحويل ميزات CSS الحديثة/المستقبلية للعمل على جميع المتصفحات (بما في ذلك إضافة بادئات البائعين)
• التصغير
• وحدات CSS
• Tailwind (عبر مكون إضافي أصلي للحزمة)

التحويل

حزمة CSS في Bun تتيح لك استخدام ميزات CSS الحديثة/المستقبلية دون القلق بشأن توافق المتصفحات - كل ذلك بفضل ميزات التحويل وإضافة بادئات البائعين المفعلة افتراضيًا.

محلل وحزمة CSS في Bun هو نقل مباشر من Rust إلى Zig لـ LightningCSS، مع نهج حزمة مستوحى من esbuild. المحول يحول بنية CSS الحديثة إلى مكافئات متوافقة مع الإصدارات السابقة تعمل عبر المتصفحات.

NOTE

شكر كبير goes to the amazing work from the authors of LightningCSS and esbuild.

توافق المتصفحات

افتراضيًا، حزمة CSS في Bun تستهدف المتصفحات التالية:

• ES2020
• Edge 88+
• Firefox 78+
• Chrome 87+
• Safari 14+

خفض البنية

التداخل

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

styles.css

/* مع التداخل */
.card {
  background: white;
  border-radius: 4px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .content {
    padding: 1rem;
  }
}

حزمة CSS في Bun تحول تلقائيًا هذه البنية المتداخلة إلى CSS مسطح تقليدي يعمل في جميع المتصفحات:

styles.css

/* المخرجات المجمعة */
.card {
  background: white;
  border-radius: 4px;
}

.card .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.card .content {
  padding: 1rem;
}

يمكنك أيضًا تداخل استعلامات الوسائط وقواعد at الأخرى داخل المحددات، مما يلغي الحاجة إلى تكرار أنماط المحددات:

styles.css

.responsive-element {
  display: block;

  @media (min-width: 768px) {
    display: flex;
  }
}

هذا يترجم إلى:

styles.css

.responsive-element {
  display: block;
}

@media (min-width: 768px) {
  .responsive-element {
    display: flex;
  }
}

مزج الألوان

الدالة color-mix() تمنحك طريقة سهلة لدمج لونين معًا وفقًا لنسبة محددة في مساحة ألوان مختارة. هذه الميزة القوية تتيح لك إنشاء اختلافات لونية دون الحاجة إلى حساب القيم الناتجة يدويًا.

styles.css

.button {
  /* مزج الأزرق والأحمر في مساحة ألوان RGB بنسبة 30/70 */
  background-color: color-mix(in srgb, blue 30%, red);

  /* إنشاء متغير أخف لحالة التمرير */
  &:hover {
    background-color: color-mix(in srgb, blue 30%, red, white 20%);
  }
}

حزمة CSS في Bun تقيم مزج الألوان هذه في وقت البناء عندما تكون جميع قيم الألوان معروفة (ليست متغيرات CSS)، وتوليد قيم ألوان ثابتة تعمل في جميع المتصفحات:

styles.css

.button {
  /* محسوب إلى لون النتيجة الدقيق */
  background-color: #b31a1a;
}

.button:hover {
  background-color: #c54747;
}

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

الألوان النسبية

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

styles.css

.theme-color {
  /* ابدأ بلون أساسي وزد الإضاءة بنسبة 15% */
  --accent: lch(from purple calc(l + 15%) c h);

  /* خذ الأزرق الخاص بعلامتنا التجارية واجعل نسخة غير مشبعة */
  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}

حزمة CSS في Bun تحسب تعديلات الألوان النسبية هذه في وقت البناء (عند عدم استخدام متغيرات CSS) وتولد قيم ألوان ثابتة لتوافق المتصفحات:

.theme-color {
  --accent: lch(69.32% 58.34 328.37);
  --subtle-blue: oklch(60.92% 0.112 240.01);
}

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

ألوان LAB

CSS الحديث يدعم مساحات ألوان موحدة إدراكيًا مثل LAB و LCH و OKLAB و OKLCH التي تقدم مزايا كبيرة على RGB التقليدي. مساحات الألوان هذه يمكن أن تمثل ألوانًا خارج نطاق RGB القياسي، مما يؤدي إلى تصاميم أكثر حيوية واتساقًا بصريًا.

styles.css

.vibrant-element {
  /* أحمر نابض بالحياة يتجاوز حدود نطاق sRGB */
  color: lab(55% 78 35);

  /* تدرج سلس باستخدام مساحة ألوان إدراكية */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

حزمة CSS في Bun تحول تلقائيًا تنسيقات الألوان المتقدمة هذه إلى بدائل متوافقة مع الإصدارات السابقة للمتصفحات التي لا تدعمها بعد:

styles.css

.vibrant-element {
  /* العودة إلى أقرب تقريب RGB */
  color: #ff0f52;
  /* عودة P3 للمتصفحات ذات دعم النطاق الأوسع */
  color: color(display-p3 1 0.12 0.37);
  /* القيمة الأصلية محفوظة للمتصفحات التي تدعمها */
  color: lab(55% 78 35);

  background: linear-gradient(to right, #cd4e15, #3887ab);
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

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

دالة color()

الدالة color() توفر طريقة موحدة لتحديد الألوان في مساحات ألوان محددة مسبقًا مختلفة، مما يوسع خيارات التصميم الخاصة بك beyond مساحة RGB التقليدية. هذا يسمح لك بالوصول إلى نطاقات ألوان أوسع وإنشاء تصاميم أكثر حيوية.

styles.css

.vivid-element {
  /* استخدام مساحة ألوان Display P3 لألوان نطاق أوسع */
  color: color(display-p3 1 0.1 0.3);

  /* استخدام مساحة ألوان A98 RGB */
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

للمتصفحات التي لا تدعم دوال الألوان المتقدمة هذه بعد، حزمة CSS في Bun توفر بدائل RGB مناسبة:

styles.css

.vivid-element {
  /* بديل RGB أولاً لأقصى توافق */
  color: #fa1a4c;
  /* احتفظ بالأصل للمتصفحات التي تدعمه */
  color: color(display-p3 1 0.1 0.3);

  background-color: #6a805d;
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

هذه الوظيفة تتيح لك استخدام مساحات الألوان الحديثة فورًا مع ضمان بقاء تصاميمك وظيفية عبر جميع المتصفحات، مع عرض الألوان المثلى في المتصفحات الداعمة وتقديرات معقولة في其他地方.

ألوان HWB

نموذج ألوان HWB (Hue، Whiteness، Blackness) يوفر طريقة بديهية للتعبير عن الألوان بناءً على مقدار الأبيض أو الأسود الممزوج بصبغة نقية. العديد من المصممين يجدون هذا النهج أكثر طبيعية لإنشاء اختلافات لونية مقارنة بالتعامل مع قيم RGB أو HSL.

styles.css

.easy-theming {
  /* سماوي نقي بدون إضافة أبيض أو أسود */
  --primary: hwb(180 0% 0%);

  /* نفس الصبغة، لكن مع إضافة 20% أبيض (صبغة) */
  --primary-light: hwb(180 20% 0%);

  /* نفس الصبغة، لكن مع إضافة 30% أسود (ظل) */
  --primary-dark: hwb(180 0% 30%);

  /* نسخة مكتومة مع إضافة أبيض وأسود */
  --primary-muted: hwb(180 30% 20%);
}

حزمة CSS في Bun تحول تلقائيًا ألوان HWB إلى RGB للتوافق مع جميع المتصفحات:

styles.css

.easy-theming {
  --primary: #00ffff;
  --primary-light: #33ffff;
  --primary-dark: #00b3b3;
  --primary-muted: #339999;
}

نموذج HWB يجعل من السهل بشكل خاص إنشاء اختلافات لونية منهجية لأنظمة التصميم، وتوفير نهج أكثر بديهية لإنشاء صبغات وظلال متسقة من العمل مباشرة مع قيم RGB أو HSL.

تدوين الألوان

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

styles.css

.modern-styling {
  /* تدوين RGB مفصول بمسافات (بدون فواصل) */
  color: rgb(50 100 200);

  /* RGB مفصول بمسافات مع ألفا */
  border-color: rgba(100 50 200 / 75%);

  /* Hex مع قناة ألفا (8 أرقام) */
  background-color: #00aaff80;

  /* HSL مع تدوين مبسط */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

حزمة CSS في Bun تحول تلقائيًا تنسيقات الألوان الحديثة هذه لضمان التوافق مع المتصفحات الأقدم:

styles.css

.modern-styling {
  /* تحويل إلى تنسيق الفواصل للمتصفحات الأقدم */
  color: rgb(50, 100, 200);

  /* قنوات ألفا معالجة بشكل مناسب */
  border-color: rgba(100, 50, 200, 0.75);

  /* Hex+alpha تحويل إلى rgba عند الحاجة */
  background-color: rgba(0, 170, 255, 0.5);

  box-shadow: 0 5px 10px rgba(38, 115, 153, 0.4);
}

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

دالة لون light-dark()

الدالة light-dark() توفر حلاً أنيقًا لتنفيذ مخططات الألوان التي تحترم تفضيل نظام المستخدم دون الحاجة إلى استعلامات وسائط معقدة. هذه الدالة تقبل قيمتي لون وتختار تلقائيًا القيمة المناسبة بناءً على سياق مخطط الألوان الحالي.

styles.css

:root {
  /* تحديد دعم مخطط الألوان */
  color-scheme: light dark;
}

.themed-component {
  /* تختار تلقائيًا اللون الصحيح بناءً على تفضيل النظام */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #eeeeee);
  border-color: light-dark(#dddddd, #555555);
}

/* تجاوز تفضيل النظام عند الحاجة */
.light-theme {
  color-scheme: light;
}

.dark-theme {
  color-scheme: dark;
}

للمتصفحات التي لا تدعم هذه الميزة بعد، حزمة CSS في Bun تحولها لاستخدام متغيرات CSS مع بدائل مناسبة:

styles.css

:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

.light-theme {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

.dark-theme {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

.themed-component {
  background-color: var(--lightningcss-light, #ffffff) var(--lightningcss-dark, #121212);
  color: var(--lightningcss-light, #333333) var(--lightningcss-dark, #eeeeee);
  border-color: var(--lightningcss-light, #dddddd) var(--lightningcss-dark, #555555);
}

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

الخصائص المنطقية

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

styles.css

.multilingual-component {
  /* هامش يتكيف مع اتجاه الكتابة */
  margin-inline-start: 1rem;

  /* حشوة ذات معنى بغض النظر عن اتجاه النص */
  padding-block: 1rem 2rem;

  /* نصف قطر الحدود للزاوية البدائية في الأعلى */
  border-start-start-radius: 4px;

  /* حجم يحترم وضع الكتابة */
  inline-size: 80%;
  block-size: auto;
}

للمتصفحات التي لا تدعم الخصائص المنطقية بالكامل، حزمة CSS في Bun تحولها إلى خصائص مادية مع تعديلات اتجاهية مناسبة:

styles.css

/* للغات من اليسار إلى اليمين */
.multilingual-component:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* للغات من اليمين إلى اليسار */
.multilingual-component:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

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

محدد :dir()

محدد الفئة الزائفة :dir() يسمح لك بتنسيق العناصر بناءً على اتجاه النص (RTL أو LTR)، وتوفير طريقة قوية لإنشاء تصاميم واعية للاتجاه بدون JavaScript. هذا المحدد يطابق العناصر بناءً على اتجاهيتها كما هو محدد بواسطة المستند أو سمات الاتجاه الصريحة.

styles.css

/* تطبيق أنماط مختلفة بناءً على اتجاه النص */
.nav-arrow:dir(ltr) {
  transform: rotate(0deg);
}

.nav-arrow:dir(rtl) {
  transform: rotate(180deg);
}

/* وضع العناصر بناءً على تدفق النص */
.sidebar:dir(ltr) {
  border-right: 1px solid #ddd;
}

.sidebar:dir(rtl) {
  border-left: 1px solid #ddd;
}

للمتصفحات التي لا تدعم محدد :dir() بعد، حزمة CSS في Bun تحوله إلى محدد :lang() المدعوم على نطاق أوسع مع تعيينات لغة مناسبة:

styles.css

/* تحويل لاستخدام محددات قائمة على اللغة كبديل */
.nav-arrow:lang(en, fr, de, es, it, pt, nl) {
  transform: rotate(0deg);
}

.nav-arrow:lang(ar, he, fa, ur) {
  transform: rotate(180deg);
}

.sidebar:lang(en, fr, de, es, it, pt, nl) {
  border-right: 1px solid #ddd;
}

.sidebar:lang(ar, he, fa, ur) {
  border-left: 1px solid #ddd;
}

هذا التحويل يسمح لك بكتابة CSS واعٍ للاتجاه يعمل بشكل موثوق عبر المتصفحات، حتى تلك التي لا تدعم محدد :dir() أصليًا بعد. إذا لم تكن الوسائط المتعددة لـ :lang() مدعومة، يتم توفير بدائل إضافية تلقائيًا.

محدد :lang()

محدد الفئة الزائفة :lang() يسمح لك باستهداف العناصر بناءً على اللغة التي فيها، مما يجعل من السهل تطبيق تنسيق خاص باللغة. CSS الحديث يسمح لمحدد :lang() بقبول رموز لغة متعددة، مما يسمح لك بتجميع القواعد الخاصة باللغة بكفاءة أكبر.

styles.css

/* تعديلات الطباعة للغات CJK */
:lang(zh, ja, ko) {
  line-height: 1.8;
  font-size: 1.05em;
}

/* أنماط اقتباس مختلفة حسب مجموعة اللغة */
blockquote:lang(fr, it, es, pt) {
  font-style: italic;
}

blockquote:lang(de, nl, da, sv) {
  font-weight: 500;
}

للمتصفحات التي لا تدعم وسائط متعددة في محدد :lang()، حزمة CSS في Bun تحول هذه البنية لاستخدام محدد :is() للحفاظ على نفس السلوك:

styles.css

/* لغات متعددة مجمعة مع :is() لدعم أفضل للمتصفحات */
:is(:lang(zh), :lang(ja), :lang(ko)) {
  line-height: 1.8;
  font-size: 1.05em;
}

blockquote:is(:lang(fr), :lang(it), :lang(es), :lang(pt)) {
  font-style: italic;
}

blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) {
  font-weight: 500;
}

إذا لزم الأمر، يمكن لـ Bun توفير بدائل إضافية لـ :is() أيضًا، مما يضمن عمل أنماطك الخاصة باللغة عبر جميع المتصفحات. هذا النهج يبسط إنشاء التصاميم الدولية مع قواعد طباعة وتنسيق مميزة لمجموعات اللغة المختلفة.

محدد :is()

دالة الفئة الزائفة :is() (سابقًا :matches()) تسمح لك بإنشاء محددات أكثر إيجازًا وقابلية للقراءة من خلال تجميع محددات متعددة معًا. تقبل قائمة محددات كوسيطة وتطابق إذا طابق أي من المحددات في تلك القائمة، مما يقلل بشكل كبير من التكرار في CSS الخاص بك.

styles.css

/* بدلاً من كتابة هذه بشكل منفصل */
/* 
.article h1,
.article h2,
.article h3 {
  margin-top: 1.5em;
}
*/

/* يمكنك كتابة هذا */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* مثال معقد مع مجموعات متعددة */
:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

للمتصفحات التي لا تدعم :is()، حزمة CSS في Bun توفر بدائل باستخدام بدائل ذات بادئة البائع:

/* بديل باستخدام -webkit-any */
.article :-webkit-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* بديل باستخدام -moz-any */
.article :-moz-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* الأصل محفوظ للمتصفحات الحديثة */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* مثال معقد مع بدائل */
:-webkit-any(header, main, footer) :-webkit-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:-moz-any(header, main, footer) :-moz-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

محدد :not()

الفئة الزائفة :not() تسمح لك باستبعاد العناصر التي تطابق محددًا معينًا. الإصدار الحديث من هذا المحدد يقبل وسائط متعددة، مما يسمح لك باستبعاد أنماط متعددة بمحدد واحد موجز.

styles.css

/* حدد جميع الأزرار باستثناء المتغيرات الأساسية والثانوية */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* تطبيق الأنماط على جميع العناوين باستثناء تلك داخل الأشرطة الجانبية أو التذييلات */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

للمتصفحات التي لا تدعم وسائط متعددة في :not()، حزمة CSS في Bun تحول هذه البنية إلى شكل أكثر توافقًا مع الحفاظ على نفس السلوك:

styles.css

/* تحويل لاستخدام :not مع :is() للتوافق */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

h2:not(:is(.sidebar *, footer *)) {
  margin-top: 2em;
}

وإذا لم يكن :is() مدعومًا، يمكن لـ Bun إنشاء بدائل إضافية:

styles.css

/* بدائل أكثر لأقصى توافق */
button:not(:-webkit-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:-moz-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

هذا التحويل يضمن عمل محدداتك السلبية بشكل صحيح عبر جميع المتصفحات مع الحفاظ على الخصوصية والسلوك الصحيحين للمحدد الأصلي.

دوال الرياضيات

CSS يتضمن الآن مجموعة غنية من دوال الرياضيات التي تتيح لك إجراء حسابات معقدة مباشرة في أوراق الأنماط الخاصة بك. تتضمن هذه دوال الرياضيات القياسية (round() و mod() و rem() و abs() و sign())، والدوال المثلثية (sin() و cos() و tan() و asin() و acos() و atan() و atan2())، والدوال الأسية (pow() و sqrt() و exp() و log() و hypot()).

styles.css

.dynamic-sizing {
  /* تثبيت قيمة بين الحد الأدنى والأقصى */
  width: clamp(200px, 50%, 800px);

  /* تقريب إلى أقرب مضاعف */
  padding: round(14.8px, 5px);

  /* المثلثات للرسوم المتحركة أو التخطيطات */
  transform: rotate(calc(sin(45deg) * 50deg));

  /* رياضيات معقدة مع دوال متعددة */
  --scale-factor: pow(1.25, 3);
  font-size: calc(16px * var(--scale-factor));
}

حزمة CSS في Bun تقيم هذه التعبيرات الرياضية في وقت البناء عندما تكون جميع القيم ثوابت معروفة (ليست متغيرات)، مما يؤدي إلى مخرجات محسنة:

styles.css

.dynamic-sizing {
  width: clamp(200px, 50%, 800px);
  padding: 15px;
  transform: rotate(35.36deg);
  --scale-factor: 1.953125;
  font-size: calc(16px * var(--scale-factor));
}

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

نطاقات استعلام الوسائط

CSS الحديث يدعم بنية نطاق بديهية لاستعلامات الوسائط، مما يسمح لك بتحديد نقاط التوقف باستخدام عوامل مقارنة مثل < و > و <= و >= بدلاً من البادئات الأكثر إسهابًا min- و max-. هذه البنية أكثر قابلية للقراءة وتطابق كيفية تفكيرنا عادةً في القيم والنطاقات.

styles.css

/* بنية حديثة مع عوامل المقارنة */
@media (width >= 768px) {
  .container {
    max-width: 720px;
  }
}

/* نطاق شامل باستخدام <= و >= */
@media (768px <= width <= 1199px) {
  .sidebar {
    display: flex;
  }
}

/* نطاق حصري باستخدام < و > */
@media (width > 320px) and (width < 768px) {
  .mobile-only {
    display: block;
  }
}

حزمة CSS في Bun تحول استعلامات النطاق الحديثة هذه إلى بنية استعلام وسائط تقليدية للتوافق مع جميع المتصفحات:

styles.css

/* تحويل إلى بنية min/max التقليدية */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar {
    display: flex;
  }
}

@media (min-width: 321px) and (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

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

الاختصارات

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

styles.css

/* اختصارات المحاذاة */
.flex-container {
  /* اختصار لـ align-items و justify-items */
  place-items: center start;

  /* اختصار لـ align-content و justify-content */
  place-content: space-between center;
}

.grid-item {
  /* اختصار لـ align-self و justify-self */
  place-self: end center;
}

/* فيضان بقيمتين */
.content-box {
  /* القيمة الأولى للأفقية، الثانية للرأسية */
  overflow: hidden auto;
}

/* تزيين النص المحسن */
.fancy-link {
  /* يجمع خصائص تزيين النص المتعددة */
  text-decoration: underline dotted blue 2px;
}

/* بنية عرض بقيمتين */
.component {
  /* نوع العرض الخارجي + نوع العرض الداخلي */
  display: inline flex;
}

للمتصفحات التي لا تدعم هذه الاختصارات الحديثة، Bun يحولها إلى خصائصها الطويلة المكونة:

styles.css

.flex-container {
  /* خصائص محاذاة موسعة */
  align-items: center;
  justify-items: start;

  align-content: space-between;
  justify-content: center;
}

.grid-item {
  align-self: end;
  justify-self: center;
}

.content-box {
  /* خصائص فيضان منفصلة */
  overflow-x: hidden;
  overflow-y: auto;
}

.fancy-link {
  /* خصائص تزيين نص فردية */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

.component {
  /* عرض بقيمة واحدة */
  display: inline-flex;
}

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

تدرجات الموضع المزدوج

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

styles.css

.striped-background {
  /* يخلق انتقالًا حادًا من الأخضر إلى الأحمر عند 30%-40% */
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* الموضع المزدوج يخلق توقفًا صلبًا */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  /* يخلق أقسام ألوان مميزة */
  background: linear-gradient(
    to right,
    #4caf50 0% 25%,
    /* أخضر من 0% إلى 25% */ #ffc107 25% 50%,
    /* أصفر من 25% إلى 50% */ #2196f3 50% 75%,
    /* أزرق من 50% إلى 75% */ #9c27b0 75% 100% /* أرجواني من 75% إلى 100% */
  );
}

للمتصفحات التي لا تدعم هذه البنية، حزمة CSS في Bun تحولها تلقائيًا إلى التنسيق التقليدي من خلال تكرار Stops الألوان:

styles.css

.striped-background {
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* تقسيم إلى Stops لونين */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    /* توقفان للقسم الأخضر */ #ffc107 25%,
    #ffc107 50%,
    /* توقفان للقسم الأصفر */ #2196f3 50%,
    #2196f3 75%,
    /* توقفان للقسم الأزرق */ #9c27b0 75%,
    #9c27b0 100% /* توقفان للقسم الأرجواني */
  );
}

هذا التحويل يسمح لك باستخدام بنية الموضع المزدوج الأنظف في كود المصدر مع ضمان عرض التدرجات بشكل صحيح في جميع المتصفحات.

خط system-ui

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

styles.css

.native-interface {
  /* استخدام خط واجهة المستخدم الافتراضي للنظام */
  font-family: system-ui;
}

.fallback-aware {
  /* خط واجهة المستخدم النظامي مع بدائل صريحة */
  font-family: system-ui, sans-serif;
}

للمتصفحات التي لا تدعم system-ui، حزمة CSS في Bun توسعه تلقائيًا إلى مجموعة خطوط شاملة عبر المنصات:

styles.css

.native-interface {
  /* موسعة لدعم جميع المنصات الرئيسية */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue";
}

.fallback-aware {
  /* تحافظ على البديل الأصلي بعد المجموعة الموسعة */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

هذا النهج يمنحك بساطة كتابة system-ui فقط في كود المصدر مع ضمان تكيف واجهتك بشكل صحيح مع جميع أنظمة التشغيل والمتصفحات. مجموعة الخطوط الموسعة تتضمن خطوط نظام مناسبة لـ macOS/iOS و Windows و Android و Linux، وبدائل للمتصفحات الأقدم.

وحدات CSS

حزمة Bun تدعم أيضًا حزمة وحدات CSS بالإضافة إلى CSS العادي مع دعم الميزات التالية:

• الكشف التلقائي عن ملفات وحدات CSS (.module.css) بدون تكوين
• التركيب (خاصية composes)
• استيراد وحدات CSS إلى JSX/TSX
• تحذيرات/أخطاء للاستخدامات غير الصالحة لوحدات CSS

وحدة CSS هي ملف CSS (مع الامتداد .module.css) حيث جميع أسماء الفئات والرسوم المتحركة محدودة النطاق للملف. هذا يساعدك على تجنب تصادمات أسماء الفئات حيث أن إعلانات CSS محدودة النطاق عالميًا افتراضيًا.

تحت الغطاء، حزمة Bun تحول أسماء الفئات محدودة النطاق محليًا إلى معرفات فريدة.

البدء

أنشئ ملف CSS مع الامتداد .module.css:

styles.module.css

.button {
  color: red;
}

other-styles.module.css

.button {
  color: blue;
}

يمكنك بعد ذلك استيراد هذا الملف، على سبيل المثال إلى ملف TSX:

app.tsx

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

export default function App() {
  return (
    <>
      <button className={styles.button}>زر أحمر!</button>
      <button className={otherStyles.button}>زر أزرق!</button>
    </>
  );
}

كائن الأنماط من استيراد ملف وحدة CSS سيكون كائنًا بجميع أسماء الفئات كمفاتيح وقيمها المعرفات الفريدة كقيم:

app.tsx

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

console.log(styles);
console.log(otherStyles);

سيخرج هذا:

app.tsx

{
  button: "button_123";
}

{
  button: "button_456";
}

كما ترى، أسماء الفئات فريدة لكل ملف، مما يتجنب أي تصادمات!

التركيب

وحدات CSS تسمح لك بتركيب محددات الفئات معًا. هذا يسمح لك بإعادة استخدام قواعد النمط عبر فئات متعددة.

على سبيل المثال:

styles.module.css

.button {
  composes: background;
  color: red;
}

.background {
  background-color: blue;
}

سيكون نفس كتابة:

styles.module.css

.button {
  background-color: blue;
  color: red;
}

.background {
  background-color: blue;
}

هناك قاعدتان يجب مراعاتهما عند استخدام composes:

styles.module.css

#button {
  /* غير صالح! `#button` ليس محدد فئة */
  composes: background;
}

.button,
.button-secondary {
  /* غير صالح! `.button, .button-secondary` ليس محددًا بسيطًا */
  composes: background;
}

التركيب من ملف وحدة CSS منفصل

يمكنك أيضًا التركيب من ملف وحدة CSS منفصل:

background.module.css

.background {
  background-color: blue;
}

styles.module.css

.button {
  composes: background from "./background.module.css";
  color: red;
}