לרגע הבא בערך, אני רוצה שתשכח מ- CSS. תשכחו מפיתוח אתרים. תשכחו ממשקי משתמש דיגיטליים.
וכשאתה שוכח את הדברים האלה, אני רוצה שתאפשר למוחך לנדוד. לנדוד אחורה בזמן. בחזרה לנעורים שלך. חזרה ליום הראשון שלך בבית הספר.
זו הייתה תקופה פשוטה יותר, שכל מה שהיית צריך לדאוג היה לצייר צורות ולשמור על בריחת השתן שלך.
התבונן בנקודות שלמעלה. שימו לב איך חלקם מקובצים יחד, וחלקם פרושים? מה שאני רוצה שתעשה זה לחלק אותם לחמש קבוצות עבורי, אולם אתה רואה לנכון.
לך על זה. לאחר שבדקת שאף אחד לא צופה, צייר מעגל סביב כל אחת מחמש הקבוצות בעזרת האצבע של ילדך.
כנראה שהגעת למשהו כמו להלן, נכון? (וכל מה שתעשה, אל תגיד לי שגללת למטה מבלי לעשות את התרגיל. אני אעמוד לכף היד).
בטח, שתי הנקודות בצד ימין היו יכולות לעבור לשני הכיוונים. אם קיבצתם אותם זה בסדר, אני מניח. הם אומרים שאין תשובה שגויה, אבל מעולם לא טעיתי, כך שמעולם לא הייתי בקצה המקבל של המישור המסוים הזה.
לפני שאני ממשיך, ציירת משהו כמו להלן?
כנראה שלא. ימין?
אבל זה בעצם מה שאתה עושה אם תגדיר את נקודות הפסיקה שלך במיקומים התואמים לרוחב המדויק של המכשירים הפופולריים (320 פיקסלים, 768 פיקסלים, 1024 פיקסלים).
האם מילים מהטבע שלהלן אי פעם נכנסו לאוזניך או יצאו מפיך?
"האם נקודת השבר הבינונית היא עד 768 פיקסלים, או כולל 768? אני מבין ... וזה הנוף של האייפד, או שזה 'גדול'? אה, גדול הוא 768 פיקסלים ומעלה. אני רואה. וקטן הוא 320 פיקסלים? מה הטווח הזה בין 0 ל -319 פיקסלים? נקודת שבר לנמלים ? "אני יכול להמשיך ולהראות לך את נקודות ההפסקה הנכונות ולהשאיר את זה. אבל אני מוצא את זה מאוד סקרן שהשיטה הנ"ל ("קיבוץ מטופש") כל כך נפוצה.
למה זה צריך להיות?
אני חושב שהתשובה לבעיה הזו, כמו כל כך הרבה בעיות, מסתכמת במינוח שאינו מיושר. אחרי הכל, שייט במפרץ גואנטנמו נשמע סופר אם אתה לא יודע מה הדברים האלה. (הו הלוואי שזו הייתה הבדיחה שלי.)
אני חושב שאנחנו מערבבים "גבולות" ו"טווחים "בדיונים וביישומי נקודות הפסקה שלנו.
תגיד לי, אם אתה עושה נקודות עצירה בסאס, יש לך משתנה שנקרא $large, למשל, 768px?
האם זה הגבול התחתון של הטווח שאתה מתייחס אליו כגדול, או הגבול העליון? אם זה התחתון, אז בטח לא יהיה לך $smallכי זה צריך להיות 0, נכון?
ואם זה הגבול העליון אז איך היית מגדיר נקודת שבירה $large-and-up? זה חייב להיות שאילתה תקשורת עם min-widthשל $medium, נכון?
ואם אתה מתייחס רק לגבול כשאתה אומר גדול, אנו עומדים לבלבול בהמשך כי שאילתת מדיה היא תמיד טווח .
המצב הזה הוא בלגן ואנחנו מבזבזים זמן לחשוב על זה. אז יש לי שלוש הצעות:
- קבל הפסקה שלך נקודות תקינות
- תן שם לטווחים שלך בצורה הגיונית
- היה הצהרתי
טיפ מס '1: תקנו את נקודות ההפסקה שלכם
אז מהן נקודות המפגש הנכונות ?
הגן העצמי שלך כבר צייר את המעגלים. אני פשוט אהפוך אותם למלבנים עבורך.
600 פיקסלים, 900 פיקסלים, 1200 פיקסלים ו- 1800 פיקסלים אם אתם מתכננים לתת לאנשים עם צג ענק משהו מיוחד. הערה צדדית, אם אתה מזמין צג ענק באינטרנט, ודא שאתה מציין שזה עבור מחשב. אתה לא רוצה לקבל לטאה ענקית בדואר.
הנקודות האלה שאיתם הצעיר שהתעלם שיחקה מייצגות למעשה את 14 גדלי המסך הנפוצים ביותר:
כך שנוכל ליצור תמונה קטנה ויפה המאפשרת זרימה קלה של מילים בין האנשים המחופשים לאנשי עסקים, מעצבים, מפתחים ובוחנים.
טיפ מס '2: תן שם לטווחים שלך בצורה הגיונית
בטח, אתה יכול לתת שם לנקודות הפסקה שלך דוב אבא ותינוק אם תרצה. אבל אם אני אשב עם מעצב ולדון כיצד האתר צריך להיראות במכשירים שונים, אני רוצה שהוא יגמר מהר ככל האפשר. אם שמות לטבלט דיוקן בגודל מקלים על כך, אז אני נמכר. לעזאזל, אפילו הייתי סולח לך שקראתי לזה "דיוקן אייפד".
"אבל הנוף משתנה!" אתה יכול לצעוק. "הטלפונים הולכים וגדלים, הטאבלטים הולכים וקטנים!"
אך ל- CSS של אתר האינטרנט שלך חיי מדף של כשלוש שנים (אלא אם כן זה Gmail). האייפד מלווה אותנו פעמיים באותה תקופה, וטרם הופטר. ואנחנו יודעים שאפל כבר לא מייצרת מוצרים חדשים, אלא פשוט מסירים דברים מהקיימים (כפתורים, חורים וכו ').
אז 1024 x 768 כאן כדי להישאר, אנשים. בואו לא נקבור את הראש בחול. (עובדה מהנה: יענים לא גרים בערים מכיוון שאין חול, ובכך לאן להסתתר מפני טורפים.)
מסקנה: תקשורת חשובה. אל תתנתק בכוונה מאוצר המילים המועיל.
טיפ מס '3: היו הצהרתיים
אני מכיר, אני יודע, את המילה הזו "הצהרתית" שוב. אני אגיד את זה אחרת: ה- CSS שלך צריך להגדיר מה הוא רוצה שיקרה, ולא איך זה צריך לקרות. ה"איך "שייך מוסתר באיזשהו מיקסין.
כפי שנאמר קודם לכן, חלק מן הבלבול סביב נקודות עצירה הוא שמשתנה שמגדירים גבול של מגוון משמש שם של הטווח. $large: 600pxפשוט לא הגיוני אם largeזה טווח. זה כמו לומר var coordinates = 4;.
כדי שנוכל להסתיר את הפרטים הללו בתוך mixin ולא לחשוף אותם לשימוש בקוד. או שאנחנו יכולים לעשות אחד טוב יותר ולא להשתמש במשתנים בכלל.
בהתחלה עשיתי את הקטע הבא כדוגמה פשוטה. אבל באמת אני חושב שזה מכסה את כל הבסיסים. כדי לראות את זה בפעולה, בדוק את העט הזה. אני משתמש בסאס כי אני לא יכול לדמיין לבנות אתר בלעדיו. ההיגיון חל על CSS או פחות בדיוק אותו הדבר.
@mixin for-phone-only { @media (max-width: 599px) { @content; } } @mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } @mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } @mixin for-desktop-up { @media (min-width: 1200px) { @content; } } @mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop-up { padding: 20px; } }שים לב שאני מכריח את המפתח לציין את הסיומת -upאו -only.
An obvious criticism might be that this doesn’t handle custom media queries. Well good news, everybody. If you want a custom media query, write a custom media query. (In practice, if I needed more complexity than the above I’d cut my losses and run into the loving embrace of Susy’s toolkit.)
Another criticism might be that I’ve got eight mixins here. Surely a single mixin would be the sane thing to do, then just pass in the required size, like so:
@mixin for-size($size) { @if $size == phone-only { @media (max-width: 599px) { @content; } } @else if $size == tablet-portrait-up { @media (min-width: 600px) { @content; } } @else if $size == tablet-landscape-up { @media (min-width: 900px) { @content; } } @else if $size == desktop-up { @media (min-width: 1200px) { @content; } } @else if $size == big-desktop-up { @media (min-width: 1800px) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }Sure, that works. But you won’t get compile-time errors if you pass in an unsupported name. And to pass in a sass variable means exposing 8 variables just to pass to a switch in a mixin.
Not to mention the syntax @include for-desktop-up {...} is totes more pretty than @include for-size(desktop-up) {...}.
A criticism of both these code snippets might be that I’m typing out 900px twice, and also 899px. Surely I should just use variables and subtract 1 when needed.
If you want to do that, go bananas, but there are two reasons I wouldn’t:
- These are not things that change frequently. These are also not numbers that are used anywhere else in the code base. No problems are caused by the fact that they aren’t variables — unless you want to expose your Sass breakpoints to a script that injects a JS object with those variables into your page.
- The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils:
@mixin for-size($range) { $phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @if $range == phone-only { @media (max-width: #{$phone-upper-boundary - 1}) { @content; } } @else if $range == tablet-portrait-up { @media (min-width: $phone-upper-boundary) { @content; } } @else if $range == tablet-landscape-up { @media (min-width: $tablet-portrait-upper-boundary) { @content; } } @else if $range == desktop-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == big-desktop-up { @media (min-width: $desktop-upper-boundary) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }אה ומאז שלקחתי על עצמי נימה של פגימות במהלך הפסקאות האחרונות ... אני מצטער על הטיפש שעושה משהו קסום כמו נקודות אחסון בחנות ברשימה של סאס ומעביר אותם לביצוע שאילתות מדיה, או משהו מגוחך דומה שמפתחים עתידיים ייאבקו לפענח.
המורכבות היא המקום בו מסתתרים הבאגים.לבסוף, ייתכן שאתה חושב "האם אני לא אמור לבסס את נקודות ההפסקה שלי על תוכן, ולא על מכשירים?". ובכן אני נדהם שהגעת עד כאן והתשובה חיובית ... לאתרים עם פריסה אחת. או אם יש לך מספר פריסות ואתה שמח לקבל קבוצה שונה של נקודות עצירה לכל פריסה. אה, וגם אם עיצוב האתר שלך לא משתנה לעתים קרובות, או שאתה שמח לעדכן את נקודות הבליעה שלך כאשר העיצובים שלך מתעדכנים מכיוון שתרצה לשמור אותם על בסיס התוכן, נכון?
For complex sites, life is much easier if you pick a handful of breakpoints to use across the site.
We’re done! But this post has not been as furry as I would like, let me see if I can think of an excuse to include some…
Oh, I know!
Bonus tips for breakpoint development
- If you need to experience CSS breakpoints for screen sizes bigger than the monitor you’re sitting at, use the ‘responsive’ mode in Chrome DevTools and type in whatever giant size you like.
- The blue bar shows ‘max-width’ media queries, the orange bar is ‘min-width’ media queries, and the green bar shows media queries with both a min and a max.
- Clicking a media query sets the screen to that width. If you click on a green media query more than once, it toggles between the max and min widths.
- Right click a media query in the media queries bar to go to the definition of that rule in the CSS.
Hey, thanks for reading! Comment with your tops ideas, I’d love the hear them. And click the little heart if you think I deserve it, or leave it hollow and empty, like my sense of self-worth will be if you don’t.