حفظ رمز ترميز CSS3 الخاص بك
يمكن لمطوري الويب توفير الكثير من الوقت باستخدام بناء جملة CSS3 الأكثر تطوراً. يتوقع المستخدمون الذين يزورون صفحتك أسرع وقت تحميل ممكن - مما يجعل من مسؤوليتك إبقاء أحجام الملفات منخفضة. هناك الكثير من الحيل المختصرة باستخدام CSS وخاصةً في طراز CSS3 الجديد.
لقد وضعت بعض هذه الأفكار في الدليل أدناه. يجب أن نتطرق أيضًا إلى مجالات أخرى مثل تصغير رمز CSS الخاص بك. هناك أدوات في المتصفح متاحة لمساعدة المطورين في عملية التصميم ولكنك ترغب في الجمع بين الرموز المختصرة مع تقليل حجم الملف لتبسيط عملية العرض في موقع الويب الخاص بك.
نصائح أساسية عن التنسيق
قبل أن نقفز إلى بناء جملة CSS الفعلي ، أريد أن أتناول موضوع ماذا لكتابة CSS الخاص بك. إذا كنت معتادًا على تصميم الويب ، فمن المحتمل أن تكون قد شاهدت ورقة أنماط من قبل ، وربما أكثر من مرة. الجزء الأول من كل أمر يسمى منتخب. يستهدف هذا نوع العنصر الذي سيحصل على الأنماط المضافة داخل الأقواس المتعرجة ، والمعروفة أيضًا باسم الخصائص.
مضمنة المستوى
مع الأنماط المضمّنة ، تتم كتابة كل خاصية واحدة تلو الأخرى بمسافات فقط للفصل بينها. من الأفضل تطبيق هذه الطريقة على محددات حيث تحتاج فقط إلى بعض الخصائص. سيوفر لك مساحة على الصفحة وسيكون التمرير خلال ورقة الأنماط الخاصة بك أسرع بكثير. في حالة عدم مواجهتك مطلقًا لـ CSS المضمنة من قبل ، أضفت مثالًا صغيرًا أدناه لاستهداف روابط ربط HTML.
color: # 648cc8؛ وزن الخط: غامق ؛ a: hover color: # 739cda؛ زخرفة النص: لا شيء ؛ a.alt color: # bd4949!
كتلة المستوى
من ناحية أخرى ، يتم إدخال خصائص نمط البلوك في سطر واحد لكل زوج من المفاتيح / القيمة وغالبًا ما تكون المسافة البادئة للتحرير الأسرع عند مسح الرمز. حوالي 99٪ من أوراق الأنظف التي أستخدمها في هذا التنسيق ، وقد أصبح معيارًا صناعيًا للعديد من المصممين. إذا كان المحدد الخاص بك يستخدم أكثر من 6 أو 7 خصائص ، فهذا هو أفضل تنسيق للتطبيق.
عندما تأخذ في الاعتبار العديد من خصائص CSS3 الجديدة ، فإنك تدرك أيضًا مدى سرعة ملء أوراق الأنماط الخاصة بك. تدعم العديد من هذه الخصائص نسخًا خاصة بالمتصفح والتي تتطلب إدخالات رمز مكررة تقريبًا (مثل نصف قطر الحدود). يمكنك التحقق من مثالي على خاصية كتلة تم تعيينها أدناه مستهدفة div wrapper sample.
.التفاف عرض: كتلة ؛ الحشو: 6px 10px ؛ الخلفية: #FFF؛ دائرة نصف قطرها الحدود: 4px ؛ -Moz-border-radius: 4px ؛ -Wkkit-border-radius: 4px؛ نصف قطرها: 4px ؛
لا توجد طريقة لكتابة CSS أفضل من الأخرى. في النهاية ، يعد اختيارك مطورًا يناسب الأسلوب الذي تفضله ، وحتى هذا وفقًا للمشروع الذي تعمل عليه. من الشائع العثور على CSS حيث يجتمع المصممون معًا! أنا شخصيا أشعر بذلك “قيد العمل” تميل إلى أن تكون أسهل مع أنماط الكتل لأنني أفحص باستمرار ورقة الأنماط لإجراء تعديلات أو إضافات. ولكن بالنسبة للنطاقات الكثيرة الحركة ، فإن تصغير ملف CSS الخاص بك هو أفضل طريقة مطلقة.
الحفاظ عليها ضئيلة
من خلال استخدام العديد من الرموز القصيرة المتوفرة في CSS3 ، يمكنك توفير الكثير من وقت التطوير. سيصبح تحرير عناصر HTML أسهل كثيرًا عندما تفهم لغة توفير الوقت هذه. بالإضافة إلى ذلك ، سوف يظهر الرمز الخاص بك بشكل أكثر سهولة ويسهل النظر إليه.
الجانب السلبي الوحيد هو أنه ليس كل المتصفحات تدعم هذه الخصائص بشكل كامل. توجد حلول للعديد من المشكلات الموجودة مثل Internet Explorer و Netscape. لحسن الحظ ، يتقدم الويب دائمًا للأمام ومع نمو شعبية CSS3 ، سنشهد بلا شك نمواً في توافق المتصفح أيضًا.
RGBa لون الشفافية / التعتيم
RGBavalue الجديد ليس بالضبط CSS3 خاصية, لكن شفافية ألفا تخص CSS3 فقط. بدلاً من القيم المشتركة "Red Green Blue" التي تمررها للون ، يمكنك الآن تتضمن الخيار الرابع لشفافية الألوان. لهذا السبب ، تتم مطوري الويب باستخدام ملفات PNG شفافة بالكامل تقريبًا.
يتطلب بناء الجملة الأساسي قيمة من 0-255 في فتحات الثلاثة (3) الأولى و 0-1.0 في موضع ألفا. نطاق اللون محدد لمقدار كل صبغة (RGB) مرئيًا مع عدم وجود 0 و 255 ممتلئ.
/ ** بناء الجملة ** / الخلفية: rgba (value_name ، value_name ، value_name ، value_name ، opacity_value) ؛ / ** example ** / div background: rgba (255، 255، 255، 0.3)؛
التوافق عبر المستعرض
خاصية أخرى غموض يمكن استخدامها في بعض الظروف. ومع ذلك ، سيؤثر هذا على عنصر HTML بأكمله والمحتوى الداخلي ، وليس فقط الخلفية كما رأيت في مثالي.
لسوء الحظ ، لا يدعم Internet Explorer قيمة ألوان RGBa حتى الآن. يجب عليك عمومًا تضمين خاصية احتياطية مع عتامة كاملة لهذه المتصفحات الأقل مستوىًا. قمت بإعداد هذا بنفس القيم مع استبعاد الرابع (العتامة). سيبدو شيء من هذا القبيل rgba (255 ، 255 ، 255)
بالإضافة إلى ذلك ، يمكن التعامل مع Internet Explorer بأمان أكثر قليلاً من خلال الشروط الشرطية. يمكنك بالفعل التحقق مما إذا كان المستعرض يقوم بتشغيل IE وعرض عامل تصفية Microsoft CSS خاص في الأمر. لقد أوضحت ذلك في مثالي أدناه (لاحظ أن هذا سيظهر في مكان ما في ملف HTML الخاص بك):
CSS3 دائرة نصف قطرها الحدود
لقد قرأت بعض مؤشرات ترابط المنتدى المحيرة حول إنشاء حدود مستديرة مع CSS3 - ليس كثيرًا على جانب الطريقة التي يتم بها ذلك ، ولكن مع دعم المستعرض الدقيق ، يسعى مطورو الويب إلى البحث عن رمز أسهل يسهل الوصول إليه ويعمل كما هو متوقع.
/ ** بناء الجملة ** / الحدود دائرة نصف قطرها: أعلى اليسار أعلى اليمين أسفل اليمين أسفل اليسار ؛
ال الحدود بين دائرة نصف قطرها تشترك الخاصية في بناء جملة مماثل لإنشاء حد قياسي ، إلا أننا في هذه الحالة نستهدف زوايا الصندوق. ستقبل هذه الخاصية فعليًا القيم من 1 إلى 4 وتستهدف كل منها إعدادًا مختلفًا من الزوايا.
- 1 القيمة: يتم تقريب جميع الزوايا الأربعة إلى نفس القيمة
- 2 القيم: القيمة الأولى تنطبق على
أعلى اليساروأسفل اليمينفي حين أن القيمة الثانية يضربفوق على اليمينوأسفل اليسار - 3 قيم: أولا ينطبق على
أعلى اليسارالزاوية ، والثاني على حد سواءأسفل اليساروفوق على اليمينبينما يتم تطبيق القيمة الثالثة والأخيرة علىأسفل اليمين - 4 قيم: تستهدف جميع القيم الأربعة الزوايا بالترتيب التالي: أعلى اليسار ، أعلى اليمين ، أسفل اليمين ، أسفل اليسار
/ ** example ** / div border-radius: 4px 4px 8px 4px؛ div border-radius: 4px 4px 8px؛
لذلك في الكود أعلاه نستخدمه الحدود بين دائرة نصف قطرها لتطبيق 4px تقريب تأثير على كل شيء ما عدا أسفل اليمين الحدود التي تحصل على منحنى 8px السلس. إذا لاحظت ذلك ، فسيطبق كلا هذين الكودين بالفعل نفس تأثير النمط.
التوافق عبر المستعرض
الآن المشكلة الرئيسية هي ذلك الحدود بين دائرة نصف قطرها معتمد فقط في عدد قليل من المتصفحات. أضاف Internet Explorer 9 مؤخرًا دعمًا كبيرًا وسيعرض Opera هذا أيضًا. ومع ذلك أوبرا خلقت الملكية الخاصة بها مع -س الحدود بين دائرة نصف قطرها استهداف محرك متصفح معين. بالإضافة إلى -MOZ الحدود نصف قطرها يدعمه برنامج Firefox / Gecko و -بكت الحدود نصف قطرها لجوجل كروم / سفاري.
يمثل الرمز أدناه مثالًا على قالب عاري الخاص بي لإنشاء زوايا مستديرة مع أكبر دعم مستعرض عالمي.
div border-radius: 4px 4px 8px 4px؛ -Wkkit-border-radius: 4px 4px 8px 4px ؛؛ -Moz-border-radius: 4px 4px 8px 4px ؛ دائرة نصف قطرها: 4px 4px 8px 4px ؛
يتوهم قطرة الظل?
الجانب الآخر رائع حقا من CSS3 هو دعم ل صندوق و ظلال النص. كانت هذه مشكلة للمطورين في الماضي حيث كانت صور الخلفية هي الخيار الواقعي الوحيد. يتبع بناء الجملة هذا دورًا مختصرًا أسهل بكثير من الخصائص الأخرى التي قمنا بتغطيتها. من الصعب أن تتذكر الترتيب الصحيح للقيم الأساسية في البداية - ولكن كلما زادت الممارسة ، كلما أصبحت أسهل.
لسوء الحظ ، يعد Internet Explorer مرة أخرى هو الخيار الغريب. يدعم كل مستعرض رئيسي آخر بما في ذلك Firefox و Google Chrome و Safari و Opera دعمًا كاملاً نص الظل خاصية. لقد حاول المطورون إنشاء دعم IE الخاص بهم ولكن ما زالوا محدودين للغاية. يتم كتابة بناء الجملة الأساسي كما يلي:
/ ** بناء الجملة ** / text-shadow: x-offset y-offset blur-radius color؛ / ** example ** / div text-shadow: 2px 2px 1px # 111؛
تخبر إزاحة X و Y المستعرض إلى أي مدى يجب أن يظهر الظل الأيمن. يمكنك استخدام القيم السلبية لوضع الظل أعلى وفوق اليسار ، على التوالي. ولكن هذا يؤتي ثماره محرجًا للغاية لذا أوصي بالأعداد الصحيحة الموجبة. كما يمكن استخدام قيمة نصف القطر الضبابية لتنعيم الحواف الصلبة ، إذا كان ظل النص غير طبيعي.
يبحث بناء الجملة هذا فقط في التدوين الأساسي عند إنشاء تأثير ظل إسقاط مفرد. لقد درس المصممون المتقدمون درجة عالية لإنشاء ظلال متعددة في وقت واحد! أشير إلى منشور المدونة الرائع هذا من الخلف في أبريل 2011 والذي يتناول تفاصيل كبيرة حول فرض الظلال النصية. إذا كان لديك متسع من الوقت ، فاستعرض المحتوى لمجرد الحصول على فكرة عن الميزات الأكثر تقدمًا ، وتأكد من وضع إشارة مرجعية عليه كمرجع مستقبلي!
التوافق عبر المستعرض
وأكبر مثبط نواجهه هو Internet Explorer. مرارًا وتكرارًا ، قامت شركة Microsoft بدفع محرك عرض المستعرض الخاص بها والذي أدى أداءً فرعيًا في أحسن الأحوال. الآن حتى مع اتخاذ CSS3 العهود في ظلال النص ، فإن IE لا يزال متأخراً. يوجد موقع ويب تجريبي رائع يمكنك من خلاله العثور على أمثلة التعليمات البرمجية والتعليقات الشرطية التقليدية لـ CSS.
كنت تبحث أساسًا لمعرفة ما إذا كان المستعرض الذي يشغله المستخدم يطابق أي إصدار من Internet Explorer 9 أو ما دونه. ثم باستخدام مرشحات MS ، يمكننا تطبيق ظل على أي عنصر نص (أعلاه ، نحن نستخدم فقرة).
تخفيف التحولات
CSS3 انتقال هو أهم العقارات في سوق التصميم منذ flapjacks الجدة! كان مصممو الويب يثيرون ضجة كبيرة حول انتقالات CSS الخالصة ، على الرغم من أن الدعم يقتصر بشكل أساسي على متصفحات Webkit. يمكنك بالطبع الاستفادة من الخصائص الثانوية لموزيلا وأوبرا وما شابه. ولكن تدوين الاختصار آسر حقًا ، خاصة إذا كنت ضد الرسوم المتحركة لـ JavaScript لأي سبب كان.
أولاً دعنا نلقي نظرة على خاصية الانتقال الأصلية. سيتطلب ذلك 4 قيم يمكنك تقسيمها أيضًا إلى عقارات بحد ذاتها. أنها تتوافق مع الانتقال خاصية(ما هو التأثير), المدة الزمنية(كم من الوقت لاستخراجه), توقيت وظيفة(التغيرات في السرعة على الرسوم المتحركة) ، و تأخير(عدد الثواني للانتظار قبل تنشيطها).
/ ** بناء الجملة ** / انتقال: مدة خاصية تأخير توقيت الوظيفة ؛ / ** example ** / img الانتقالية-property: opacity؛ مدة الانتقال: 2 ثانية ؛ انتقال توقيت وظيفة: سهولة في ؛ انتقال تأخير: 0.5 ثانية ؛
يجب أن تفهم حدسي الغرض لمعظم هذه الخصائص باستثناء ربما وظيفة التوقيت. على الرغم من كونها مربكة في البداية ، إلا أن هذه الخاصية تنعش انتقالك بشكل مختلف ، لذا سيبدأ التأثير أبطأ أو أبطأ أو شيء مشابه.
تحتوي W3 Schools على مستند وظيفة التوقيت عبر الإنترنت والذي يسرد جميع القيم الممكنة التي يمكنك تجربتها. أجد نفسي غوغلينغ دائمًا في هذه الأدلة ، ومع ذلك فإنهم يصنعون مثل هذه الإشارات المرجعية المفيدة.
التوافق عبر المستعرض
الآن لنجلب دعم المتصفح الكامل إلى اللعب. بشكل افتراضي ، تكون خاصية النقل هي فقط بدعم من أحدث إصدارات سفاري. بعد العديد من المستخدمين لا تزال تتطلب -بكت بادئة تنطبق أيضًا على Google Chrome ومحركات تقديم مماثلة. أدناه هو أ “الانتهاء” قالب كتلة التعليمات البرمجية أوصي بالحفظ والاستخدام إذا كنت بحاجة إلى دعم انتقالي من غالبية متصفحات الويب.
img الانتقالية: opacity 2s سهولة في 1 ثانية ؛ -webkit-trans: عتامة 2s سهولة في 1 ثانية ؛ / * chrome، safari، قطيع * / -moz-الانتقالية: التعتيم 2s سهولة في 1s؛ / * mozilla + gecko * / -o-trans: عتامة 2s سهولة في 1 ثانية ؛ / * opera * /
آثار النص السكتة الدماغية
هذه الخاصية ليست ضخمة ولن تجد العديد من مصممي الويب الذين يستخدمونها اليوم. ولكن يمكنك استخدامها النص السكتة الدماغية لبناء بعض الآثار أنيق حقا مع الخطوط الخاصة بك. تعد متصفحات Webkit مثل Safari و Chrome الداعمين الحقيقيين لهذه الخاصية حتى الآن. تواجه أوبرا وفايرفوكس صعوبة في تقديم كائنات نصية بنفس هذه الخطوط العريضة.
/ ** بناء الجملة ** / p -webkit-text-stroke: width colour؛ / ** example ** / p -webkit-text-stroke: 1px # 222؛
التوافق عبر المستعرض
إذا كنت تشعر بالحاجة إلى تأثيرات حد النص ، فيجب دائمًا تضمين لون احتياطي. يمكن لـ Mozilla و Opera الوصول ، ولكن ليس لدى مستخدمي Internet Explorer خيارات أخرى. للأسف ، هذه واحدة من أحدث خصائص CSS3 والتي لم تحصل على دعم كافٍ من مجتمع مطوري متصفح الويب. يجب أن تقضي بعض الوقت في التجول باستخدام أداة الويب الرائعة هذه المصممة خصيصًا لإنشاء حدود نصية CSS3 هذه.
مربع التحجيم
تمنحك خاصية تغيير حجم المربع مزيدًا من التحكم في إجمالي عرض / ارتفاع أي عنصر كتلة. بشكل افتراضي ، يمثل العرض / الارتفاع + الحد + الهامش + الحشو الحجم الإجمالي للمربع. ومع ذلك ، فإن استخدام المربع الحدودي على المحتوى الخاص بك يدفع كل الحشوة والهوامش نحو الداخل للحفاظ على العرض بالضبط نفس الشيء. لا يوجد سوى قيمتين لهذه الخاصية ، مع محتوى الصندوق كونه الافتراضي.
div عرض: 550 بكسل ؛ الحشو: 9px. التحجيم مربع: الحدود مربع. / * سيبقى العرض عند 550 بكسل * /
كما يمكنك أن تتخيل أن هذا سوف يكون مفيدًا في مرحلة ما خلال حياتك المهنية في CSS. قد يكون الحشو والهوامش بمثابة ألم حقيقي ، وعندما تضيف حدودًا تميل إلى فقدان بكسلات المسار.
التوافق عبر المستعرض
يدعم Opera و IE 8 هذه الخاصية الجديدة افتراضيًا. تعطل IE7 وتحت مع إعداد مربع المحتوى ما لم يستخدم الزوار وضع المراوغات. الإضافات الوحيدة التي يجب أن تعرفها عن محركات الويب المستعرضة ومحركات Mozilla التي تعمل على وجه التحديد.
div -webkit-box-sizing: border-box؛ / * Safari / Chrome * / -moz-box-sizing: border-box؛ / * Firefox * / box-sizing: border-box؛ / * Opera / IE8 + * /
نقية CSS3 الأعمدة
الأعمدة صعبة بعض الشيء مع CSS3 ولكن يمكن إنجازها باستخدام الحد الأدنى من الكود. الخصائص 2 التي تريد التركيز عليها هي العمود العد و العمود الفجوة. يشير العدد إلى إجمالي عدد الأعمدة التي ترغب في تطبيقها أثناء قيام الفجوة بإنشاء هامش بين كل عمود.
div # cols column-count: 3؛ فجوة العمود: 10 بكسل ؛
في المثال الخاص بي ، يمكننا رؤية معرّف #cols يُستخدم كحاوية. داخلنا نقسم div إلى 3 أعمدة مع فجوة 10px بين كل واحد. كذلك يمكنك تعيين عرض العمود الذي يستخدم لضبط العرض الإجمالي لكل عمود بدلاً من إدراج رقم ثابت.
التوافق عبر المستعرض
لن يتمكن أي شيء قبل IE8 من استخدام هذه الخاصية. ولكن كما رأينا في كل مثال ، تقدم Mozilla و Webkit حلولهما الخاصة لمتصفحات متعددة. إذا كنت بحاجة إلى قالب تحقق من رمز مثالي الصغير أدناه:
div # sidebar width: 210px؛ عدد الأعمدة: 3 ؛ -عمود العمود الفجوة: 7px ؛ -wkkit- العمود العد: 3 ؛ -wkkit-column-gap: 7px؛ عدد الأعمدة: 3 ؛ فجوة العمود: 7 بكسل ؛
مخصص @ الخط الوجه
يجب أن تكون قد سمعت عن الإثارة بخصوص الخطوط المخصصة CSS3. حسنًا باستخدام خاصية @ font-face ، يمكننا استيراد أنماط الخطوط الخارجية واستخدامها تمامًا مثل أي عائلة أخرى. بناء الجملة معقد إلى حد ما وسيكون عليك قضاء بعض الوقت في تصحيحه. كتلة ل @ الخط وجه يستخدم لتحديد اسم العائلة ، وبعد ذلك يمكنك استخدام هذا في حياتك خط العائلة الخصائص أينما!
@ font-face font-family: 'MyNewFont'؛ src: url ('New_Font.ttf') ، url ('New_Font.eot') ؛ / * Internet Explorer فقط * / هكذا ترى أعلاه أنا لا أستهدف أي نوع معين من أنواع الخطوط ، لكن بناء الجملة هو ما يجب أن يبرز. لاحظ أن برنامج Internet Explorer يدعم فقط .محكمة تكافؤ الفرص أنواع الخطوط ، في حين .الصناديق و .اللوبي هي خيارات شائعة للمتصفحات الأخرى. من المهم أيضًا ، أن تفهم أنه يمكنك تمرير عناوين URL للخطوط من روابط مباشرة ، أي. رابط ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf')؛
لا توجد مشكلة حقيقية عبر المستعرض مع هذا الإعداد حيث يمكن لجميع محركات التقديم تحليل أنواع ملفات الخطوط هذه. فقط تذكر أنه بالنسبة لدعم IE ، يجب عليك تضمين إصدار eot بالإضافة إلى نسختك الأصلية. أشعر أن مقالة مدارس W3 تحتوي على فهرس بأهم المعلومات التي يجب عليك مراجعتها.
تحويل إلى مصغرة المغلق
تتم مناقشة هذا الموضوع بشكل متكرر لأنه يخدم غرضًا مختلفًا لكل مشروع. من ناحية ، يقضي مطورو الويب الكثير من الوقت في كتابة أوراق الأنماط الخاصة بهم. لا توجد وسيلة لتشفير هذا النوع من بيانات النص الخفي وإخفائه عن التطفل في العيون. إذا كنت تحاول منع الآخرين من سرقة الشفرة بشكل صارخ ، فإن أفضل ما يمكنك فعله هو تجميع الأنماط وإزالة جميع فواصل الأسطر / المسافات.
هذه العملية يمكن أن توصف بأنها التصغير كودك بشكل عام ، يقوم المطورون بكتابة CSS بالصيغة القياسية ثم يزيلون كل المسافات البيضاء قبل التحميل على خادم الويب. ثم لديك نسخة محلية لتحريرها بسرعة مع توفير نسخة أصغر على المشروع المباشر. يمكن أن تكون هذه الطريقة مفيدة بشكل واضح لتقليل تحميل الصفحات جنبًا إلى جنب مع إبقاء مختطفي الشفرات في وضع حرج.
يحتوي الرابط الذي نشرته أعلاه المؤدي إلى Minify CSS على بعض مواد القراءة الرائعة حول هذا الموضوع. يوفر الموقع أيضًا أداة قائمة على المتصفح لإزالة مثل هذه المسافات البيضاء وإرجاع المفاتيح من التعليمات البرمجية الخاصة بك. CSS Compressor هو خيار آخر يحتوي على واجهة بسيطة يتم تشغيلها مباشرة داخل متصفح الويب الخاص بك. لقد سمعت أيضًا أشياء جيدة عن Clean CSS ، على الرغم من أنني لم أستخدم التطبيق أبدًا بنفسي.
روابط ذات علاقة
لإبقاءك تدفع إلى الأمام ، قدمت ستة روابط مفيدة من جميع أنحاء الويب. لا يشمل ذلك تدوين الاختصارات فحسب ، بل أيضًا أدلة مفيدة وبرامج تعليمية يمكن الوصول إليها عند ممارسة رمز CSS الجديد المختصر.
- دليل المبتدئين إلى CSS3
- المغلق دليل الاختزال
- هل تستخدم CSS3 بشكل مناسب?
- محتويات CSS ومخطط توافق المتصفح
- CSS3 + التحسين التدريجي = التصميم الذكي
- استكمال مؤشر خصائص CSS / CSS3
استنتاج
يتطلب الأمر الكثير من التفاني وممارسة كتابة كود CSS لبناء جدول زمني محدد يمكنك اتباعه لكل مشروع. يسعد معظم مصممي الويب باختيار مشاريع وأفكار جديدة ، لذلك ستجد بالتأكيد وقتًا لممارسة نصائح الترميز المفيدة. حاول نسخ ورقة مرجعية صغيرة لراحتك في حالة عدم العثور على أي أوراق غش أو أسوأ من ذلك أنك تفقد الاتصال بالإنترنت!
هل تعرف أي خصائص CSS3 مفيدة أخرى أو اختصارات؟ نود أن نسمع أفكارك وأفكارك في تعليقات المناقشة. يضغط مطورو الويب من أجل مزيد من التوحيد داخل W3C ومن الواضح أن عملية الانتقال أصبحت أسهل. يوفر CSS3 مزايا رائعة ، وإذا تمكنت من إتقان الترميز المختصر ، فذلك سيبقي أحجام الملفات منخفضة ويمنع النسخ المنسدلة من سرقة الكود.
