منهجية BEM لتسمية محددات CSS

هل سبق لك قراءة ملف CSS لتجد في أسماء المحددات (Selectors) خليطاً من الشرطات العلوية ”–“ والسفلية ”__“؟

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

منهجية BEM لتسمية محددات CSS

أكمل القراءة

تخصيص صفحة تسجيل دخول ووردبريس

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

login

أكمل القراءة

حان الوقت لتبدأ باستخدام وحدة القياس REM

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

حان الوقت لتبدأ باستخدام وحدة القياس REM

أكمل القراءة

علامات تبويب باستخدام CSS3

تعتبر علامات التبويب (Tabs) من العناصر الأساسية في واجهات الاستخدام. و قد كان إنشاؤها في صفحات الويب، حتى وقت قريب، يعتمد على وجود JavaScript. لكن أنصار قابلية الوصول (Accessibility) يرفضون الاعتماد على JavaScript مهما كان بسيطاً (ولديهم أسباب مقنعة جداً لذلك)، وقد تمّ إيجاد حلول لهذا، لكن هذه الحلول كانت تتضمن دوماً التغاضي عن طريقة العمل المتعارف عليها لعلامات التبويب (كأن يتم عرض محتوى جميع التبويبات إذا لم تتوفر JavaScript).

لكن الآن أصبح بالإمكان إنشاء علامات تبويب دون أي اعتماد على JavaScript بفضل CSS3.

علامات تبويب باستخدام CSS3

أكمل القراءة

توسيط النص شاقولياً

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

لذا أحببت قبل أن أدخل في موضوع هذا الدرس، أن أبدأ باعتذار لمتابعينا (برغم قلتهم) لهذا الانخفاض في الأداء، ووعد بالعودة للمستوى المعهود وتحسينه في أقرب فرصة، نقدّر دعمكم، وتهمنا آراؤكم ومشاركاتكم.

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

أكمل القراءة

استخدم تويتر بوتستراب لمواقعك العربية

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

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

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

استخدم تويتر بوتستراب لمواقعك العربية

أكمل القراءة

إنشاء سكريبت لتمرير الصور باستخدام jQuery

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

إنشاء سكريبت لتمرير الصور باستخدام jQuery

أكمل القراءة

استخدامات متنوعة لظلال النصوص باستخدام CSS

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

استخدامات متنوعة لظلال النصوص باستخدام CSS

أكمل القراءة

حساب أولوية تطبيق محددات CSS

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

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

حساب وزن محددات CSS

أكمل القراءة