מחולל מהדק CSS

CSS clamp () generator builds a single clamp (מינימום, מועדף, מקסימום) declaration that scales a value sleeply between two screen widths.Instead of writes media to step a heading from 24px on phones to 48px on desktops, you set a minimum size, a maximum size, and the viewport range they map to, and the generator reforts one line of CSS that interpolates every size in between.

הפונקציה clamp () לוקחת שלושה ארגומנטים: גבול תחתון, ערך מועדף וגבול עליון. הדפדפן משתמש בערך המועדף אלא אם כן הוא יורד מתחת למינימום או מעל המקסימום, ובמקרה זה הוא ננעל לאותו גבול. מחולל זה מחשב את הערך המועדף כפונקציה ליניארית של נקודת המבט, המשלב מונח rem קבוע עם מונח vw, כך שהתוצאה גדלה בהתאם לחלון ולעולם לא יורדת מתחת למינימום שלך או חורגת מהמקסימום שלך. טכניקה זו נקראת לעתים קרובות טיפוגרפיה נוזלית, אם כי היא פועלת באותה מידה עבור שוליים, ריפוד, פערים ורוחב.

הכל מחושב בדפדפן שלך עם JavaScript בצד הלקוח, כך ששום דבר שאתה מזין לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה. אתה יכול להזין גדלים בפיקסלים או rem, להגדיר גודל גופן שורש מותאם אישית ולקרוא טבלת תצוגה מקדימה המציגה את הערך המחושב ברוחב יציאות תצוגה נפוצות, כך שתוכל לאשר שהעקומה מתנהגת לפני הדבקת המהדק () בגיליון הסגנונות שלך.

לגודל הנוזל יש מלכודת נגישות אחת שכדאי להימנע ממנה בכוונה ביטוי מהדק שהמונח האמצעי שלו מתבטא אך ורק ביחידות ה-viewport מתעלם מהגדרת גודל הגופן של הקורא, מכיוון ש-vw לא מגיב אליו, וטקסט שלא יכול לגדול נכשל ב-WCAG 1.4.4. שמירה על רכיב rem בערך המועדף, וזה מה שהפלט שנוצר עושה, פירושה שהגודל עדיין מגיב לזום הדפדפן ולגופן ברירת מחדל גדול יותר. תמיד הגדר את שני הגבולות: בלעדיהם הערך משתנה ללא הגבלה לשני הכיוונים.

הנה מחולל מהדק CSS על כותרת אמיתית. הזן 24 ו-48 פיקסלים כגדלים, 360 ו-1440 כיציאות התצוגה, שמור על השורש של 16 פיקסלים ולחץ על צור מהדק (). הפלט הוא בגודל גופן: מהדק (1.5rem, 1rem + 2.2222vw, 3rem);. טבלת התצוגה המקדימה מאשרת זאת: 24 פיקסלים ב-360, 33.07 פיקסלים ב-768, 38.76 פיקסלים ב-1024 ו-48 פיקסלים ב-1440. מתחת ל-360 הכותרת נשארת ב-1.5rem ומעל 1440 היא נעצרת ב-3rem, שזה כל הנקודה של טיפוגרפיה נוזלית עם גבולות.