الفرق بين CSS2 و CSS3

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

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

محددات CSS3 الجديدة

يقدم CSS3 عدة طرق جديدة لكتابة قواعد CSS باستخدام محددات CSS الجديدة ، بالإضافة إلى مُجمع جديد ، وبعض العناصر الزائفة الجديدة.

هناك ثلاثة محددات سمات جديدة:

بداية السمة تطابق تمامًا:
```
عنصر [foo ^ = "bar"]
```
يحتوي العنصر على سمة تسمى foo تبدأ بـ "bar" ، على سبيل المثال
نهاية السمة تطابق تمامًا:
```
العنصر [foo $ = "bar"]
```
يحتوي العنصر على سمة تسمى foo تنتهي بـ "bar" ، على سبيل المثال
تحتوي السمة على المطابقة:
```
عنصر [foo * = "شريط"]
```
يحتوي العنصر على ملف ينسب اتصل فو الذي يحتوي على السلسلة "شريط".

instagram viewer

تم تقديم 16 فصلاً زائفًا جديدًا:

:جذر
- العنصر الجذر للوثيقة.
: nth-child (n)
- استخدم هذا لمطابقة العناصر الفرعية تمامًا أو استخدم المتغيرات للحصول على تطابقات بديلة.
: nth-last-child (n)
- تطابق العناصر الفرعية بالضبط التي يتم عدها من آخر عنصر.
: nth-of-type (n)
- قم بمطابقة العناصر الشقيقة بنفس الاسم قبلها في شجرة المستند.
: nth-last-of-type (n)
- تطابق العناصر الشقيقة التي تحمل نفس الاسم من الأسفل.
:الطفل الأخير
- تطابق الماضي عنصر تابع من الوالد.
: الأول من نوعه
- تطابق أول عنصر شقيق من هذا النوع.
: الأخير من النوع
- تطابق آخر عنصر شقيق من هذا النوع.
:مجرد طفل
- تطابق العنصر الذي هو الوحيد التابع لوالده.
: فقط من النوع
- تطابق العنصر الوحيد من نوعه.
:فارغة
- تطابق العنصر الذي ليس له توابع (بما في ذلك العقد النصية).
:استهداف
- تطابق عنصرًا هو هدف URI المُحيل.
: ممكن
- تطابق العنصر عند تمكينه.
:معاق
- تطابق العنصر عند تعطيله.
:التحقق
- تطابق العنصر عند تحديده (زر الاختيار أو مربع الاختيار).
: ليس (ق)
- تطابق عندما لا يتطابق العنصر مع البسيط المحددات.

هناك مُجمع جديد:

عنصر أ ~ عنصر ب
- تطابق عندما يتبع elementB في مكان ما بعد العنصر A ، وليس بالضرورة على الفور.

خصائص جديدة

قدم CSS3 أيضًا العديد من خصائص CSS الجديدة. تنشئ العديد من هذه الخصائص أنماطًا مرئية من المحتمل أن ترتبط أكثر ببرنامج رسومات مثل محل تصوير. بعض هذه العناصر ، مثل border-radius أو box-shadow ، كانت موجودة منذ تقديم CSS3. البعض الآخر ، مثل flexbox أو حتى CSS الشبكة ، هي الأنماط الأحدث التي لا تزال تعتبر في الغالب إضافات CSS3.

في CSS3 ، لم يتغير نموذج الصندوق. ولكن هناك مجموعة من الخصائص الجديدة التي يمكن أن تساعدك على تصميم الخلفيات وحدود الصناديق الخاصة بك.

صور خلفية متعددة

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

خصائص نمط الخلفية الجديدة

هناك أيضًا بعض خصائص الخلفية الجديدة في CSS3:

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

التغييرات على خصائص نمط الخلفية الموجودة

هناك أيضًا بعض التغييرات في خصائص نمط الخلفية الحالية:

تكرار الخلفية
- هناك قيمتان جديدتان لهذه الخاصية - الفضاء و مستدير - كروي. تباعد الصورة المبلطة بشكل متساوٍ داخل المربع دون قصها. يعمل Round على تغيير حجم صورة الخلفية بحيث يتم تجانب عدد كامل من المرات في المربع.
مرفق الخلفية
- تمت إضافة قيمة جديدة "محلي" بحيث يتم تمرير الخلفية مع محتوى العنصر عندما يكون لهذا العنصر شريط تمرير.
معرفتي
- تضيف خاصية اختزال الخلفية الحجم وخصائص الأصل.

خصائص حدود CSS3

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

خصائص نمط الحدود الجديدة

هناك بعض خصائص الحدود الجديدة في CSS3:

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

خصائص CSS3 الإضافية المتعلقة بالحدود والخلفيات

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

جديد مربع الظل تضيف الخاصية الظلال إلى عناصر الصندوق.

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

حدد عدد الأعمدة وعرضها

هناك ثلاثة جديدة الخصائص تسمح لك بتحديد عدد الأعمدة وعرضها:

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

فجوات عمود CSS3 وقواعده

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

فجوة العمود
- يحدد عرض الفجوات بين الأعمدة.
لون قاعدة العمود
- يحدد لون القاعدة.
نمط قاعدة العمود
- يحدد نمط القاعدة (صلب ، منقط ، مزدوج ، إلخ).
عرض قاعدة العمود
- يحدد عرض القاعدة.
عمود القاعدة
- خاصية اختصار تحدد خصائص قاعدة الأعمدة الثلاثة في وقت واحد.

فواصل الأعمدة في CSS3 ، والأعمدة الممتدة ، وتعبئة الأعمدة

عمودي تستخدم الفواصل نفس خيارات CSS2 المستخدمة لتحديد الفواصل في المحتوى المقسم إلى صفحات ، ولكن مع ثلاث خصائص جديدة: فاصل من قبل, كسر بعد، و اقتحام الداخل.

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

يحدد ملء الأعمدة مقدار المحتوى في كل عمود. تحاول الأعمدة المتوازنة وضع نفس المقدار من المحتوى في كل عمود بينما يتدفق المحتوى تلقائيًا حتى يمتلئ العمود ثم ينتقل إلى العمود التالي.