الفرق بين CSS2 و CSS3

فهم التغييرات الرئيسية في CSS3

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

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

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

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

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

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

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

16 فصول زائفة جديدة:

• :جذر
  • العنصر الجذر للوثيقة. في HTML هذا هو دائما.
• : نطة الطفل (ن)
  • استخدم هذا لمطابقة العناصر الفرعية الدقيقة أو استخدام المتغيرات للحصول على التطابقات المتناوبة.
• : نطة الأخير للطفل (ن)
  • تطابق العناصر الفرعية الدقيقة التي تم عدها من العنصر الأخير.
• : نطة من نوع (ن)
  • قم بمطابقة عناصر الشقيقة بنفس الاسم قبلها في شجرة الوثيقة.
• : نطة-الأخير من نوع (ن)
  • قم بمطابقة عناصر الأخوة التي تحمل نفس الاسم العد من الأسفل.
• :الطفل الأخير
  • تطابق العنصر الفرعي الأخير للوالد.
• : الأولى من نوع
  • تطابق عنصر الأخت الأول من هذا النوع.
• : آخر من نوع
  • تطابق عنصر أخ آخر من هذا النوع.
• :مجرد طفل
  • تطابق العنصر الذي هو الطفل الوحيد من أصله.
• : فقط من نوع
  • تطابق العنصر الذي هو الوحيد من نوعه.
• :فارغة
  • تطابق العنصر الذي ليس له أطفال (بما في ذلك العقد النصية).
• :استهداف
  • تطابق عنصر يمثل هدف URI المُحيل.
• : تمكين
  • مطابقة العنصر عند تمكينه.
• :معاق
  • تطابق العنصر عند تعطيله.
• :التحقق
  • قم بمطابقة العنصر عند تحديده (زر الاختيار أو خانة الاختيار).

• : لا (ق)
  • تطابق عندما لا يتطابق العنصر مع المحدد البسيط.

واحد جديد combinator:

• elementA ~ elementB
  • تطابق عندما يتبع elementB في مكان ما بعد elementA ، وليس بالضرورة فورًا.

خصائص جديدة

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

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

خلفية متعددة أنا السحراء

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

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

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

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

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

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

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

خصائص الحدود CSS3

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

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

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

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

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

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

هناك أيضًا خاصية box-shadow يمكن استخدامها لإضافة ظلال إلى عناصر الصندوق.

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

أعمدة CSS3 - تحديد عدد وأعمدة الأعمدة

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

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

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

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

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

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

تستخدم فواصل الأعمدة نفس خيارات CSS2 المستخدمة لتعريف الفواصل في محتوى مقسم إلى صفحات ، ولكن مع ثلاث خصائص جديدة: break-before و break-after و break-inside .

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

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

المزيد من الميزات في CSS3 التي تم تضمينها في CSS2

هناك الكثير من الميزات الإضافية في CSS3 غير الموجودة في CSS2 ، بما في ذلك:

• وحدة تخطيط قالب CSS ووحدة وضع الشبكة CSS3 : إنشاء شبكات باستخدام CSS.
• CSS3 نص الوحدة : نص المخطط التفصيلي وحتى إنشاء الظلال المسقطة مع CSS.
• وحدة ألوان CSS3 : الآن مع التعتيم.
• تغييرات على طراز الصندوق : بما في ذلك خاصية marquee التي تعمل مثل علامة IE.
• وحدة واجهة المستخدم CSS3 : إعطائك مؤشرات جديدة ، وردود فعل على الإجراءات ، والحقول المطلوبة ، وحتى تغيير حجم العناصر .
• استعلامات الوسائط : تسمح لك استعلامات الوسائط بمزيد من المرونة عند تحديد كيفية استخدام ورقة أنماط. على سبيل المثال ، يمكنك تحديد ورقة أنماط فقط للأجهزة المحمولة التي يزيد عرضها عن 20 ميكرومتر.
• وحدة Rubi CSS3 : توفر الدعم للغات التي تستخدم روبي نصي للتعليق على المستندات.
• الوحدة النمطية لـ CSS3 Paged Media : للحصول على مزيد من الدعم للوسائط المقسمة إلى صفحات (الورق ، الورق الشفاف ، إلخ).
• المحتوى الذي تم إنشاؤه : L يتم تشغيل رؤوس الصفحات وتذييلاتها والحواشي السفلية وغير ذلك من المحتويات التي يتم إنشاؤها برمجيًا ، خاصةً بالنسبة للوسائط المقسمة إلى صفحات.
• وحدة الكلام CSS3 : التغييرات في CSS السمعي.