סיכום של כל הדרכים שבהן תכונות המדיה מאפשרות לך להגיב למכשירים ולהעדפות.
העיצוב עם יכולת התגובה לא מתאפשר ללא שאילתות מדיה. לפני שאילתות המדיה לא הייתה דרך לדעת באיזה סוג מכשיר אנשים משתמשים כדי לבקר באתר שלך. המעצבים היו צריכים להניח הנחות. הנחות אלה קודדו בעיצובים ברוחב קבוע או בפריסות נוזליות.
כל זה השתנה עם ההשקה של שאילתות מדיה. בפעם הראשונה מעצבים יכולים לפגוש אנשים באמצע הדרך. המעצבים יכולים לשנות את הפריסה שלהם כך שיתאימו למכשירים של אנשים.
חשוב לזכור: שאילתת מדיה מורכבת מסוג אופציונלי של מדיה ומתכונת חובה של מדיה. לא היה שינוי משמעותי בסוגי המדיה במשך השנים. עדיין יש רק ארבעה ערכים אפשריים:
@media all
@media screen
@media print
@media speech
מצד שני, תכונות המדיה התרחבו מאוד. המעצבים יכולים עכשיו לפגוש משתמשים מעבר לחצי, ולשנות את העיצובים כך שיתאימו להרבה יותר מגודל המסך.
מאפייני אזור התצוגה
עד כה, שאילתות המדיה הנפוצות ביותר באינטרנט הן אלו שעוסקות ברוחב של אזור התצוגה. אבל גם כאן אפשר לבחור. אפשר להשתמש בתכונת המדיה max-width
כדי להחיל סגנונות מתחת לרוחב מסוים. לחלופין, אפשר להשתמש בתכונת המדיה min-width
כדי להחיל סגנונות מעל רוחב מסוים.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
באופן אישי, אני אוהבת להשתמש ב-min-width
. אני מחיל סגנונות פריסה בדרך נוספת. אני מוסיף כללי פריסה חדשים לכל נקודת עצירה במקום לבטל כללים קודמים.
הגישה הנוספת הזו מתאימה גם לגובה. שימוש ב-min-height
יאפשר לך להוסיף כללים נוספים כשיהיו יותר אפשרויות לאזור התצוגה. לדוגמה, ייתכן שיש לך רכיב כותרת שברצונך לעגן לחלק העליון של חלון הדפדפן אם יש מספיק שטח אנכי.
@media (min-height: 30em) {
header {
position: fixed;
}
}
אבל אם רוצים, אפשר להשתמש בתכונת המדיה max-height
. כאן הכותרת מעוגנת כברירת מחדל, אבל הדביקות מוסרת אם אין מספיק שטח אנכי.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
הבחירה בין min-
לקידומות max-
לא חלה רק על width
ו-height
. תכונת המדיה aspect-ratio
מציעה את אותה אפשרות. יש גם גרסה ללא קידומת, אם רוצים להשתמש בסגנונות ביחס מדויק של רוחב וגובה.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
השימוש בסגנונות שונים ליחסי גובה-רוחב שונים עשוי לצאת משימוש במהירות. אם אתם לא צריכים רמת שליטה מדויקת כזו, יכול להיות שתכונת המדיה orientation
תתאים יותר לצרכים שלכם. יש לו שני ערכים אפשריים: portrait
או landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
המונחים 'לאורך' ו'לרוחב' משמשים ברוב המקרים כדי להתייחס לכיוון של מכשירים ניידים, אבל תכונת המדיה orientation
אינה ספציפית למכשיר. הערך של חלון דפדפן עם מסך מלא במחשב נייד רגיל יהיה landscape
, orientation
.
מסכים
למסכים שונים יש דחיסות פיקסלים שונה, שנמדדת ב-dpi
, נקודות לאינץ'. אפשר להתאים את הסגנונות לצפייה בדחיסות פיקסלים שונה באמצעות תכונת המדיה resolution
. כמו aspect-ratio
, לresolution
יש שלוש אפשרויות: מינימום, מקסימום ומדויק.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
יכול להיות שלעולם לא יהיה צורך להשתמש בשאילתות מדיה מסוג resolution
. בדרך כלל, דחיסות פיקסלים היא בעיה של תמונות בלבד, ותמונות רספונסיביות הן דרך להתמודד עם דחיסות הפיקסלים ישירות ב-HTML.
מצד שני, CSS הוא המקום שבו אתם מגדירים את האנימציות והמעברים שלכם. תכונת המדיה update
מאפשרת לשנות את האנימציות והמעברים האלה כדי להגיב לקצבי רענון שונים. תכונת המדיה הזו מדווחת על אחד משלושה ערכים: none
, slow
ו-fast
.
ערך update
של none
פירושו שאין קצב רענון. לדוגמה, אי אפשר לעדכן דף מודפס.
ערך update
של slow
פירושו שלא ניתן לרענן את המסך במהירות. מסך דיו אלקטרוני הוא דוגמה למסך עם קצב רענון איטי.
ערך update
של fast
פירושו שהתצוגה מתרעננת מהר מספיק כדי להתמודד עם אנימציות ומעברים.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
לא כל ההיבטים של המסך קשורים ליכולות חומרה. במודול הנושאים הסברנו איך להגדיר נכסים בקובץ מניפסט של אפליקציית אינטרנט. אחד מהנכסים האלה נקרא display
, ואפשר לתת לו את הערך fullscreen
, standalone
, minimum-ui
או browser
. תכונת המדיה המתאימה display-mode
מאפשרת לכם להתאים את הסגנונות לאפשרויות השונות האלה.
נניח שציינת את הערך display
של standalone
בקובץ המניפסט של אפליקציית אינטרנט. אם מישהו יוסיף את האתר שלכם למסך הבית שלו, האתר יופעל ללא ממשק דפדפן. אולי תחליטו להציג למשתמשים האלה לחצן 'הקודם'.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
צבע
יש אינספור תכונות מדיה שמאפשרות לשלוח שאילתות לגבי יכולות הצבע של המכשיר. אם רוצים להתאים את הסגנונות למסך שמציג רק גוונים של אפור, אפשר להשתמש בתכונת המדיה של monochrome
ללא ערך.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
יש תכונת מדיה תואמת מסוג color
.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
לגבי מסכים צבעוניים, אפשר לכתוב שאילתות באמצעות תכונות המדיה color-gamut
, color-index
או dynamic-range
. בכולם מדווחים פרטים ספציפיים לגבי יכולות הצבע של המסך.
בדוגמה הזו, ערכי הצבעים מתעדכנים בתגובה לתכונת המדיה dynamic-range
, שבה מדווחת השילוב של הבהירות המקסימלית, עומק הצבע ויחס הניגודיות של המסך. הערכים האפשריים הם standard
או high
. למסך HD שמדווח על ערך dynamic-range
של high
יש מרחב צבעים שונה באמצעות פונקציית color()
החדשה של CSS.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
אינטראקציה
תכונות המדיה יכולות גם לדווח על סוג מנגנון הקלט המשמש לאינטראקציה עם האתר: hover
, any-hover
, pointer
ו-any-pointer
. פרטים נוספים זמינים במודול על אינטראקציה.
העדפות
יש מגוון של שאילתות מדיה שמאפשרות להגיב להעדפות של משתמשים: prefers-color-scheme
, prefers-contrast
וprefers-reduced-motion
. לפרטים נוספים, אפשר לעיין במודולים בנושא עיצוב ונגישות.
אפשר לשלב תכונות של מדיה בשאילתת מדיה אחת. אפשר להגדיר את ההיקף של סגנונות האנימציה כך שיחולו רק אם למכשיר יש קצב רענון מהיר והמשתמש לא הביע העדפה לתנועה מופחתת.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
תכונות מדיה נוספות
בהמשך יש עוד תכונות מדיה.
תכונות המדיה forced-colors
ו-inverted-colors
ידווחו אם המכשיר משתמש בלוח צבעים מוגבל או הפוך.
תכונת מדיה של scripting
תאפשר לכם לבצע התאמות בשירות ה-CSS בהתאם לזמינות של JavaScript.
תכונת מדיה בשם prefers-reduced-data
תאפשר למשתמשים לציין שהם מחוברים לרשת עם חיוב לפי שימוש בנתונים, כך שתוכלו לשלוח נכסים קטנים יותר או פחות.
הצעות אחרות עדיין נמצאות בשלבי פיתוח. במודול הבא והאחרון תלמדו על הצעה לתכונת מדיה שמטפלת בהגדרות שונות של המסך.
בחינת ההבנה
בוחנים את הידע על תכונות מדיה
שאילתת מדיה יכולה לבדוק אם יש מכשיר ברוחב ספציפי, כמו @media (width: 1024px)
?
1023px
ומתחת ל-1025px
.min-width
ו-max-width
הן הזמינות.שאילתת מדיה יכולה לחפש מכשיר ב-aspect-ratio
ספציפי, כמו @media (aspect-ratio: 4/3)
?
aspect-ratio
.מהן שאילתות חוקיות על מדיה צבעונית?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
אילו משאילתות המדיה הבאות לגבי העדפות משתמש הן חוקיות?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)