CSS / إستعلامات الوسائط
ما هي إستعلامات الوسائط
إستعلامات الوسائط ( Media Queries ) تتيح لك إمكانية تطبيق خصائص تصميم مختلفة بناءاً على أحجام الشاشات، نوعية الأجهزة التي يتم عرض الصفحة عليها (هاتف، حاسوب، تلفاز، طابعة) و غيرها.
في هذا الدرس سنشرح إستعلامات الوسائط الأكثر استخداماً و المدعومة من قبل جميع المتصفحات.
إستعلامات الوسائط مهمة جداً عند بناء تصاميم متجاوبة ( Responsive ) تظهر بشكل مناسب على مختلف أحجام الشاشات.
قواعد إستعلامات الوسائط
بدايةً، للبدء بالتعامل مع إستعلامات الوسائط نستخدم الكلمة المفتاحية
CSS-code-a
}
- @media - يجب وضعها في البداية للبدء باستخدام إستعلامات الوسائط.
- mediatypes - مكانها نضع كلمة مفتاحية أو أكثر تشير إلى نوع الوسائط مع الإشارة إلى أنه يجب وضع فاصلة بين كل كلمتين.
- expressions - مكانها يمكن وضع شرط أو أكثر يكون متوافق مع نوع الوسائط ليحدد متى سيتم تطبيق الخصائص.
- not - كلمة إختيارية يمكن وضعها لعدم تطبيق الخصائص في الحالة و الشرط الموضوعين.
- only - كلمة إختيارية يمكن وضعها لتطبيق الخصائص في الحالة و الشرط الموضوعين.
- CSS-code-a - مكانها يمكن وضع أي كود CSS ليتم تطبيقه في حال كان نوع الوسائط و الشرط الموضوع تم تحقيقهما.
أنواع إستعلامات الوسائط
نوع الوسائط ( Media Type ) يقصد به نوع الجهاز أو السبب الرئيسي الذي على أساسه سيتم تطبيق الخصائص. فيما يلي أهم أنواع إستعلامات الوسائط.
| النوع | إستخدامه |
|---|---|
| لتطبيق الخصائص مهما كان النوع و هذه القيمة الإفتراضية. | |
| لتطبيق الخصائص فقط في حال إستعراض الصفحة على شاشة سواء حاسوب، هاتف، كمبيوتر، تلفاز. | |
| لتطبيق الخصائص في حال طباعة الصفحة فقط. |
في المثال التالي جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.
المثال الأول
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width: 400px) {
p {
color: red;
}
}
</style>
</head>
<body>
<p>Default color is black.</p>
<p>If max-width is 400px, the red color will be applied.</p>
<p>Resize the screen to see the difference.</p>
</body>
</html>إستعلامات الوسائط يجب تعريفها في الأخير بعد تعريف الخصائص الأصلية و إلا فإن المتصفح سيتجاهلها في حال حدوث تعارض.
في المثال التالي جعلنا لون النص الأساسي رمادي، ثم جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.
المثال الثاني
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: gray;
}
@media screen and (max-width: 400px) {
p {
color: red;
}
}
</style>
</head>
<body>
<p>Initial color is gray.</p>
<p>If max-width is 400px, the red color will be applied.</p>
<p>Resize the screen to see the difference.</p>
</body>
</html>في حال وضعت إستعلامات الوسائط في البداية و لم تستخدم الكلمة
هنا قمنا بوضع اللون الرمادي كلون أساسي بعد تحديد اللون بواسطة إستعلامات الوسائط مما يعني أن اللون الرمادي هو اللون الذي سيتم إعتماده في كل الحالات.
المثال الثالث
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width: 400px) {
p {
color: red;
}
}
p {
color: gray;
}
</style>
</head>
<body>
<p>Logical order of using media query is wrong!</p>
<p>The red color will never applied.</p>
</body>
</html>في المثال التالي جعلنا لون النص رمادي و لكنه يصبح أحمر في حال كان سيتم طباعة محتوى الصفحة على ورقة.
المثال الرابع
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: gray;
}
@media print {
p {
color: red;
}
}
</style>
</head>
<body>
<p>Text color is gray. However, if you try to print the page it will change to red.</p>
<button onclick="window.print()">Print Page</button>
</body>
</html>في المثال التالي حددنا أن لون النص هو بني في حال استعراض الصفحة على شاشة أو على آلة طباعة.
المثال الخامس
<!DOCTYPE html>
<html>
<head>
<style>
@media screen, print {
p {
color: brown;
}
}
</style>
</head>
<body>
<p>Text color is brown on both screens and printers.</p>
<button onclick="window.print()">Print Page</button>
</body>
</html>في المثال السابق كان يمكننا استخدام الكلمة
المثال التالي هو نفسه المثال السابق مع استخدام الكلمة
المثال السادس
<!DOCTYPE html>
<html>
<head>
<style>
@media screen, print {
p {
color: brown;
}
}
</style>
</head>
<body>
<p>Text color is brown on both screens and printers.</p>
<button onclick="window.print()">Print Page</button>
</body>
</html>في المثال التالي حددنا أن لون النص هو بني في كل الحالات ما عدا إن تم طباعته.
المثال السابع
<!DOCTYPE html>
<html>
<head>
<style>
@media not print {
p {
color: brown;
}
}
</style>
</head>
<body>
<p>Text color is brown in all cases except when print the page.</p>
<button onclick="window.print()">Print Page</button>
</body>
</html>شروط إستعلامات الوسائط
شروط إستعلامات الوسائط مرنة جداً حيث يمكنك وضع أكثر من شرط و يكفي أن يتحقق أحدها لكي يتم تطبيق الخصائص على العناصر، أو تضع عدة شروط و يجب أن تتحقق جميعها.
في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل فإنه سيتم تطبيق الخصائص.
المثال الأول
<!DOCTYPE html>
<html>
<head>
<style>
@media (min-width: 400px) {
body {
padding: 20px
}
}
</style>
</head>
<body>
<p>If min-width is 400px, then 20px padding will be added to body from all sides.</p>
<p>Resize the screen to notice the padding change.</p>
</body>
</html>في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل و على الأكثر 1000 بكسل فإنه سيتم تطبيق الخصائص.
المثال الثاني
<!DOCTYPE html>
<html>
<head>
<style>
@media (min-width: 400px) and (max-width: 1000px) {
body {
padding: 20px;
}
}
</style>
</head>
<body>
<p>If width between 400px and 100px, then 20px padding will be added to body from all sides.</p>
<p>Resize the screen to notice the padding change.</p>
</body>
</html>في المثال التالي إذا كان حجم الشاشة ما بين 400 و 1000 بكسل فإنه سيتم تطبيق الخصائص.
المثال الثالث
<!DOCTYPE html>
<html>
<head>
<style>
@media (400px <= width <= 1000px) {
body {
padding: 20px;
}
}
</style>
</head>
<body>
<p>If width between 400px and 100px, then 20px padding will be added to body from all sides.</p>
<p>Resize the screen to notice the padding change.</p>
</body>
</html>في المثال التالي، حجم الخط الإفتراضي سيتم اعتماده في حال لم يتحقق أي الشرط الموضوع في أي إستعلام موضوع بعده.
بالنسبة للإستعلامات فإنها موضوعة بترتيب منطقي بحيث يمكن أن يتحقق الشرط الأول أو الشرط الثاني.
المثال الرابع
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.8rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.2rem;
}
}
@media (min-width: 960px) {
h1 {
font-size: 2.6rem;
}
}
</style>
</head>
<body>
<h1>Initial Values And Multiple Media Query</h1>
<p>If no condition is true, 1.8rem will be used as font-size for H1 because this is the default value.</p>
<p>If min-width is 768px, then 2.2rem will be used font-size for H1.</p>
<p>If min-width is 960px, then 2.6rem will be used font-size for H1.</p>
<p>Resize the screen to notice the padding change.</p>
</body>
</html>في المثال التالي إذا كانت الشاشة معروضة بالوضع الأفقي فإنه سيتم عرض عبارة Landscape، أما إن كانت معروضة بالوضع العمودي فإنه سيتم عرض عبارة Portrait.
المثال الخامس
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: arial;
}
#orientation {
display: block;
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px 20px;
border-radius: 8px;
background: dodgerblue;
color: white;
}
@media (orientation: landscape) {
#orientation::before {
content: 'Landscape Mode';
}
}
@media (orientation: portrait) {
#orientation::before {
content: 'Portrait Mode';
}
}
</style>
</head>
<body>
<h1>Media Query Orientation</h1>
<p>The orientation note at the bottom will be
updated base on the screen orientation.</p>
<div id="orientation"></div>
</body>
</html>في المثال التالي إذا كان طول مستعرض الصفحة أياً كان نوعه (شاشة، آلة طباعة إلخ..) على الأقل 680 بكسل أو كانت الشاشة معروضة بالوضع العمودي فإنه سيتم تطبيق الخصائص.
المثال السادس
<!DOCTYPE html>
<html>
<head>
<style>
@media (min-height: 680px), screen and (orientation: portrait) {
body {
padding: 20px;
}
}
</style>
</head>
<body>
<h1>Media Queries</h1>
<p>If min-height is 680px or screen orientation is portrait,
then a 20px padding will be added to body from all sides.</p>
<p>Resize of flip the screen to notice the padding change.</p>
</body>
</html>