cssbit 2.0

بعض الإضافات التي تنصب في firefox لا يمكن الوصول إليها إلا بالذهاب الى tools -> add-on .. يمكن إضافتها الى شريط جوجل هذا الأخير يمكن تخصيصه وحذف الخدمات التي لا نستعملها منه ..

في الصورة التالية، وضعت ايقونة del.ici.ous و 3 إضافات أخرى هي:

1.  downthemall
2. unplug
3. css viewer

هكذا اصل إليها بسهولة وسرعة خصوصا الإضافة الأخيرة لأنها مفيدة جدا ..
بينما شريط جوجل وهو google toolbar for firefox اقتصرت فيه على pagerank و gmail ..

وجدت الطريقة صدفة عندما كنت اعبث بخصائص firefox .. وهي بالذهاب الى view-> toolbars-> custumise ومن ثم تنقل الايوقنة التي تريد الى شريط جوجل بطريقة Drag & drop

لاخفاء ملف css او بعض الاوامر من css عن المتصفحات القديمة يمكن استعمال الأمر import لجلب ملف css

@import url(structure.css)

احيانا عندما ننشئ عدة كلاسات، قد تحتوي على خصائص متشابهة كما في المثال التالي:

#view-right {
  margin: 0 5px;
  font: 1em tahoma;
  padding: 2em;
  float: right;
}

#view-left {
  margin: 0 5px 0 10px;
  font: 1.5em tahoma;
  float: left;
}

يمكن جمع الخصائص المشابهة بالطريقة التالية:

#view-right, #view-left {
  margin: 0 5px;
  font: 1em tahoma;
}

هذه هي الخصائص المتشابهة .. والباقي نكتبه هكذا:

#view-right { padding: 2em; float: right }
#view-left { margin-left: 10px; font-size: 1.5em; float: left }

هذه الطريقة مفيدة جدا، خصوصا لمن يستعمل css بكثرة وبشكل كثيف في ملفاته ..
مثال اخر:

h1 {margin: 0; padding: .3em }
h2  {margin: 0; padding: .3em }
ul {margin: 0; padding: .3em }

سنجمع h1 و h2 ليصبح الكود السابق:

h1, h2, ul {margin: 0; padding: .3em }

يمكن توفير القليل من الحجم اذا اختزلنا بعض الاوامر كما في المثال التالي:

margin: 0px;

تكتب بدون px او كالتالي:

margin: 0

و

padding: 0.5em

هكذا:

padding: .5em

هذه بعض التقنيات التي استعملها اثناء كتابة ملفات css .. هناك المزيد في مواضيع جديدة ..