مقدمة في أنواع الوسائط css
تتمثل إحدى أهم ميزات لغة CSS في أنه يمكننا تحديد أوراق أنماط منفصلة لأنواع وسائط مختلفة. هذه إحدى أفضل الطرق لإنشاء صفحات ويب ملائمة للطباعة - فقط سنقوم بتعيين ورقة أنماط مختلفة لنوع الوسائط "print" .
تم تصميم بعض خصائص CSS لوسائط معينة فقط. على سبيل المثال ، تنطبق الخاصية page-break-after على الوسائط المقسمة فقط. ومع ذلك ، هناك العديد من الخصائص التي يمكننا استخدامها لأنواع وسائط مختلفة ، ولكنها قد تتطلب قيمًا مختلفة لتلك الخاصية حسب نوع الوسائط.على سبيل المثال يمكننا استخدام الخاصية font-size لكل من وسائط الشاشة والطباعة ، ولكن ربما بقيم مختلفة.
نحتاج عادةً إلى خط أكبر على شاشة الكمبيوتر مقارنةً بالورق لقراءة أفضل ، كما تُعتبر خطوط sans-serif أسهل للقراءة على الشاشة ، بينما خطوط serif شائعة للطباعة. لذلك من الضروري مراعاة ذلك حسب نوع الوسائط التي سيتم عرض موقع الويب عليها.
إنشاء أوراق الأنماط المعتمدة على الوسائط #css#
هنالك ثلاث طرق شائعة لتحديد نوع الوسائط في اوراق الانماط في لغة CSS:
الطريقة الأولى : القاعدة @media
تُستخدم القاعدة @media لتحديد قواعد أنماط مختلفة لأنواع وسائط مختلفة في ورقة أنماط واحدة. عادة ما يتبعها قائمة مفصولة بفواصل لأنواع الوسائط وكتلة اكواد code block تحتوي على إعلانات CSS للوسائط المستهدفة.
في المثال أدناه سيقوم المتصفح بعرض محتوى العنصر body بخط من نوع Arial وبحجم 14 بكسل على الشاشة ، ولكن في حالة الطباعة سيكون بخط 12 نقطة من النوع Times. بينما ، سيتم تحديد قيمة الخاصية line-height على 1.2 لكل منهما.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>media types</title>
<style>
@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 20px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12pt;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
</style>
</head>
<body>
<h1> @media القاعدة</h1>
<p><strong>ملاحظة:</strong>إذا قمت بطباعة (أو معاينة قبل الطباعة) لهذه الصفحة ، ستظهر بشكل مختلف عما تظهر عليه على الشاشة.</p>
</body>
</html>
المخرجات
تنطبق قواعد النمط خارج قواعد @media على كافة أنواع الوسائط التي تنطبق عليها ورقة الأنماط
الطريقة الثانية : القاعدة @import
تعد القاعدة @import طريقة أخرى لتعيين معلومات النمط لوسائط معينة - ما علينا سوى تحديد أنواع الوسائط المفصولة بفاصلة بعد عنوان URL الخاص بأوراق الأنماط المستوردة.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>@import rule</title>
<style>
@import url("examples/css/screen.css") screen;
@import url("examples/css/print.css") print;
body {
direction:rtl;
background: #f6f6f6;
line-height: 1.2;
}
</style>
</head>
<body>
<h1>أوراق الأنماط المعتمدة على الوسائط باستخدام قواعد @import </h1>
<p>إذا قمنا بطباعة (أو معاينة قبل الطباعة) لهذه الصفحة ، ستظهر بشكل مختلف عما تظهر عليه على الشاشة. نظرًا لاستخدام أوراق أنماط مختلفة لأنواع وسائط مختلفة ، مثل screen.css لشاشة الكمبيوتر و print.css لوسائط الطباعة. </p>
</body>
</html>
المخرجات
يوجه نوع الوسائط print في بيان @import متصفح الويب إلى تحميل ورقة أنماط خارجية (print.css) واستخدام أنماطها فقط لوسائط الطباعة (عند طباعة صفحة الويب)
الطريقة الثالثة : إستخدام العنصر <link>
تُستخدم السمة media في عنصر
<link> لتحديد الوسائط المستهدفة لورقة أنماط خارجية داخل صفحة HTML.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>media attribute</title>
<link rel="stylesheet" media="all" href="examples/css/common.css">
<link rel="stylesheet" media="screen" href="examples/css/screen.css">
<link rel="stylesheet" media="print" href="examples/css/print.css">
</head>
<body>
<h1>أوراق الأنماط المعتمدة على الوسائط باستخدام العنصر <code><link></code></h1>
<p>إذا قمنا بطباعة (أو معاينة قبل الطباعة) لهذه الصفحة ، ستظهر بشكل مختلف عما تظهر عليه على الشاشة. لأنه تم استخدام أوراق أنماط مختلفة لأنواع وسائط مختلفة ، مثل screen.css لشاشة الكمبيوتر و print.css لوسائط الطباعة.</p>
</body>
</html>
المخرجات
في المثال أعلاه ، ترشد السمة media متصفح الويب لتحميل ورقة أنماط خارجية "screen.css" واستخدام أنماطها للشاشة فقط وتحميل ورقة الأنماط "print.css" لغرض الطباعة.
يمكننا أيضًا تحديد أنواع وسائط متعددة (كل منها مفصول بفاصلة) ، على سبيل المثال media="screen, print" بالإضافة إلى إستعلام الوسائط للسمة media لعنصر <link>.
أنواع الوسائط المختلفة # css #
يعرض الجدول التالي أنواع الوسائط المختلفة التي يمكن استخدامها لاستهداف أنواع مختلفة من الأجهزة مثل الطابعات والأجهزة المحمولة وشاشات الكمبيوتر وما إلى ذلك.
| نوع الوسائط | الوصف |
|---|---|
all |
تستخدم لجميع أجهزة نوع الوسائط. |
aural |
تستخدم للقارئ الآلي |
braille |
تستخدم لأجهزة برايل عن طريق اللمس. |
embossed |
تستخدم لطابعات برايل المقسمة إلى صفحات. |
handheld |
تستخدم للأجهزة الصغيرة أو المحمولة - عادةً الأجهزة ذات الشاشات الصغيرة مثل الهواتف المحمولة أو أجهزة المساعد الرقمي الشخصي. |
print |
تستخدم للطابعات. |
projection |
تستخدم للعروض التقديمية على أجهزة العرض projectors. |
screen |
تستخدم في الأصل لشاشات الكمبيوتر الملونة. |
tty |
تُستخدم للوسائط التي تستخدم شبكة أحرف ذات درجة ثابتة - مثل الطابعات النقطية أو الأجهزة المحمولة ذات إمكانات العرض المحدودة. |
tv |
تستخدم للأجهزة التلفزيون ذات الدقة المنخفضة و الشاشات محدودة التمرير |
إستعلام الوسائط Media Queries
تتيح لنا استعلامات الوسائط تخصيص عرض صفحات الويب الخاصة بنا لمجموعة محددة من الأجهزة مثل الهواتف المحمولة والأجهزة اللوحية وأجهزة سطح المكتب وما إلى ذلك دون أي تغيير في عناصر HTML. يتكون استعلام الوسائط من نوع الوسائط وصفر او اكثر من تعبيرات تتطابق مع نوع وشروط ميزات وسائط معينة مثل عرض الجهاز أو دقة الشاشة.
نظرًا لأن الاستعلام عن الوسائط هو تعبير منطقي ، فيمكن حله إما إلى صواب أو خطأ. ستكون نتيجة الاستعلام صحيحة إذا كان نوع الوسائط المحدد في استعلام الوسائط يطابق نوع الجهاز الذي يتم عرض صفحة الويب عليه ، بالإضافة إلى تلبية جميع التعبيرات في استعلام الوسائط. عندما يكون استعلام الوسائط صحيحًا ، يتم تطبيق ورقة الأنماط أو قواعد النمط ذات الصلة على الجهاز الهدف. فيما يلي مثال بسيط للاستعلام عن الوسائط .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<style>
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
body{
background: #7ce7e1;
}
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
body{
background: #ffd280;
}
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
body{
background: #9ddfbb;
}
}
/* tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
body{
background: #ffb497;
}
}
/* tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
body{
background: #f0e68c;
}
}
/* tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
body{
background: #d6b3f4;
}
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
body{
background: #d8ff9d;
}
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
body{
background: #ffc0cb;
}
}
</style>
</head>
<body>
<h1>CSS Media Queries</h1>
<p>سيتغير لون الخلفية للصفحة باختلاف الوسائط أو الأجهزة.</p>
<p> <strong> نصيحة: </strong> يمكنك أيضًا مشاهدة تأثير الاستعلام عن الوسائط هذا عن طريق فتح تغيير حجم نافذة المتصفح. </p>
</body>
</html>
المخرجات
تعد الاستعلامات عن الوسائط طريقة ممتازة لإنشاء تخطيطات سريعة الاستجابة. باستخدام استعلامات الوسائط ، يمكننا تخصيص موقع الويب الخاص بنا بشكل مختلف للمستخدمين الذين يتصفحون على أجهزة مثل الهواتف الذكية أو الأجهزة اللوحية دون تغيير المحتوى الفعلي للصفحة.
تغيير عرض العنصر بناءً على حجم الشاشة css
يمكننا استخدام الاستعلام عن الوسائط في لغة CSS لتغيير عرض صفحة الويب والعناصر ذات الصلة لتقديم أفضل تجربة مشاهدة للمستخدم على أجهزة مختلفة.
في المثال التالي سنقوم بتغيير عرض العنصر ذو السمة class="container" تلقائيًا بناءً على حجم الشاشة أو منفذ العرض. على سبيل المثال ، إذا كان عرض منفذ العرض أقل من 768 بكسل ، فسيغطي 100٪ من عرض منفذ العرض ، وإذا كان أكبر من 768 بكسل ولكنه أقل من 1024 بكسل ، فسيكون عرضه 750 بكسل ، وهكذا.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تغيير عرض العنصر بناءً على حجم الشاشة
</title>
<style>
.container {
margin: 0 auto;
background: #ceceff;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 5px 10px;
}
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 5px 10px;
}
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 5px 15px;
}
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 5px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
</body>
</html>
المخرجات
يمكننا استخدام الخاصية box-sizing على العناصر لإنشاء تخطيطات أكثر سهولة ومرونة بجهد أقل.
تغيير تخطيط الصفحة بناءً على حجم الشاشة css
يمكننا أيضًا استخدام الاستعلام عن الوسائط في لغة CSS لجعل تخطيط موقع الويب متعدد الأعمدة أكثر قابلية للتكيف واستجابة للأجهزة من خلال القليل من التخصيص.
في المثال التالي سننشئ مخطط لصفحة الويب من عمودين إذا كان حجم منفذ العرض أكبر من أو يساوي 768 بكسل ، ولكن إذا كان أقل من ذلك ، فسيتم إنشاء مخطط من عمود واحد فقط.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تغيير تخطيط الصفحة بناءً على حجم الشاشة
</title>
<style>
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #97ddff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</div>
<div class="column">
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
</div>
</body>
</html>
المخرجات
