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

أفكار درسنا اليوم :

• مدخل لفوائد الـ css
• ما هي media وفيم تستعمل ؟
• أنواع media و طرق استعمالها .

1 – مدخل لفوائد الـ css :

تعتبر الـ css لغة برمجية المسؤولة عن تنسيق المحتوى ، حيث أننا لو قمنا بمقارنة بينها و بين html و javascript فنخرج بأن :

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

و هنا يمكن أن نعرف فوائد لغة css في :

• ظهور الموقع كما يريد المصمم و ليس كما يريد المتصفح .
• ملاءمة التصميم لكافة المتصفحات بحيث أنه لا يمكنك أن تلزم على زائر التقيد بنوع واحد من المتصفحات .
• جعل الموقع يتماشى مع مسلزمات الزائر ، مثلا ، لو كان جهاز الزائر لا يحتوي على خط معين ، يمكنك تفادي الأمر بجعل مجموعة من الخطوط متتالية ، فإن لم يجد أحدها في الجهاز انتقل للآخر و هكذا حتى تصل للخطوط التقليدية التي توجد حتى في الحواسيب القيدمةsans serif
• ملائمة التصميم لكافة الآلات : أجهزة ، جوالات ، شاشات تلفاز .. و غيرها ، حيث تجعل لكل جهاز تصميمه الخاص به .
• سهولة التعديل على التصميم لاحقا ، حيث لو كان موقعك يحتوي 100 صفحة ، كلها html فيمكنك التعديل عليها كلها دفعة واحدة بالتعديل على ملف css فقط .
• التحكم الجيد بالعناصر أكثر من html
• تخفيف الباندويث – bandwith – الخاص بالموقع و توفيره ليخف الضغط على الموقع ، حيث يتم تحميل ملف واحد فقط أول زيارة .
• فصل التصميم عن المحتوى البرمجي تماما ، ليسهل تطوير البرمجة لاحقا ، أو تغيير التصيم متى أردت بدون عناء .
• عدم تداخل اختلاف الترميزات المستعملة في الملفات مثل rss ، xml ، xhtml ، حيث يبقى ملف css منفرد و ثابت .

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

2 – ما هي media وفيم تستعمل ؟

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

مع تعدد هذه الوسائل كان لابد من إيجاد حلا لتوافق الموقع مع كل هذه الأجهزة و الآلات ، فكانت خاصية media سواء في html او xhtml ، كما يمكنني تحديدها في ملف css ..

فائدتها : توفر لي حق جعل لكل جهاز ملف css خاص به حتى يلائم عرضه و حالته ، يمكنني ان اترك الخيار افتراضيا ، و يمكنني ان اجعل للزائر حق التحكم و التغيير ، كما يمكنني ان اعطي لكل تصميم اسم معين .

3 – أنواع media و طرق استعمالها :

كلنا يعرف طريقة استدعاء أي ملف css في صفحة xhtml :

لكن ألم ينتبه أحدكم الى :

<link rel="stylesheet" type="text/css" href="base.css" media="screen" />

media="screen"

هي المسؤولة عن تحديد التصميم للجهاز ، و غالبنا يستعمل screen لانها تمثل شاشة الحاسوب ، لكننا لو أردنا أن نجعل ملفات أخرى لأجهزة أخرى يمكننا اضافة الملفات مع تحديد نوع الجهاز .
أمثلة :

<link rel="stylesheet" type="text/css" href="base.css" media="screen" />
<link rel="stylesheet" type="text/css" href="tv.css"  media="tv" />
<link rel="stylesheet" type="text/css" href="all.css" media="all" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

حيث كل نوع من media يمثل جهازا معينا ، إذا تم استدعاء الموقع منه ، سيتم استدعاء الملف تلقائيا من دون وضع جمل شرطية ولا اي شيء ،
هذه انواع الـ media الموجودة :

• all : تصلح لجميع الأجهزة – عامة .
• aural : خاصة بالأجهزة المسموعة .
• braille : خاصة بالاجهزة الملموسة .
• embossed : خاص بخاصية الطباعة في الأجهزة الملموسة .
• handheld : خاصة بالأجهزة المحمولة ذات شاشة صغيرة – pocket pc
• print : خاص بأجهزة الحواسيب عادية ، لكن في حالة الطباعة .
• projection : خاصة بأجهزة مثل الـ projecteur التي لها شاشات شفافة .
• screen : شاشة الحاسوب العادية .
• tty : وهي مختصر لأجهزة teletypes ، هذا النوع م نالأجهزة لا يفهم إلا البكسل ، فمن الأفضل تجنب em و باقي المقاييس في التصميم .
• tv : و هو التلفاز العادي ،

هذه هي القيم التي يأخذها media ، كما يمكنني أن أعمل للجهاز الواحد أكثر من ملف css ، واعطائه اسم معين يظهر في المتصفح و يقدر الزائر اختيار النموذج الذي يصلح له و يرتاح له ف القراءة و التصفح في موقعك ، مثال :

<link rel="stylesheet" type="text/css" href="style.css" media="screen"  title="chater"/>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"  title="Default"/>
<link rel="stylesheet" type="text/css" href="custom.css" media="screen"  title="Custom"/>

لاحظ أنها كلها screen ، يعني للحاسوب ، ولكنني عملت ثلاث نماذج يمكن للزائر اختيار ما أراد منها من المتصفح ،
و title : هو عناون الاستايل الذي سيظهر للزائر ، وهذه الصورة التي ستظهر له :

- كما يمكنني استدعاء هذه الملفات بطريقة أخرى و هي كالتالي :

@import url("screen.css") screen;

هذه الطريقة صالحة داخل ملفات css فقط ، و اذا أردت ادراجها في html لابد من ادخلها في وسم style :

<style type="text/css">
@import url("loudvoice.css") screen;
</style>

كلها حيث في الأول حددت اسم الملف ، ثم اتبعته بنوع الـ media .
في حالة كان نفس التصميم الذي اريده ان يظهر على الحاسوب هو نفسه الذي سيظهر على شاشة التلفاز – مثلا – ، وكان الترقيع سطر واحد او اكثر بقليل ، فلا داعي لعمل ملف ، و يمكن ادراجه في style ، هكذا :

<style type="text/css">
	@media tv {
	BODY { font-size: 12pt }
  }
</style>

حيث انني اخترت الـ media مباشرة و تحديد نوعها بعدها وهو tv .
أرجو أن يكون كل شيء واضح ،
و السلام عليكم ورحمة الله .