العب بألوان CSS3

تقليديًا، الألوان المستخدمة في CSS تكون إما بتنسيق سداسي عشري أو بتنسيق rgb، مثل rgb(171,205,239).

يقدم CSS3 بعض الطرق الجديدة للتعامل مع اللون، مثل استخدام قنوات HSL (تدرج اللون والتشبع والضوء) وقنوات العتامة/ألفا. لسوء الحظ، حاليًا فقط Firefox 3+ وChrome 1.0+ وSafari 3+ وعدد قليل من المتصفحات المشتقة تدعمها بشكل كامل. ولكن يمكننا أن نبذل قصارى جهدنا، ولن يبدأ IE في دعم بعض خصائص CSS3 حتى إصدار Internet Explorer 9.

العتامة

هذه في الواقع خاصية قديمة، ومن المثير للدهشة أنها مدعومة بالإصدارات الحالية من IE - وإن كان ذلك بطريقة أكثر تعقيدًا.

العتامة تجعل كائن CSS بأكمله شفافًا، وسيتم توريث شفافية جميع العناصر الفرعية بشكل مناسب. بناء الجملة الرسمي هو كما يلي:

العتامة: [0-1 عشري]؛

لذا فإن إعداد العتامة: 0.5 سيجعل الكائن شفافًا بنسبة 50%. على الرغم من أن المتصفحات الأحدث تدعم هذه الميزة بشكل نشط، إلا أن المتصفحات القديمة لا تزال تتطلب بعض التعليمات البرمجية المخصصة، تمامًا مثل Internet Explorer.

حاليًا، بالنسبة لإصدارات Firefox الأقدم، نحتاج إلى استخدام البادئة -moz-، وبالنسبة لإصدارات Safari/Chrome الأقدم، نحتاج إلى استخدام البادئة -webkit-. بالنسبة للإصدارات الأقدم من Safari التي لا تزال تستخدم نواة KHTML بدلاً من نواة webkit، نحتاج إلى استخدام -khtml-. لذا، إذا أردنا دعم كل متصفح، فيجب أن يبدو الكود الخاص بنا كما يلي:

العتامة: 0.5؛
-عتامة moz: 0.5؛
-عتامة webkit: 0.5؛
-khtml-التعتيم: 0.5؛

اه، انتظر لحظة! ماذا تفعل مع آي إي؟ حسنًا، لا يدعم IE هذا على الإطلاق، ولكنه يستخدم مرشحًا خاصًا. الطريقة التقليدية قصيرة وموجزة:

مرشح: ألفا (التعتيم = 50)؛

يرجى ملاحظة أنه بالنسبة لـ IE نحتاج إلى استخدام الأعداد الصحيحة من 0 إلى 100، وليس الكسور العشرية مثل سمة العتامة. للأسف، يوفر Internet Explorer 8 طريقة جديدة للتعامل مع هذا الأمر. لا تحاول أن تتذكر هذا مثل الآخر، فهو طويل:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

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

ملحوظة: في الواقع، يدعم Safari سمة العتامة منذ الإصدار 1.2 (2004). لم يعد من الصعب العثور على Safari مع نواة KHTML في الواقع، لم يدعم Konqueror أبدًا سمة -khtml-opacity، لذا يرجى عدم استخدامها (لقد أخذت في الاعتبار سلامة النص الأصلي عند الترجمة، لذلك لم أقم بإجراء تصحيحات على الكود أعلاه). يدعم Opera عتامة CSS3 منذ الإصدار 9.0، بينما لم يدعم Firefox العتامة أصلاً حتى 3.5. يعد مرشح -ms- plus الخاص بـ IE8 حقًا عملاً عبقريًا لشركة Microsoft! ومع ذلك، يرجى ملاحظة أنه إذا كنت تريد استخدام عامل التصفية و-ms-filter في نفس الوقت، يرجى ملاحظة أن -ms-filter مكتوب أمام عامل التصفية. —— شنفي