CSS

الموسوعة الحرة

تُعدّ أوراق الأنماط المتتالية ( CSS ) لغةً تُستخدم لتحديد عرض وتنسيق مستند مكتوب بلغة ترميز ، مثل HTML أو XML (بما في ذلك لهجات XML مثل SVG و MathML و XHTML ). [ 2 ] تُعتبر CSS تقنيةً أساسيةً في شبكة الويب العالمية ، إلى جانب HTML و JavaScript . [ 3 ]

صُممت لغة CSS لتمكين فصل المحتوى عن طريقة عرضه ، بما في ذلك التخطيط والألوان والخطوط . [ 4 ] يُحسّن هذا الفصل إمكانية الوصول إلى المحتوى ، إذ يُمكن كتابة المحتوى دون القلق بشأن طريقة عرضه؛ كما يُوفر مرونة وتحكمًا أكبر في تحديد خصائص العرض؛ ويُمكّن صفحات الويب المتعددة من مشاركة التنسيق من خلال تحديد CSS ذي الصلة في ملف .css منفصل، مما يُقلل من التعقيد والتكرار في بنية المحتوى؛ ويُمكّن أيضًا من تخزين ملف .css مؤقتًا لتحسين سرعة تحميل الصفحة بين الصفحات التي تتشارك الملف وتنسيقه.

يُتيح فصل التنسيق عن المحتوى إمكانية عرض صفحة الترميز نفسها بأنماط مختلفة لطرق العرض المختلفة، مثل العرض على الشاشة، والطباعة، والقراءة الصوتية (عبر متصفح يعتمد على الصوت أو قارئ الشاشة )، وعلى الأجهزة اللمسية التي تعتمد على طريقة برايل . كما تتضمن لغة CSS قواعد للتنسيق البديل في حال الوصول إلى المحتوى عبر جهاز محمول . [ 5 ]

يُستمد اسم "التتالي" من نظام الأولوية المُحدد لتحديد أي تعريف ينطبق في حال تطابق أكثر من تعريف لخاصية ما مع عنصر معين. نظام أولوية التتالي هذا قابل للتنبؤ.

تتولى منظمة شبكة الويب العالمية (W3C) صيانة مواصفات CSS. وقد تم تسجيل نوع وسائط الإنترنت ( نوع MIME ) text/cssللاستخدام مع CSS بموجب RFC 2318 (مارس 1998). وتُشغّل W3C خدمة مجانية للتحقق من صحة مستندات CSS. [ 6 ]

بالإضافة إلى لغة HTML، تدعم لغات ترميز أخرى استخدام CSS، بما في ذلك XHTML و XML و SVG و XUL . كما تُستخدم CSS في مجموعة أدوات GTK .

بناء الجملة

تتميز لغة CSS ببنية بسيطة وتستخدم عددًا من الكلمات المفتاحية الإنجليزية لتحديد أسماء خصائص الأنماط المختلفة.

ورقة الأنماط

تتكون ورقة الأنماط من قائمة من القواعد . تتكون كل قاعدة أو مجموعة قواعد من محدد واحد أو أكثر ، وكتلة تعريف .

محدد

في لغة CSS، تحدد المحددات الجزء من الترميز الذي ينطبق عليه النمط من خلال مطابقة العلامات والسمات في الترميز نفسه.

أنواع المحددات

قد تنطبق المحددات على ما يلي:

  • جميع العناصر من نوع محدد، على سبيل المثال رؤوس المستوى الثاني h2
  • العناصر المحددة بواسطة السمة ، على وجه الخصوص:
    • المعرّف : معرّف فريد داخل المستند، ويُشار إليه في لغة التحديد بواسطة بادئة تجزئة (#) على سبيل المثال#id
    • الفئة : مُعرِّف يُمكنه إضافة تعليقات توضيحية لعناصر متعددة في مستند، ويُشار إليه بنقطة كبادئة، على سبيل المثال .classname(عبارة "فئة CSS"، على الرغم من استخدامها أحيانًا، هي تسمية خاطئة، حيث أن فئات العناصر - المحددة باستخدام سمة فئة HTML - هي ميزة ترميزية تختلف عن أنظمة CSS الفرعية للمتصفحات، وتعمل معايير W3C/WHATWG ذات الصلة على أنماط المستندات؛ انظر RDF والتنسيقات المصغرة لمعرفة أصول نظام "الفئة" لنموذج محتوى الويب).
  • تعتمد العناصر على كيفية وضعها بالنسبة لبعضها البعض في شجرة المستند .

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

الفئات الزائفة

تُستخدم الفئات الزائفة في محددات CSS للسماح بالتنسيق بناءً على معلومات غير موجودة في شجرة المستند.

أحد الأمثلة على الفئات الزائفة شائعة الاستخدام هو `<input type="text">` ، الذي يُحدد المحتوى فقط عندما يُشير المستخدم إلى العنصر المرئي، عادةً عن طريق تحريك مؤشر الماوس فوقه. ويتم إلحاقه بمحدد كما في `<input type="text">` أو `<input type="text">` .:hovera:hover#elementid:hover

يُصنِّف الصنف الزائف عناصر المستند، مثل <p> أو <div> ، بينما يُجري العنصر الزائف عملية اختيار قد تتكون من عناصر جزئية، مثل <p> أو <div> . [ 7 ] لاحظ الفرق بين تدوين النقطتين المستخدم للعناصر الزائفة وتدوين النقطتين المستخدم للأصناف الزائفة.:link:visited::first-line::first-letter

المولدات

يمكن ربط عدة محددات بسيطة باستخدام مُركِّبات لتحديد العناصر حسب الموقع أو نوع العنصر أو المعرّف أو الفئة أو أي مزيج منها. [ ٨ ] ترتيب المحددات مهم. على سبيل المثال، ينطبق المحدد `<div>` على جميع عناصر الفئة `myClass` الموجودة داخل عناصر `div`، بينما ينطبق المحدد `<div>` على جميع عناصر `div` الموجودة داخل عناصر الفئة `myClass`. يجب عدم الخلط بين هذا وبين المعرّفات المتسلسلة مثل `<div>` التي تنطبق على عناصر `div` من الفئة `myClass`.div.myClass{color:red;}.myClassdiv{color:red;}div.myClass{color:red;}

ملخص بناء جملة المحدد

يُقدّم الجدول التالي ملخصًا لصيغة المُحدِّدات، مُبيّنًا طريقة استخدامها وإصدار CSS الذي أدخلها. [ 9 ]

محددات CSS
نمطمبارياتتم تعريفها لأول مرة على مستوى CSS
Eعنصر من النوع E1
E:linkعنصر E الذي يمثل نقطة ارتكاز المصدر للرابط التشعبي الذي لم تتم زيارة هدفه بعد (:link) أو تمت زيارته بالفعل (:visited)1
E:visited
E:activeعنصر E أثناء بعض إجراءات المستخدم1
E:hover2
E:focus
E::first-lineالسطر المنسق الأول لعنصر E1
E::first-letterالحرف الأول المنسق لعنصر E1
.cجميع العناصر التي تحمل الفئة "c"1
#myidالعنصر ذو المعرّف "myid"1
E.warningعنصر E الذي تكون فئته "تحذير" (تحدد لغة المستند كيفية تحديد الفئة)1
E#myidعنصر E بمعرف يساوي "myid"1
.c#myidالعنصر ذو الفئة "c" والمعرف "myid"1
EFعنصر F سليل عنصر E1
*أي عنصر2
E[foo]عنصر E يحتوي على سمة "foo".2
E[foo="bar"]عنصر E تكون قيمة سمة "foo" الخاصة به مساوية تمامًا لـ "bar"2
E[foo~="bar"]عنصر E تكون قيمة سمة "foo" الخاصة به عبارة عن قائمة من القيم المفصولة بمسافات بيضاء، إحداها تساوي تمامًا "bar".2
E[foo|="en"]عنصر E الذي تحتوي سمة "foo" الخاصة به على قائمة قيم مفصولة بشرطة تبدأ (من اليسار) بـ "en".2
E:first-childعنصر E، الابن الأول لعنصره الأبوي2
E:lang(fr)عنصر من النوع E في اللغة "fr" (تحدد لغة المستند كيفية تحديد اللغة)2
E::beforeالمحتوى المُنشأ قبل محتوى العنصر E2
E::afterالمحتوى المُنشأ بعد محتوى عنصر E2
E>Fعنصر F ابن لعنصر E2
E+Fعنصر F يسبقه مباشرة عنصر E2
E[foo^="bar"]عنصر E تبدأ قيمة سمة "foo" فيه بالضبط بالسلسلة "bar".3
E[foo$="bar"]عنصر E تنتهي قيمة سمة "foo" الخاصة به تمامًا بالسلسلة "bar".3
E[foo*="bar"]عنصر E الذي تحتوي قيمة سمة "foo" الخاصة به على السلسلة الفرعية "bar"3
E:rootعنصر E، جذر المستند3
E:nth-child(n)عنصر من عناصر المجموعة E، الابن رقم n لعنصره الأب3
E:nth-last-child(n)عنصر E، وهو الابن رقم n لوالده، بدءًا من الأخير3
E:nth-of-type(n)عنصر E، الشقيق رقم n من نوعه3
E:nth-last-of-type(n)عنصر من النوع E، وهو الشقيق رقم n من نوعه، بدءًا من الأخير.3
E:last-childعنصر E، آخر ابن لعنصره الأب3
E:first-of-typeعنصر من النوع E، وهو أول عنصر شقيق من نوعه3
E:last-of-typeعنصر من النوع E، وهو آخر عنصر شقيق من نوعه3
E:only-childعنصر E، الابن الوحيد لعنصره الأب3
E:only-of-typeعنصر من النوع E، وهو الشقيق الوحيد من نوعه3
E:emptyعنصر E ليس له عناصر فرعية (بما في ذلك عقد النص)3
E:targetعنصر E هو هدف URI المُحيل3
E:enabledعنصر واجهة المستخدم E الذي تم تمكينه3
E:disabledعنصر واجهة المستخدم E معطل3
E:checkedعنصر واجهة المستخدم E الذي تم تحديده (على سبيل المثال زر اختيار أو مربع اختيار)3
E:not(s)عنصر E لا يتطابق مع المحددات البسيطة s3
E~Fعنصر F مسبوق بعنصر E3
E:has(s)عنصر E يحتوي على عنصر مطابق لمحدد بسيط s4

كتلة الإعلان

تتكون كتلة الإعلان من زوج من الأقواس المعقوفة ( {}) التي تحيط بقائمة من الإعلانات مفصولة بفواصل منقوطة . [ 10 ]

تصريح

يتكون كل تعريف من خاصية ، ونقطتين رأسيتين ( ::)، وقيمة . يمكن إضافة مسافات بيضاء اختيارية حول كتلة التعريف، والتعريفات، والنقطتين الرأسيتين، والفواصل المنقوطة لتحسين سهولة القراءة. [ 11 ]

ملكيات

تُحدد الخصائص في معيار CSS. لكل خاصية مجموعة من القيم الممكنة. بعض الخصائص تؤثر على أي نوع من العناصر، بينما ينطبق البعض الآخر على مجموعات معينة من العناصر فقط. [ 12 ] [ 13 ]

قيم

قد تكون القيم كلمات مفتاحية، مثل "center" أو "inherit"، أو قيمًا رقمية، مثل 200px(200 بكسل)، 50vw(50 بالمائة من عرض منفذ العرض) أو 80% (80 بالمائة من عرض العنصر الأصل).

يمكن تحديد قيم الألوان باستخدام الكلمات المفتاحية (مثل " red")، أو القيم السداسية العشرية (مثل ، والتي تُختصر أيضًا إلى )، أو قيم RGB على مقياس من 0 إلى 255 (مثل )، أو قيم RGBA التي تحدد كلاً من اللون وشفافية ألفا (مثل )، أو قيم HSL أو HSLA (مثل ) . [ 14 ]#FF0000#F00rgb(255,0,0)rgba(255,0,0,0.8)hsl(0100%50%)hsl(0100%50%/0.8)

يجب أن تتضمن القيم العددية غير الصفرية التي تمثل القياسات الخطية وحدة طول، إما رمزًا أبجديًا أو اختصارًا، مثل 0 200pxأو 0 50vw؛ أو علامة نسبة مئوية، مثل 0.5 80%. بعض الوحدات - cm( سنتيمتر )؛ in( بوصة )؛ mm( مليمتر )؛ pc( بيكا )؛ و pt( نقطة ) - مطلقة ، مما يعني أن البعد المعروض لا يعتمد على بنية الصفحة؛ بينما وحدات أخرى - em( em )؛ ex( ex ) و px( بكسل ) - نسبية ، مما يعني أن عوامل مثل حجم خط العنصر الأب يمكن أن تؤثر على القياس المعروض. كانت هذه الوحدات الثماني ميزة في CSS 1 [ 15 ] وتم الاحتفاظ بها في جميع المراجعات اللاحقة. سيوفر نموذج قيم ووحدات CSS المقترح من المستوى 3، في حال اعتماده كتوصية من W3C، سبع وحدات طول إضافية: ch0؛ 0 Q؛ rem0؛ vh0 vmax؛ vmin0؛ و vw0. [ 16 ]

يستخدم

قبل ظهور CSS، كانت جميع خصائص عرض صفحات HTML تقريبًا مُضمنة في ترميز HTML نفسه. أي أنه كان يجب وصف جميع ألوان الخطوط، وأنماط الخلفية، ومحاذاة العناصر، والحدود، والأحجام بشكل صريح (وغالباً بشكل متكرر) داخل HTML. يُمكّن CSS المصممين من نقل معظم هذه المعلومات إلى ملف آخر، وهو ملف أنماط HTML، مما يُؤدي إلى تبسيط HTML بشكل ملحوظ. بالإضافة إلى ذلك، مع ازدياد عدد الأجهزة التي يُمكنها الوصول إلى صفحات الويب المتجاوبة، بدأت تظهر أحجام وتخطيطات شاشات مختلفة. يُعد تخصيص موقع ويب لكل حجم جهاز مكلفًا ويزداد صعوبة. تعني الطبيعة المعيارية لـ CSS أنه يُمكن إعادة استخدام الأنماط في أجزاء مختلفة من الموقع أو حتى عبر مواقع متعددة، مما يُعزز التناسق والكفاءة.

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

قبل ظهور CSS، كان على مُنشئي المستندات الذين يرغبون في تطبيق خصائص طباعيةh2 مُحددة، مثلاً، على جميع العناوين، تكرار ترميز HTML التقديمي لكل ظهور لهذا النوع من العناوين. وقد جعل هذا المستندات أكثر تعقيداً، وأكبر حجماً، وأكثر عرضة للأخطاء، وأصعب في الصيانة. يسمح CSS بفصل العرض عن البنية. إذ يُمكنه تحديد اللون، والخط، ومحاذاة النص، والحجم، والحدود، والتباعد، والتخطيط، والعديد من الخصائص الطباعية الأخرى، وبشكل مستقل للعرض على الشاشة والطباعة. كما يُحدد CSS أنماطاً غير مرئية، مثل سرعة القراءة والتأكيد لقارئات النصوص الصوتية. وقد أوقف اتحاد شبكة الويب العالمية (W3C) استخدام جميع ترميز HTML التقديمي. [ 17 ]

على سبيل المثال، في لغة HTML قبل ظهور CSS، كان يتم كتابة عنصر العنوان المحدد بنص أحمر على النحو التالي:

<h1> < font color = " red" > الفصل الأول. < / font > </h1>

باستخدام CSS، يمكن ترميز العنصر نفسه باستخدام خصائص النمط بدلاً من سمات العرض التقديمي في HTML:

< h1 style = "color: red;" > الفصل الأول. </ h1 >

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

<style> h1 { color : red ; } </style>​​​​

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

<style> h1 { color : blue ; } </style>​​​​

بدلاً من المرور بشكل شاق عبر المستند وتغيير لون كل h1عنصر على حدة.

يمكن أيضًا وضع الأنماط في ملف CSS خارجي، كما هو موضح أدناه، وتحميلها باستخدام صيغة مشابهة لما يلي:

< link href = "path/to/file.css" rel = "stylesheet" type = "text/css" >

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

مصادر

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

أوراق أنماط متعددة

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

متتالي

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

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

مخطط أولوية CSS
مخطط أولوية CSS (من الأعلى إلى الأدنى)
أولويةنوع مصدر CSSوصف
1أهميةيؤدي التعليق التوضيحي " " إلى استبدال أنواع الأولوية السابقة!important
2مضمننمط يتم تطبيقه على عنصر HTML عبر سمة "style" في HTML
3نوع الوسائطينطبق تعريف الخاصية على جميع أنواع الوسائط ما لم يتم تعريف CSS خاص بالوسائط
4تعريف المستخدممعظم المتصفحات تحتوي على ميزة إمكانية الوصول: CSS مُعرّف من قِبل المستخدم
5خصوصية المُحدِّديُلغي مُحدِّد سياقي مُعيَّن ( ) التعريف العام#headingp
6ترتيب القواعديتمتع إعلان القاعدة الأخير بأولوية أعلى
7الميراث الأبويإذا لم يتم تحديد خاصية ما، فسيتم توريثها من عنصر أب
8تعريف خاصية CSS في مستند HTMLقاعدة CSS أو نمط CSS المضمن يتجاوز قيمة المتصفح الافتراضية
9المتصفح الافتراضيالأولوية الأدنى: يتم تحديد القيمة الافتراضية للمتصفح بواسطة مواصفات القيمة الأولية لـ W3C

الخصوصية

تشير الخصوصية إلى الأوزان النسبية للقواعد المختلفة. [ 18 ] وهي تحدد الأنماط التي تُطبق على عنصر ما عندما يكون من الممكن تطبيق أكثر من قاعدة. بناءً على المواصفات، يكون للمحدد البسيط (مثل H1) خصوصية 1، وللمحددات الخاصة بالفئات خصوصية 1,0، وللمحددات الخاصة بالمعرفات خصوصية 1,0,0. ولأن قيم الخصوصية لا تنتقل كما في النظام العشري، تُستخدم الفواصل لفصل الأرقام [ 19 ] (قاعدة CSS تحتوي على 11 عنصرًا و11 فئة ستكون خصوصيتها 11,11، وليس 121).

وبالتالي، فإن محددات القاعدة التالية تؤدي إلى التحديد المشار إليه:

محدداتالخصوصية
h1{color:white;}0، 0، 0، 1
pem{color:green;}0، 0، 0، 2
.grape{color:red;}0، 0، 1، 0
p.bright{color:blue;}0، 0، 1، 1
p.brightem.dark{color:yellow;}0، 0، 2، 2
#id218{color:brown;}0، 1، 0، 0
style=" "1، 0، 0، 0

أمثلة

انظر إلى جزء HTML التالي:

< ! DOCTYPE html > <html> <head> < meta charset = " utf - 8 " > <style> #xyz { color : blue ; } </style> </head> <body> < p id = " xyz " style = " color : green ; " > لتوضيح التحديد < / p > </body> </html>

في المثال أعلاه، styleيتجاوز التصريح الموجود في السمة التصريح الموجود في <style>العنصر لأنه يتمتع بمستوى أعلى من التحديد، وبالتالي، تظهر الفقرة باللون الأخضر:

لإثبات الخصوصية

الميراث

تُعدّ الوراثة ميزة أساسية في لغة CSS، وتعتمد في عملها على علاقة الأصل والفرع. الوراثة هي الآلية التي تُطبّق من خلالها الخصائص ليس فقط على عنصر مُحدّد، بل أيضًا على فروعه. [ 18 ] تعتمد الوراثة على شجرة المستند، وهي التسلسل الهرمي لعناصر XHTML في الصفحة بناءً على التداخل. يمكن للعناصر الفرعية أن ترث قيم خصائص CSS من أي عنصر أصلي يُحيط بها. بشكل عام، ترث العناصر الفرعية الخصائص المتعلقة بالنص، ولكن لا ترث خصائصها المتعلقة بالصندوق. تشمل الخصائص التي يمكن توريثها: اللون، والخط، وتباعد الأحرف، وارتفاع السطر، ونمط القائمة، ومحاذاة النص، ومسافة بادئة النص، وتحويل النص، والرؤية، والمسافة البيضاء، وتباعد الكلمات. الخصائص التي لا يمكن توريثها هي الخلفية، والحدود، والعرض، والطفو والمسح، والارتفاع، والعرض، والهامش، والحد الأدنى والحد الأقصى للارتفاع والعرض، والمخطط التفصيلي، والتدفق الزائد، والحشو، والموضع، وزخرفة النص، والمحاذاة الرأسية، ومؤشر z.

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

يختلف مفهوم الوراثة في لغة CSS عن مفهوم الوراثة في لغات البرمجة القائمة على الأصناف ، حيث يُمكن تعريف الصنف B على أنه "يشبه الصنف A، ولكن مع بعض التعديلات". [ 20 ] في CSS، يُمكن تنسيق عنصر باستخدام "الصنف A، ولكن مع بعض التعديلات". مع ذلك، لا يُمكن تعريف صنف CSS B بهذه الطريقة، بحيث يُمكن استخدامه لتنسيق عناصر متعددة دون الحاجة إلى تكرار التعديلات.

مثال

بالنظر إلى ورقة الأنماط التالية:

p { color : blue ; }

لنفترض أن هناك عنصر ap بداخله عنصر تأكيد ( ):<em>

<p> هذا لتوضيح <em> مفهوم الوراثة < / em >​​​​​

إذا لم يتم تعيين لون لعنصر em، فإن الكلمة المميزة "illustrate" ترث لون العنصر الأصل، p. تحتوي ورقة الأنماط p على اللون الأزرق، وبالتالي، يكون عنصر em أزرقًا أيضًا:

هذا لتوضيح مفهوم الميراث

مساحة بيضاء

يتم تجاهل المسافات البيضاء بين الخصائص والمحددات. هذا مقتطف من الكود:

body { overflow : hidden ; background : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ;}

وهو مكافئ وظيفيًا لهذا:

body { overflow : hidden ; background-color : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ; }

المسافة البادئة

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

body { overflow : hidden ; background : #000 url ( images/bg.gif ) no-repeat left top ; }

في بعض الأحيان، يتم وضع قيم خصائص متعددة في سطر منفصل:

@ font-face { font-family : 'Comic Sans' ; font-size : 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); }

تحديد الموقع

 يُعرّف CSS 2.1 ثلاثة أنظمة لتحديد المواقع:

تدفق طبيعي
تُرتّب العناصر المضمنة بنفس طريقة ترتيب حروف الكلمات في النص، واحدة تلو الأخرى عبر المساحة المتاحة حتى تمتلئ، ثم تبدأ سطرًا جديدًا أسفلها. أما عناصر الكتلة فتُرصّ عموديًا، مثل الفقرات وعناصر القوائم النقطية. ويشمل التدفق الطبيعي أيضًا التموضع النسبي لعناصر الكتلة أو العناصر المضمنة والمربعات المتصلة.
عوامات
يتم إخراج العنصر العائم من التدفق الطبيعي ونقله إلى اليسار أو اليمين قدر الإمكان في المساحة المتاحة. ثم يتدفق المحتوى الآخر بجانب العنصر العائم.
تحديد المواقع المطلق
لا يوجد مكان للعنصر ذي الموقع المطلق في التدفق الطبيعي للعناصر الأخرى، ولا يؤثر عليه. فهو يشغل موقعه المحدد في حاويته بشكل مستقل عن العناصر الأخرى. [ 22 ]

موقع العقار

توجد خمس قيم محتملة لهذه positionالخاصية. إذا تم وضع عنصر ما بأي طريقة أخرى غير staticالقيمة الافتراضية ، فسيتم استخدام topالخصائص الإضافية لتحديد الإزاحات والمواضع. العنصر ذو الموضع الثابت لا يتأثر بالخصائص المذكورة .bottomleftrighttopbottomleftright

ثابت

القيمة الافتراضية تضع العنصر في التدفق الطبيعي .

نسبي

يتم وضع العنصر في مساره الطبيعي ، ثم يتم تحريكه أو إزاحته من ذلك الموضع. يتم ترتيب عناصر المسار اللاحقة كما لو لم يتم تحريك العنصر.

مطلق

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

مُثَبَّت

يتم وضع العنصر بشكل مطلق في موضع ثابت على الشاشة حتى أثناء تمرير باقي المستند [ 22 ]

عائم وشفاف

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

غادر
يطفو العنصر إلى يسار السطر الذي كان من المفترض أن يظهر فيه؛ وقد تتدفق العناصر الأخرى حول جانبه الأيمن.
يمين
يطفو العنصر إلى يمين السطر الذي كان من المفترض أن يظهر فيه؛ وقد تتدفق العناصر الأخرى حول جانبه الأيسر.
واضح
يُجبر العنصر على الظهور أسفل العناصر العائمة ('clear') إلى اليسار ( )، أو اليمين ( ) أو كلا الجانبين ( ). [ 22 ] [ 23 ]clear:leftclear:rightclear:both

تاريخ

هاكون ويوم لي ، كبير المسؤولين التقنيين في شركة أوبرا سوفتوير والمشارك في ابتكار معايير CSS للويب

اقترح هاكون ويوم لي لغة CSS لأول مرة في 10 أكتوبر 1994. [ 24 ] في ذلك الوقت، كان لي يعمل مع تيم بيرنرز لي في مركز الأبحاث النووية CERN . [ 25 ] وقد طُرحت عدة لغات أخرى لتنسيق صفحات الويب في نفس الفترة تقريبًا، وأسفرت المناقشات على قوائم البريد الإلكتروني العامة وداخل اتحاد شبكة الويب العالمية ( W3C) عن إصدار أول توصية لـ CSS من W3C (CSS1) [ 26 ] في عام 1996. وكان لاقتراح بيرت بوس تأثير كبير، حيث أصبح مؤلفًا مشاركًا في CSS1، ويُعتبر أحد مؤسسي CSS. [ 27 ]

ظهرت أوراق الأنماط بأشكال مختلفة منذ بدايات لغة الترميز العامة القياسية ( SGML ) في ثمانينيات القرن الماضي، وطُوّرت لغة CSS لتوفير أوراق الأنماط للويب. [ 28 ] كان أحد متطلبات لغة أوراق الأنماط للويب هو أن تأتي أوراق الأنماط من مصادر مختلفة على الويب. لذلك، لم تكن لغات أوراق الأنماط الموجودة مثل DSSSL و FOSI مناسبة. من ناحية أخرى، سمحت CSS بتأثير أنماط متعددة على تصميم المستند من خلال "الأنماط المتتالية". [ 28 ]

مع تطور لغة HTML، أصبحت تشمل نطاقًا أوسع من الإمكانيات الأسلوبية لتلبية متطلبات مطوري الويب . وقد منح هذا التطور المصمم مزيدًا من التحكم في مظهر الموقع، على حساب زيادة تعقيد لغة HTML. وقد صعّبت الاختلافات في تطبيقات متصفحات الويب ، مثل ViolaWWW و WorldWideWeb ، [ 29 ] الحفاظ على مظهر متناسق للموقع، وقلّ تحكم المستخدمين في كيفية عرض محتوى الويب. كان المتصفح/المحرر الذي طوره تيم بيرنرز لي يحتوي على أوراق أنماط مُدمجة في البرنامج نفسه، ولذلك لم يكن من الممكن ربط هذه الأوراق بالمستندات على الويب. [ 25 ] أراد روبرت كايليو ، من مركز سيرن أيضًا، فصل بنية الموقع عن طريقة عرضه، بحيث يمكن لأوراق الأنماط المختلفة وصف طرق عرض مختلفة للطباعة، والعروض التقديمية على الشاشة، والمحررات. [ 29 ]

كان تحسين إمكانيات عرض الويب موضوعًا ذا أهمية بالغة للعديد من أعضاء مجتمع الويب، وقد طُرحت تسع لغات مختلفة لتنسيق صفحات الويب على القائمة البريدية www-style. [ 28 ] من بين هذه المقترحات التسعة، كان لمقترحين تأثيرٌ بالغٌ على ما أصبح يُعرف لاحقًا بـ CSS: تنسيقات HTML المتتالية [ 24 ] واقتراح تنسيقات الويب القائم على التدفق (SSP). [ 27 ] [ 30 ] استُخدم متصفحان كمنصة اختبار للمقترحات الأولية؛ حيث تعاون لي مع إيف لافون لتطبيق CSS في متصفح Arena الخاص بديف راجيت . [ 31 ] [ 32 ] [ 33 ] كما قام بيرت بوس بتطبيق اقتراحه الخاص بـ SSP في متصفح Argo . [ 27 ] بعد ذلك، عمل لي وبوس معًا لتطوير معيار CSS (حُذف حرف "H" من الاسم لأن هذه التنسيقات يمكن تطبيقها أيضًا على لغات ترميز أخرى إلى جانب HTML). [ 25 ]

عُرض اقتراح لي في مؤتمر " الفسيفساء والويب " (الذي سُمي لاحقًا WWW2) في شيكاغو، إلينوي عام 1994، ثم عُرض مرة أخرى مع بيرت بوس عام 1995. [ 25 ] في ذلك الوقت تقريبًا، كانت منظمة W3C قد بدأت بالتأسيس وأبدت اهتمامًا بتطوير CSS. ونظمت ورشة عمل لهذا الغرض برئاسة ستيفن بيمبرتون . ونتيجة لذلك، أضافت W3C العمل على CSS إلى مخرجات مجلس مراجعة تحرير HTML (ERB). وكان لي وبوس هما الفريق التقني الرئيسي المسؤول عن هذا الجانب من المشروع، بمشاركة أعضاء آخرين، من بينهم توماس ريردون من مايكروسوفت. في أغسطس 1996، قدمت شركة نتسكيب للاتصالات لغة بديلة لأوراق الأنماط تُسمى أوراق أنماط جافا سكريبت (JSSS). [ 25 ] لم تُستكمل المواصفات، وأصبحت مهملة. [ 34 ] بحلول نهاية عام 1996، أصبحت CSS جاهزة لتصبح رسمية، ونُشرت توصية CSS من المستوى الأول في ديسمبر.

كان تطوير لغات HTML وCSS و DOM يتم جميعها في مجموعة واحدة، هي مجلس مراجعة تحرير HTML (ERB). في أوائل عام 1997، تم تقسيم مجلس مراجعة تحرير HTML إلى ثلاث مجموعات عمل: مجموعة عمل HTML ، برئاسة دان كونولي من اتحاد شبكة الويب العالمية (W3C)؛ ومجموعة عمل DOM، برئاسة لورين وود من شركة SoftQuad ؛ ومجموعة عمل CSS ، برئاسة كريس ليلي من اتحاد شبكة الويب العالمية (W3C).

بدأ فريق عمل CSS بمعالجة المشكلات التي لم تُعالج في المستوى الأول من CSS، مما أدى إلى إنشاء المستوى الثاني في 4 نوفمبر 1997. ونُشر كتوصية من اتحاد شبكة الويب العالمية (W3C) في 12 مايو 1998. أما المستوى الثالث من CSS، الذي بدأ العمل عليه في عام 1998، فلا يزال قيد التطوير حتى عام 2014..

في عام 2005، قررت فرق عمل CSS تشديد تطبيق متطلبات المعايير. ونتيجةً لذلك، تم سحب المعايير المنشورة سابقًا، مثل CSS  2.1 وCSS  3 Selectors وCSS 3 Text، من مرحلة التوصية إلى مرحلة المسودة. 

صعوبة في التبني

 اكتملت مواصفات CSS 1 في عام 1996. وفي ذلك العام، أُصدر متصفح إنترنت إكسبلورر 3 من مايكروسوفت [ 25 ] ، والذي تضمن دعمًا محدودًا لـ CSS. أضاف كل من إنترنت إكسبلورر 4 ونتسكيب 4.x دعمًا إضافيًا، ولكنه كان غير مكتمل في الغالب، واحتوى على العديد من الأخطاء التي حالت دون اعتماد CSS بشكل فعّال. استغرق الأمر أكثر من ثلاث سنوات قبل أن يحقق أي متصفح ويب تطبيقًا شبه كامل للمواصفات. كان إنترنت إكسبلورر 5.0 لنظام ماكنتوش ، الذي صدر في مارس 2000، أول متصفح يدعم CSS  1 بشكل كامل (أكثر من 99%)، [ 35 ] متجاوزًا بذلك متصفح أوبرا ، الذي كان رائدًا في هذا المجال منذ إطلاقه دعم CSS قبل خمسة عشر شهرًا. وسرعان ما حذت متصفحات أخرى حذوه، وقام العديد منها بتطبيق أجزاء من CSS  2.

مع ذلك، حتى عندما بدأت متصفحات الويب اللاحقة من "الإصدار 5" بتقديم تطبيق شبه كامل لـ CSS، ظلت تعاني من بعض الأخطاء. فقد كانت مليئة بالتناقضات والأخطاء والمشاكل الأخرى . على سبيل المثال ، كان لدى متصفح مايكروسوفت إنترنت إكسبلورر 5.x لنظام ويندوز ، على عكس إنترنت إكسبلورر المختلف تمامًا لنظام ماكنتوش ، تطبيق معيب لنموذج صندوق CSS ، مقارنةً بمعايير CSS. هذه التناقضات والاختلافات في دعم الميزات جعلت من الصعب على المصممين تحقيق مظهر متناسق عبر المتصفحات والأنظمة الأساسية دون استخدام حلول بديلة تُعرف باسم "اختراقات CSS" و"الفلاتر". كانت أخطاء نموذج صندوق IE في ويندوز خطيرة للغاية لدرجة أنه عند إصدار إنترنت إكسبلورر 6 ، قدمت مايكروسوفت وضعًا متوافقًا مع الإصدارات السابقة لتفسير CSS (" وضع المشاكل ") إلى جانب وضع "المعايير" البديل والمصحح. كما وفرت متصفحات أخرى غير تابعة لمايكروسوفت إمكانية تبديل الوضع. لذا، أصبح من الضروري لمؤلفي ملفات HTML التأكد من احتوائها على علامة مميزة خاصة تُشير إلى أن CSS مُتوافق مع المعايير، وذلك لإظهار أنهم قصدوا تفسير CSS بشكل صحيح، وفقًا للمعايير، وليس مُصممًا لمتصفح IE5/Windows الذي عفا عليه الزمن . فبدون هذه العلامة، ستُغير متصفحات الويب التي تدعم خاصية "وضع التوافق" حجم العناصر في صفحات الويب كما يفعل IE 5 على نظام Windows، بدلًا من اتباع معايير CSS.

أدت مشاكل التبني المتقطع لتقنية CSS والأخطاء في المواصفات الأصلية إلى قيام اتحاد شبكة الويب العالمية (W3C) بمراجعة  معايير CSS 2 إلى CSS  2.1، والتي اقتربت من تقديم صورة عملية لدعم CSS الحالي في متصفحات HTML.  تم حذف بعض خصائص CSS 2 التي لم ينجح أي متصفح في تطبيقها، وفي حالات قليلة، تم تغيير السلوكيات المحددة لجعل المعيار متوافقًا مع التطبيقات السائدة.  أصبح CSS 2.1 توصية مرشحة في 25 فبراير 2004، ولكن  تم سحبه مرة أخرى إلى حالة مسودة العمل في 13 يونيو 2005، [ 36 ] ولم يعد إلى حالة التوصية المرشحة إلا في 19 يوليو 2007. [ 37 ]

بالإضافة إلى هذه المشاكل، .cssتم استخدام الامتداد بواسطة منتج برمجي يستخدم لتحويل ملفات PowerPoint إلى ملفات Compact Slide Show، [ 38 ] لذلك قامت بعض خوادم الويب بتقديمها جميعًا .css[ 39 ] كنوع MIME application/x-pointplus[ 40 ] بدلاً من ذلك text/css.

بادئات الموردين

كانت شركات تصنيع المتصفحات تُضيف أحيانًا معايير جديدة قبل توحيدها وتعميمها. ولمنع التداخل مع التطبيقات المستقبلية، كانت الشركات تُضيف أسماءً فريدةً إلى هذه المعايير، مثل -moz-معيار Mozilla Firefox ، -webkit-المُسمى على اسم محرك تصفح Apple Safari ، -o-ومعيار Opera Browser ، ومعيار Microsoft Internet Explorer-ms- والإصدارات الأولى من Microsoft Edge التي تستخدم EdgeHTML.

في بعض الأحيان، يكون للمعاملات التي تحتوي على بادئات خاصة بالبائعين، مثل -moz-radial-gradientو، -webkit-linear-gradientصيغة مختلفة قليلاً مقارنة بنظيراتها التي لا تحتوي على بادئات خاصة بالبائعين. [ 41 ]

تصبح الخصائص التي تبدأ ببادئات قديمةً بحلول وقت توحيد المعايير. تتوفر برامج لإضافة البادئات تلقائيًا للمتصفحات القديمة، وللإشارة إلى الإصدارات الموحدة للمعاملات التي تبدأ ببادئات. ولأن البادئات تقتصر على مجموعة فرعية صغيرة من المتصفحات، فإن إزالة البادئة تسمح للمتصفحات الأخرى برؤية هذه الوظيفة. ويُستثنى من ذلك بعض -webkit-الخصائص القديمة التي تبدأ ببادئات، والتي أصبحت شائعةً ومستمرةً على الويب لدرجة أن عائلات أخرى من المتصفحات قررت دعمها من أجل التوافق. [ 42 ]

لقطة CSS لعام 2021

تتضمن لغة CSS مستويات وملفات تعريفية متنوعة. يبني كل مستوى من مستويات CSS على المستوى السابق، ويضيف عادةً ميزات جديدة، ويُشار إليها عادةً [ 43 ] بالرموز CSS  1، وCSS  2، وCSS  3، وCSS  4. تُمثل ملفات التعريف عادةً مجموعة فرعية من مستوى واحد أو أكثر من مستويات CSS، وهي مُصممة لجهاز أو واجهة مستخدم مُحددة. يوجد حاليًا ملفات تعريفية للأجهزة المحمولة، والطابعات، وأجهزة التلفزيون. يجب عدم الخلط بين ملفات التعريف وأنواع الوسائط، التي أُضيفت في CSS  2.

CSS 1

أول مواصفات CSS تُصبح توصية رسمية من W3C هي CSS المستوى 1، التي نُشرت في 17 ديسمبر 1996. يُنسب الفضل إلى هاكون ويوم لي وبيرت بوس كمطورين أصليين. [ 44 ] [ 45 ] من بين قدراتها دعم

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

لم يعد اتحاد شبكة الويب العالمية (W3C) يدعم توصية CSS 1. [ 46 ]

CSS 2

تم تطوير مواصفات CSS المستوى 2 بواسطة W3C ونُشرت كتوصية في مايو 1998. وهي مجموعة فرعية من CSS  1،  وتتضمن CSS 2 عددًا من الإمكانيات الجديدة مثل تحديد المواقع المطلق والنسبي والثابت للعناصر و z-index ، ومفهوم أنواع الوسائط، ودعم أوراق الأنماط الصوتية (التي تم استبدالها لاحقًا بوحدات الكلام CSS 3) [ 47 ] والنص ثنائي الاتجاه، وخصائص خط جديدة مثل الظلال.

لم يعد اتحاد شبكة الويب العالمية (W3C) يدعم توصية CSS  2. [ 48 ]

CSS 2.1

يُصلح الإصدار الأول من معيار CSS المستوى الثاني، والذي يُشار إليه غالبًا باسم "CSS 2.1"، الأخطاء الواردة في CSS  2، ويزيل الميزات غير المدعومة بشكل كافٍ أو غير المتوافقة تمامًا، ويضيف ملحقات المتصفح المُطبقة مسبقًا إلى المواصفات. وللامتثال لعملية W3C لتوحيد المواصفات التقنية،  تذبذب معيار CSS 2.1 بين حالة مسودة العمل وحالة التوصية المرشحة لسنوات عديدة. أصبح CSS 2.1 أول توصية مرشحة في 25 فبراير 2004، ثم عاد إلى مسودة العمل في 13 يونيو 2005 لمزيد من المراجعة. ثم عاد إلى التوصية المرشحة في 19 يوليو 2007، ثم جرى تحديثه مرتين في عام 2009. ومع ذلك، ونظرًا لإجراء تغييرات وتوضيحات، عاد مرة أخرى إلى مسودة العمل النهائية في 7 ديسمبر 2010.

تم تقديم CSS 2.1 كتوصية مقترحة في 12 أبريل 2011. [ 49 ] وبعد مراجعتها من قبل اللجنة الاستشارية لـ W3C، تم نشرها أخيرًا كتوصية من W3C في 7 يونيو 2011. [ 50 ]

كان من المخطط أن يكون CSS 2.1 هو المراجعة الأولى والأخيرة للمستوى 2 - ولكن العمل ذو الأولوية المنخفضة على CSS 2.2 بدأ في عام 2015.

CSS 3

على عكس CSS  2، الذي يُعدّ مواصفةً واحدةً شاملةً تُحدّد ميزاتٍ مُتعدّدة، فإنّ CSS  3 مُقسّمٌ إلى عدّة وثائق مُنفصلة تُسمّى "وحدات". تُضيف كلّ وحدة إمكانياتٍ جديدةً أو تُوسّع ميزاتٍ مُحدّدةً في CSS  2، مع الحفاظ على التوافق مع الإصدارات السابقة. بدأ العمل على CSS 3 في نفس وقت نشر التوصية الأصلية لـ CSS 2. نُشرت مسودات  CSS 3 الأوّلية في يونيو 1999. [ 51 ] 

بسبب التصميم المعياري، تتمتع الوحدات المختلفة بمستويات استقرار وحالات مختلفة. [ 52 ]

بعض الوحدات النمطية لديها حالة توصية مرشحة ( CR ) وتُعتبر مستقرة إلى حد ما. في مرحلة التوصية المرشحة ، يُنصح التطبيقات بإزالة بادئات الموردين. [ 53 ]

ملخص مواصفات الوحدة الرئيسية [ 54 ]
وحدةعنوان المواصفاتحالةتاريخ
خلفية CSS3وحدة خلفيات وحدود CSS - المستوى 3 توصية المرشحفبراير 2023
css-box-3وحدة نموذج صندوق CSS المستوى 3توصيةأبريل 2023
css-cascade-3التتالي والوراثة في CSS - المستوى 3 توصيةفبراير 2021
css-color-3وحدة ألوان CSS المستوى 3توصيةيناير 2022
محتوى CSS3وحدة المحتوى المُنشأ بواسطة CSS - المستوى 3 مسودة عملأغسطس 2019
خطوط CSS 3وحدة خطوط CSS المستوى 3توصيةسبتمبر 2018
css3-gcpmمحتوى مُولّد بواسطة CSS لوحدة الوسائط المُصفّحةمسودة عملمايو 2014
تخطيط CSS3وحدة تخطيط قالب CSSملحوظةمارس 2015
استعلامات الوسائط CSS3 استفسارات وسائل الإعلامتوصيةيونيو 2012
استعلامات الوسائط - 4 استفسارات الوسائط - المستوى 4توصية المرشحديسمبر 2021
css3-multicol وحدة تخطيط متعددة الأعمدة - المستوى 1توصية المرشحأكتوبر 2021
صفحة CSS3وحدة الوسائط متعددة الصفحات CSS المستوى 3مسودة عمل ، وتم نقل جزء منها إلى css3-breakأكتوبر 2018
كسر CSS3وحدة تجزئة CSS المستوى 3توصية المرشحديسمبر 2018
المحددات-3مستوى المُحدِّدات 3توصيةنوفمبر 2018
المحددات - 4مستوى الاختيار 4مسودة عملنوفمبر 2022
واجهة مستخدم CSS3وحدة واجهة المستخدم الأساسية في CSS المستوى 3 (CSS3 UI)توصيةيونيو 2018

CSS 4

جين سيمونز تناقش حالة لغة CSS في عام 2019، حيث  تم تطوير العديد من وحدات CSS 4

لا توجد مواصفات CSS4، [ 55 ] [ 56 ] لأن CSS قد تم تقسيمه إلى العديد من الوحدات المنفصلة التي تعمل بشكل مستقل.

بدأت الوحدات التي تعتمد على أشياء من المستوى 2 من CSS في المستوى 3. وقد وصل بعضها بالفعل إلى المستوى 4 أو يقترب من المستوى 5. أما الوحدات الأخرى التي تحدد وظائف جديدة تمامًا، مثل Flexbox ، [ 57 ] فقد تم تصنيفها على أنها من المستوى 1 وبعضها يقترب من المستوى 2.

ينشر فريق عمل CSS أحيانًا "لقطات"، وهي عبارة عن مجموعة من الوحدات الكاملة وأجزاء من مسودات أخرى تُعتبر مستقرة بما يكفي ليتمكن مطورو المتصفحات من تطبيقها. حتى الآن، نُشرت خمس وثائق من هذا القبيل بعنوان "أفضل الممارسات الحالية" على شكل ملاحظات، في الأعوام 2007، [ 58 ] 2010، [ 59 ] 2015، [ 60 ] 2017، [ 61 ] و2018. [ 62 ]

بما أن هذه اللقطات من المواصفات موجهة في المقام الأول للمطورين، فقد ازداد الطلب على وثيقة مرجعية مماثلة ذات إصدارات محددة، موجهة للمؤلفين، تُقدم حالة التطبيقات المتوافقة كما هو موثق حاليًا في مواقع مثل Can I Use... [ 63 ] وMDN Web Docs. [ 64 ] وقد تم إنشاء مجموعة مجتمعية تابعة لاتحاد شبكة الويب العالمية (W3C) في أوائل عام 2020 لمناقشة هذا المورد وتحديده. [ 65 ] كما أن نوع الترقيم الفعلي للإصدارات لا يزال محل نقاش، مما يعني أن الوثيقة، بمجرد إصدارها، قد لا تُسمى "CSS4".

دعم المتصفح

يستخدم كل متصفح ويب محرك تخطيط لعرض صفحات الويب، ولا يتوفر دعم متسق لوظائف CSS بينها. ولأن المتصفحات لا تحلل CSS بشكل مثالي، فقد طُوّرت تقنيات برمجية متعددة لاستهداف متصفحات محددة بحلول بديلة (تُعرف عادةً باسم اختراقات CSS أو مرشحات CSS). قد يعيق نقص الدعم في المتصفحات الرئيسية اعتماد وظائف جديدة في CSS. على سبيل المثال، كان متصفح إنترنت إكسبلورر بطيئًا في إضافة دعم للعديد من ميزات CSS 3، مما أدى إلى إبطاء اعتماد هذه الميزات والإضرار بسمعة المتصفح بين المطورين. بالإضافة إلى ذلك، filterاستُخدمت صيغة خاصة للخاصية غير المسبوقة ببادئة اسم المورّد في بعض الإصدارات. [ 66 ] ولضمان تجربة متسقة لمستخدميهم، غالبًا ما يختبر مطورو الويب مواقعهم على أنظمة تشغيل ومتصفحات وإصدارات متصفحات متعددة، مما يزيد من وقت التطوير وتعقيده. وقد صُممت أدوات مثل BrowserStack لتقليل تعقيد صيانة هذه البيئات.

إضافةً إلى أدوات الاختبار هذه، تحتفظ العديد من المواقع بقوائم المتصفحات التي تدعم خصائص CSS محددة، بما في ذلك CanIUse و MDN Web Docs . كما يُعرّف CSS 3 استعلامات الميزات، التي توفر @supportsتوجيهًا يسمح للمطورين باستهداف المتصفحات التي تدعم وظائف معينة مباشرةً ضمن CSS الخاص بهم. [ 67 ] ويمكن أحيانًا إضافة CSS غير المدعوم من المتصفحات القديمة باستخدام JavaScript polyfills ، وهي عبارة عن أجزاء من كود JavaScript مصممة لجعل المتصفحات تعمل بشكل متسق. هذه الحلول البديلة - والحاجة إلى دعم وظائف احتياطية - قد تُضيف تعقيدًا إلى مشاريع التطوير، وبالتالي، غالبًا ما تُحدد الشركات قائمة بإصدارات المتصفحات التي ستدعمها والتي لن تدعمها.

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

القيود

تتضمن بعض القيود الملحوظة للإمكانيات الحالية لـ CSS ما يلي:

لا يمكن تحديد نطاق جديد بشكل صريح بغض النظر عن الموضع

تعتمد قواعد تحديد نطاق خصائص مثل z-index على البحث عن أقرب عنصر أب ذي تعريف z position: absolute- position: relativeindex. هذا الترابط غير المألوف له آثار غير مرغوب فيها. على سبيل المثال، يستحيل تجنب تعريف نطاق جديد عند الاضطرار إلى تعديل موضع عنصر ما، مما يمنع استخدام النطاق المطلوب لعنصر أب.

سلوك ديناميكي للفئة الزائفة غير قابل للتحكم

تُطبّق لغة CSS فئات زائفة تُتيح درجةً من التفاعل مع المستخدم من خلال تطبيق أنماط بديلة بشكل مشروط. إحدى هذه الفئات الزائفة، وهي " "، ديناميكية (مكافئة لخاصية "onmouseover" في جافا سكريبت) ولها إمكانية إساءة الاستخدام (مثل تنفيذ نوافذ منبثقة عند اقتراب المؤشر)، [ 69 ] ولكن لا تُتيح CSS للمستخدم إمكانية تعطيلها (لا توجد خاصية مشابهة لـ "disable") أو تقييد تأثيراتها (لا توجد قيم مشابهة لـ "nochange" لكل خاصية).:hover

لا يمكن تسمية القواعد

لا توجد طريقة لتسمية قاعدة CSS، مما يسمح (على سبيل المثال) للبرامج النصية من جانب العميل بالإشارة إلى القاعدة حتى لو تغير محددها.

لا يمكن تضمين أنماط من قاعدة في قاعدة أخرى

غالبًا ما يتطلب الأمر تكرار أنماط CSS في عدة قواعد لتحقيق التأثير المطلوب، مما يستلزم صيانة إضافية واختبارًا أكثر شمولًا. وقد اقتُرحت بعض ميزات CSS الجديدة لحل هذه المشكلة، ولكن تم التخلي عنها لاحقًا. [ 70 ] [ 71 ] بدلًا من ذلك، يمكن للمؤلفين اكتساب هذه القدرة باستخدام لغات أنماط CSS أكثر تطورًا تُترجم إلى CSS، مثل Sass و Less و Stylus .

لا يمكن استهداف نص معين دون تغيير الترميز

إلى جانب العنصر الزائف، لا يمكن استهداف نطاقات محددة من النصوص دون الحاجة إلى استخدام عناصر نائبة.::first-letter

المزايا

فصل المحتوى عن طريقة العرض

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

التناسق على مستوى الموقع

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

عرض النطاق الترددي

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

إعادة تنسيق الصفحة

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

إمكانية الوصول

بدون استخدام CSS، يتعين على مصممي الويب عادةً تصميم صفحاتهم باستخدام تقنيات مثل جداول HTML التي تعيق إمكانية الوصول للمستخدمين ذوي الإعاقة البصرية (انظر تصميم الويب بدون جداول §  إمكانية الوصول ).

التقييس

الأطر

أطر عمل CSS هي مكتبات جاهزة مصممة لتسهيل تصميم صفحات الويب بشكل أكثر توافقًا مع المعايير باستخدام لغة CSS. تشمل أطر عمل CSS كلاً من Blueprint و Bootstrap و Foundation وMaterialize. وكما هو الحال مع مكتبات لغات البرمجة والنصوص البرمجية، تُدمج أطر عمل CSS عادةً كملفات CSS خارجية (.css) يُشار إليها في HTML . توفر هذه الأطر عددًا من الخيارات الجاهزة لتصميم صفحات الويب وتنسيقها. على الرغم من نشر العديد من هذه الأطر، إلا أن بعض المطورين يستخدمونها في الغالب لإنشاء نماذج أولية سريعة، أو للتعلم منها، ويفضلون تصميم CSS يدويًا بما يتناسب مع كل موقع منشور، متجنبين بذلك أعباء التصميم والصيانة والتحميل الناتجة عن وجود العديد من الميزات غير المستخدمة في تصميم الموقع. [ 72 ]<head>

منهجيات التصميم

مع ازدياد حجم موارد CSS المستخدمة في المشروع، غالبًا ما يحتاج فريق التطوير إلى تحديد منهجية تصميم موحدة للحفاظ على تنظيمها. وتتمثل الأهداف في سهولة التطوير، وسهولة التعاون أثناء التطوير، وأداء أوراق الأنماط المنشورة في المتصفح. تشمل المنهجيات الشائعة OOCSS (CSS الموجه للكائنات)، وACSS (CSS الذري)، وCSS (أوراق الأنماط المتتالية العضوية)، وSMACSS (بنية CSS قابلة للتوسع والنمطية)، وBEM (الكتلة، العنصر، المُعدِّل). [ 73 ]

انظر أيضاً

مراجع

  1. ↑ "محضر اجتماع عبر الهاتف بتاريخ 11 ديسمبر 2024" . مدونة مجموعة عمل CSS. اتحاد شبكة الويب العالمية . 12 ديسمبر 2024. مؤرشف من الأصل بتاريخ 16 يناير 2025. تم الاطلاع عليه بتاريخ 16 يناير 2025 .
  2. ↑ "دليل مطوري CSS" . وثائق MDN على الويب . مؤرشف من الأصل بتاريخ 25-09-2015 . تم الاطلاع عليه بتاريخ 20-04-2026 .
  3. ↑ فلاناغان، ديفيد (18 أبريل 2011). جافا سكريبت: الدليل الشامل . بكين؛ فارنهام: أورايلي. ص 1. ISBN  978-1-4493-9385-4. OCLC 686709345 . تُعد لغة جافا سكريبت جزءًا من ثلاثية التقنيات التي يجب على جميع مطوري الويب تعلمها: HTML لتحديد محتوى صفحات الويب، وCSS لتحديد عرض صفحات الويب، وجافا سكريبت لتحديد سلوك صفحات الويب. 
  4. ↑ "ما هي لغة CSS؟" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل بتاريخ 29-11-2010 . تم الاطلاع عليه بتاريخ 01-12-2010 .
  5. ↑ كلارك، سكوت (23 يوليو 2010). "تطبيقات الهاتف المحمول المستقبلية القائمة على الويب باستخدام HTML 5 وCSS وJavaScript" . HTML Goodies . HTMLGoodies. مؤرشف من الأصل في 20 أكتوبر 2014. تم الاطلاع عليه في 16 أكتوبر 2014 .
  6. ↑ "خدمة التحقق من صحة CSS التابعة لاتحاد شبكة الويب العالمية" . مؤرشفة من الأصل بتاريخ 14 فبراير 2011. تم الاطلاع عليها بتاريخ 30 يونيو 2012 .
  7. ↑ "مواصفات W3C CSS2.1 للعناصر والفئات الزائفة" . اتحاد شبكة الويب العالمية. 7 يونيو 2011. مؤرشف من الأصل في 30 أبريل 2012. تم الاطلاع عليه في 30 أبريل 2012 .
  8. ↑ "المحددات" . مواصفات أوراق الأنماط المتتالية المستوى 2 المراجعة 1 (CSS 2.1) . W3C. مؤرشف من الأصل بتاريخ 23-04-2006.
  9. ↑ "المحددات من المستوى 3" . اتحاد شبكة الويب العالمية (W3C). مؤرشف من الأصل بتاريخ 3 يونيو 2014. تم الاطلاع عليه بتاريخ 30 مايو 2014 .
  10. ↑ "وحدة بناء جملة CSS المستوى 3" . W3C . مؤرشف من الأصل في 1 أكتوبر 2023. تم الاطلاع عليه في 1 أكتوبر 2023 .
  11. ↑ "مواصفات W3C CSS2.1 لمجموعات القواعد، وكتل التصريح، والمحددات" . اتحاد شبكة الويب العالمية. 7 يونيو 2011. مؤرشف من الأصل في 28 مارس 2008. تم الاطلاع عليه في 20 يونيو 2009 .
  12. ↑ "جدول الخصائص الكامل" . W3C. مؤرشف من الأصل بتاريخ 30-05-2014 . تم الاطلاع عليه بتاريخ 30-05-2014 .
  13. ↑ "فهرس خصائص CSS" . W3C . تم الاطلاع عليه بتاريخ 9 أغسطس 2020 .
  14. ↑ "ألوان CSS" . وثائق MDN على الويب. 5 أبريل 2024. مؤرشف من الأصل بتاريخ 27 مارس 2024. تم الاطلاع عليه بتاريخ 5 أبريل 2024 .
  15. ↑ "6.1 وحدات الطول" . أوراق الأنماط المتتالية، المستوى 1. 17 ديسمبر 1996. مؤرشف من الأصل في 14 يونيو 2019. تم الاسترجاع في 20 يونيو 2019 .
  16. ↑ "5. وحدات المسافة: نوع < الطول > " . وحدة قيم ووحدات CSS، المستوى 3. 6 يونيو 2019. مؤرشف من الأصل في 7 يونيو 2019. تم الاطلاع عليه في 20 يونيو 2019 .
  17. ↑ مجموعة عمل HTML التابعة لاتحاد شبكة الويب العالمية. "HTML 5: مفردات وواجهات برمجة تطبيقات مرتبطة بها لـ HTML وXHTML" . اتحاد شبكة الويب العالمية . مؤرشف من الأصل في 15 يوليو 2014. تم الاطلاع عليه في 28 يونيو 2014 .
  18. 1 2 ماير، إريك أ. (2006). أوراق الأنماط المتتالية: الدليل الشامل ( الطبعة الثالثة). أورايلي ميديا، إنك. ISBN  0-596-52733-0أُرشف من المصدر الأصلي بتاريخ 15 فبراير 2014. تم الاطلاع عليه بتاريخ 16 فبراير 2014 .
  19. ↑ "تعيين قيم الخصائص، والتسلسل، والوراثة" . مؤرشف من الأصل بتاريخ 11-06-2014 . تم الاطلاع عليه بتاريخ 10-06-2014 .
  20. ↑ "هل يمكن لفئة CSS أن ترث فئة واحدة أو أكثر؟" . StackOverflow . مؤرشف من الأصل بتاريخ 14-10-2017 . تم الاطلاع عليه بتاريخ 10-09-2017 .
  21. ↑ "خصائص الاختصار" . دليل تعليمي . مطورو موزيلا. 7 ديسمبر 2017. مؤرشف من الأصل في 30 يناير 2018. تم الاطلاع عليه في 30 يناير 2018 .
  22. 1 2 3 بوس، بيرت؛ وآخرون . (7 ديسمبر 2010). "9.3 مخططات تحديد المواقع" . مواصفات أوراق الأنماط المتتالية المستوى 2، المراجعة 1 (CSS 2.1) . اتحاد شبكة الويب العالمية (W3C). مؤرشف من الأصل في 18 فبراير 2011. تم الاسترجاع في 16 فبراير 2011 . 
  23. ↑ هولزشلاغ، مولي إي (2005). انطلق في عالم HTML وCSS . بيرسون للتعليم، المحدودة. ISBN 0-13-185586-7.
  24. 1 2 لي، هاكون دبليو (10 أكتوبر 1994). "أوراق أنماط HTML المتتالية - اقتراح" (اقتراح) . سيرن. مؤرشف من الأصل في 4 يونيو 2014. تم الاسترجاع في 25 مايو 2014 .
  25. 1 2 3 4 5 6 لي، هاكون ويوم ؛ بوس، بيرت (1999). أوراق الأنماط المتتالية، تصميم مواقع الويب . أديسون ويسلي. ISBN 0-201-59625-3تم الاطلاع عليه بتاريخ 23 يونيو 2010 .
  26. ↑ "أوراق الأنماط المتتالية، المستوى 1" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل بتاريخ 9 أبريل 2014. تم الاطلاع عليه بتاريخ 7 مارس 2014 .
  27. 1 2 3 بوس، بيرت (14 أبريل 1995). "أوراق أنماط بسيطة لـ SGML وHTML على الويب" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل في 23 سبتمبر 2009. تم الاطلاع عليه في 20 يونيو 2010 .
  28. 1 2 3 "أوراق الأنماط المتتالية" . جامعة أوسلو. مؤرشف من الأصل بتاريخ 6 سبتمبر 2006. تم الاطلاع عليه بتاريخ 3 سبتمبر 2014 .
  29. 1 2 بيتري، تشارلز؛ كايليو، روبرت (نوفمبر 1997). "مقابلة مع روبرت كايليو حول اقتراح شبكة الويب العالمية: "كيف حدث ذلك بالفعل".معهد مهندسي الكهرباء والإلكترونيات . مؤرشف من الأصل في 6 يناير 2011. تم الاطلاع عليه في 18 أغسطس 2010 .
  30. ↑ بوس، بيرت (31 مارس 1995). "مقترح ورقة أنماط قائمة على التدفق" . مؤرشف من الأصل في 12 أكتوبر 2014. تم الاسترجاع في 3 سبتمبر 2014 .
  31. ↑ نيلسن، هنريك فريستيك (7 يونيو 2002). "مخترقو Libwww" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل في 2 ديسمبر 2009. تم الاطلاع عليه في 6 يونيو 2010 .
  32. ↑ "إيف لافون" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل في 24 يونيو 2010. تم الاطلاع عليه في 17 يونيو 2010 .
  33. ↑ "فريق W3C: التكنولوجيا والمجتمع" . اتحاد شبكة الويب العالمية. 18 يوليو 2008. مؤرشف من الأصل في 28 مايو 2010. تم الاطلاع عليه في 22 يناير 2011 .
  34. ↑ لو مونتولي ؛ بريندان إيتش ؛ سكوت فورمان ؛ دونا كونفرس ؛ تروي شوفالييه (22 أغسطس 1996). "أوراق الأنماط المستندة إلى جافا سكريبت" . اتحاد شبكة الويب العالمية (W3C). مؤرشف من الأصل في 27 مايو 2010. تم الاطلاع عليه في 23 يونيو 2010 .
  35. ↑ "برنامج CSS" . اتحاد شبكة الويب العالمية (W3C). مؤرشف من الأصل بتاريخ 25-11-2010 . تم الاطلاع عليه بتاريخ 15-01-2011 .
  36. ^ آن فان كيستيرين . "CSS 2.1 - مدونة آن الإلكترونية" . مؤرشفة من الأصلي بتاريخ 10-12-2005 . تم الاسترجاع 2011/02/16 . 
  37. ↑ "أرشيف أخبار اتحاد شبكة الويب العالمية لعام 2007" . اتحاد شبكة الويب العالمية . 21 ديسمبر 2007. مؤرشف من الأصل في 28 يونيو 2011. تم الاطلاع عليه في 16 فبراير 2011 .
  38. ↑ نيتو، تريستان (18 مارس 2002). "نوع MIME غير صحيح لملفات CSS" . مركز مطوري موزيلا . موزيلا . مؤرشف من الأصل في 20 مايو 2011. تم الاطلاع عليه في 20 يونيو 2010 .
  39. ↑ ماكبرايد، دون (27 نوفمبر 2009). "أنواع الملفات" . مؤرشف من الأصل في 29 أكتوبر 2010. تم الاطلاع عليه في 20 يونيو 2010 .
  40. ↑ "تفاصيل امتداد ملف CSS" . قاعدة بيانات امتدادات الملفات. ١٢ مارس ٢٠١٠. مؤرشف من الأصل في ١٨ يوليو ٢٠١١. تم الاطلاع عليه في ٢٠ يونيو ٢٠١٠ .
  41. ↑ كيرنين، جينيفر (12 نوفمبر 2019). "ما هي بادئات بائعي CSS أو بادئات المتصفح؟" . لايف واير . مؤرشف من الأصل في 30 نوفمبر 2020. تم الاسترجاع في 20 أبريل 2026 .
  42. ↑ "معيار التوافق" . WHATWG . 24 يناير 2024. مؤرشف من الأصل في 4 فبراير 2024.
  43. ↑ "لمحة عن CSS لعام 2023 - 2.4. مستويات CSS" . W3C . 7 ديسمبر 2023. مؤرشف من الأصل في 8 فبراير 2024.
  44. ↑ بوس، بيرت؛ ويوم لي، هاكون (1997). أوراق الأنماط المتتالية: تصميم مواقع الويب (الطبعة الأولى ). هارلو، إنجلترا؛ ريدينغ، ماساتشوستس: أديسون ويسلي لونغمان. ISBN  0-201-41998-X.
  45. ↑ W3C : أوراق الأنماط المتتالية، المستوى 1. مؤرشف بتاريخ 9 فبراير 2011 في Wayback Machine. مواصفات CSS 1
  46. ↑ W3C : مواصفات أوراق الأنماط المتتالية المستوى 1، مؤرشفة بتاريخ 11-02-2011 في Wayback Machine، مواصفات CSS المستوى 1
  47. ↑ "أوراق أنماط الصوت" . اتحاد شبكة الويب العالمية. مؤرشف من الأصل بتاريخ 26-10-2014 . تم الاطلاع عليه بتاريخ 26-10-2014 .
  48. ↑ W3C : أوراق الأنماط المتتالية، المستوى 2 مؤرشف في 16-01-2011 في Wayback Machine مواصفات CSS  2 (توصية 1998)
  49. ↑ W3C : أوراق الأنماط المتتالية، المستوى 2، المراجعة 1، مؤرشف بتاريخ 2011-11-09 في Wayback Machine، مواصفات CSS 2.1 (توصية مقترحة من W3C)
  50. ↑ اتحاد شبكة الويب العالمية (W3C): معيار أوراق الأنماط المتتالية يتميز بتوافقية غير مسبوقة. مؤرشف بتاريخ 10 يونيو 2011 في أرشيف الإنترنت (Wayback Machine).
  51. ↑ بوس، بيرت (18 فبراير 2011). "أوصاف جميع مواصفات CSS" . اتحاد شبكة الويب العالمية . مؤرشف من الأصل في 31 مارس 2011. تم الاطلاع عليه في 3 مارس 2011 .
  52. ↑ بوس، بيرت (26 فبراير 2011). "أعمال CSS الحالية" . اتحاد شبكة الويب العالمية . مؤرشف من الأصل في 3 مارس 2011. تم الاسترجاع في 3 مارس 2011 .
  53. ↑ إيتيماد، إليكا ج. (12 ديسمبر 2010). "لمحة عن أوراق الأنماط المتتالية (CSS) لعام 2010" . اتحاد شبكة الويب العالمية . مؤرشف من الأصل في 16 مارس 2011. تم الاطلاع عليه في 3 مارس 2011 .
  54. ↑ "جميع مواصفات CSS" . W3C. 22-05-2014. مؤرشف من الأصل في 30-05-2014 . تم الاطلاع عليه في 30-05-2014 .
  55. ↑ أتكينز، تاب الابن. "كلمة عن CSS4" . مؤرشف من الأصل في 31 أكتوبر 2012. تم الاطلاع عليه في 18 أكتوبر 2012 .
  56. ↑ أندرو، راشيل. "لماذا لا يوجد CSS4 - شرح مستويات CSS" . مؤرشف من الأصل في 8 يوليو 2025. تم الاطلاع عليه في 28 سبتمبر 2025 .
  57. ↑ "وحدة تخطيط الصندوق المرن CSS - المستوى 1" . اتحاد شبكة الويب العالمية (W3C). 19 نوفمبر 2018. مؤرشف من الأصل في 19 أكتوبر 2012. تم الاطلاع عليه في 18 أكتوبر 2012 .
  58. ↑ "لمحة عن أوراق الأنماط المتتالية (CSS) لعام 2007" . 12 مايو 2011. مؤرشف من الأصل في 8 أغسطس 2016. تم الاطلاع عليه في 18 يوليو 2016 .
  59. ↑ "لمحة عن أوراق الأنماط المتتالية (CSS) لعام 2010" . 12 مايو 2011. مؤرشف من الأصل في 16 مارس 2011. تم الاطلاع عليه في 3 مارس 2011 .
  60. ↑ "لقطة CSS لعام 2015" . اتحاد شبكة الويب العالمية (W3C) . 13 أكتوبر 2015. مؤرشف من الأصل في 27 يناير 2017. تم الاطلاع عليه في 13 فبراير 2017 .
  61. ↑ "لقطة CSS لعام 2017" . اتحاد شبكة الويب العالمية (W3C) . 31 يناير 2017. مؤرشف من الأصل في 13 فبراير 2017. تم الاطلاع عليه في 13 فبراير 2017 .
  62. ↑ "لقطة CSS لعام 2018" . اتحاد شبكة الويب العالمية (W3C) . 22 يناير 2019. مؤرشف من الأصل في 1 فبراير 2019. تم الاطلاع عليه في 2 يناير 2019 .
  63. ↑ "CSS" . هل يمكنني استخدام... جداول الدعم لـ HTML5 وCSS3، إلخ . مؤرشف من الأصل بتاريخ 19-02-2018 . تم الاطلاع عليه بتاريخ 26-01-2019 .
  64. ↑ "CSS" . وثائق MDN على الويب . 21 يوليو 2023. مؤرشف من الأصل في 26 نوفمبر 2023.
  65. ↑ "دعوة للمشاركة في مجموعة مجتمع CSS4" . اتحاد شبكة الويب العالمية (W3C) . 24 فبراير 2020. مؤرشف من الأصل في 10 فبراير 2023. تم الاطلاع عليه بتاريخ 27 فبراير 2020 .
  66. ↑ لازاريس، لويس (28 أبريل 2010). "حلول CSS3 لمتصفح إنترنت إكسبلورر" . مجلة سماشينغ . مؤرشف من الأصل بتاريخ 12 أكتوبر 2016. تم الاطلاع عليه بتاريخ 12 أكتوبر 2016 .
  67. ↑ سيمونز، جين (17 أغسطس 2016). "استخدام استعلامات الميزات في CSS" . Mozilla Hacks . مؤرشف من الأصل في 11 أكتوبر 2016. تم الاطلاع عليه في 12 أكتوبر 2016 .
  68. ↑ هاتشينسون، لي (2019). "نظرة أخيرة على الإنترنت باستخدام إنترنت إكسبلورر 6" . آرس تكنيكا . مؤرشف من الأصل بتاريخ 12 أكتوبر 2016. تم الاطلاع عليه بتاريخ 12 أكتوبر 2016 .
  69. ↑ "نوافذ منبثقة باستخدام CSS فقط" . meyerweb.com. مؤرشف من الأصل بتاريخ 9 ديسمبر 2009. تم الاطلاع عليه بتاريخ 19 نوفمبر 2009 .
  70. ↑ تاب أتكينز جونيور. "قاعدة تطبيق CSS" . جيت هاب. مؤرشف من الأصل بتاريخ 22-02-2016 . تم الاطلاع عليه بتاريخ 27-02-2016 .
  71. ↑ "لماذا تخليت عن @apply — إكمال علامة التبويب" .
  72. ↑ سيدرهولم، دان؛ إيثان ماركوت (2009). تصميم مواقع ويب متين باستخدام CSS: تصميم مواقع ويب أكثر متانة . نيو رايدرز. ص 114. ISBN  978-0-321-64338-4أُرشف من الأصل في 20 ديسمبر 2012. تم الاطلاع عليه في 19 يونيو 2010 .
  73. ↑ أنتي، هيلجا. "OOCSS، ACSS، BEM، SMACSS: ما هي؟ وماذا أستخدم؟" . clubmate.fi . هيلجا. مؤرشف من الأصل في 2 يونيو 2015. تم الاطلاع عليه في 2 يونيو 2015 .

للمزيد من القراءة