7 תכונות חדשות ליצירת אתר רספונסיבי

CSS מודרני לוקח את כל השליטה בעיצוב אתרים בעזרת JavaScript נדרש. במאמר זה נדגיש שבעה עדכוני CSS חדשים כדי לפשט את עתיד הסטיילינג. בנוסף, אנו שוקלים את תמיכת הדפדפן של Chrome, Edge ו- Firefox. לסיום, נדון בסוגיות, בפתרונות, ובכלל בכל מה שתצטרכו כדי להתחיל מיד.

בהתחשב בכל הטריקים והטכניקות, הנה כמה תכונות CSS שנבחרו ביד ששווים את זמנך. אז, בלי שום התלהמות נוספת, בואו נצלול ישר לתוכו.

1. תת-רשת CSS

שלא כמו היכולת של CSS flexbox לנוע רק בכיוון אחד, אתה יכול להגדיר את שני הממדים ברשתות. כאשר הם מתחילים להיות עוצמתיים ופופולאריים בעשורים הקרובים, עדים לשינויים אדירים בעיצוב אתרים. רשתות מקוננות משמשות לצייר רשתות בתוך הרשתות. אבל, מה החסרונות העיקריים שהעלו קריאה לתת-רשת CSS?

• רשתות מקוננות לאחר רמה 2 נהגו להציף תוכן מחוץ לרשת הגדולה יותר, שהשפיעה מאוד על היענות האתר.
• רשתות מקוננות שימשו כאלמנטים עצמאיים בתוך מיכל הרשת הגדול יותר. לא הייתה כלל התייחסות למיכל האב לשינוי כלשהו.

ללא תת רשתות:

לאחר רשתות משנה:

כך תוכל ליישם רשתות משנה:

.container {
רוחב: 700 פיקסלים;
גובה: 500 פיקסלים;
רקע: rgb (214, 255, 139);





instagram viewer


תצוגה: רשת;
רשת-תבנית-עמודות: 1fr 1fr 1fr 1fr;
רשת תבנית שורות: 1fr 1fr 1fr 1fr;
}
.container div {
רקע: rgb (72, 170, 137);
שורת רשת: 2/3;
טור רשת: 2/5;
תצוגה: רשת;
רשת-תבנית-עמודות: רשת משנה;
רשת-תבנית-שורות: תת-רשת;
}

אתה יכול להציב מספר תת-רשתות. היוצא מן הכלל הבולט הוא שתת-משנה יורשת מאפיין פער רשת גריד. זה יביא ליצירת כל רשתות המשנה עם מאפייני פער זהים בתוך כל רשת האב.

הדבר הטוב ביותר בתת-רשתות הוא שהם מגיבים מאוד, מתכווננים וניתנים להרחבה.

תאימות לדפדפן: Firefox

2. נכס יחס גובה-רוחב

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

אתה יכול לתקן את זה על ידי תמיכה במאפיין יחס גובה-רוחב עם מאפיין רוחב. זה הופך להיות שימושי עבור תמונות רספונסיביות כיוון שאתה יכול להגדיר גובה או רוחב.

כך תוכל ליישם מאפיין ביחס גובה-רוחב:

.container {
רוחב: 700 פיקסלים;
יחס גובה-רוחב: 16/9;
רקע: rgb (72, 170, 137);
}

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

תאימות דפדפן: Chrome, Edge, Firefox (חלקי)

3. פער Flexbox

פער רשת הוא די פופולרי ליצירת מרווח שווה בין כל רשת. אבל היית אמור ליישם שוליים שליליים, סלקטורים של פסאודו וסלקטורים מורכבים כדי לטפל ברווח שבין כל פריטי פלקס. לפיכך, פער ה- Flexbox מביא לשורות קוד פחותות עם יכולת הרחבה גבוהה יותר.

כך תוכל ליישם את פער ה- flexbox:

.container {
רוחב: 700 פיקסלים;
גובה: 500 פיקסלים;
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: center;
פער: 1em;
}

תְפוּקָה:

תאימות דפדפנים: כל הדפדפנים העיקריים, כולל Chrome, Edge ו- Firefox.

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

באמצעות Scroll Snap תוכלו להגדיר גבולות ספציפיים לתיקון הפריסה והנראות של מיכל נתון. לדוגמה, זה עובד מדהים ליצור קרוסלות וקטעי אתרים מוגדרים. שים לב שלא תזדקק ל- JS לצורך התאמה כלשהי.

כך תוכל ליישם הצמד גלילה:

.container {
רוחב: 100%;
גובה: 100%;
תצוגה: flex;
גלישה- x: גלילה;
גלילה-הצמד-סוג: x חובה;
}
קטע {
להגמיש: אין;
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: center;
גודל גופן: 15em;
משפחת גופנים: Arial, Helvetica, sans-serif;
גלילה-הצמד-יישור: סוף;
רוחב: 100%;
גובה: 100%;
}

תְפוּקָה:

לגלילה של CSS יש רכוש של הורה וילד. מאפיין האב או המיכל קובע את כיוון הגלילה (x או y) ואת התנהגות הצמד הגלילה. לדוגמה, אתה יכול להגדיר סוג גלילה-הצמד: x חובה. זה יעניק למשתמש שליטה להחליט על נקודת הגלילה מבלי להתחשב במיקום הגלילה.

מצד שני, סוג גלילה-הצמד: y קרבה פועלת רק כאשר מבקר האתר קרוב יותר לנקודת הגלילה.

המאפיין הצאצא הוא גלילה-הצמד-יישור כדי ליישר את האלמנטים במהלך הצמד גלילה של CSS. הוא מכניס ערכי התחלה, סיום ומרכז כדי ליישר אלמנטים בהתאם.

5. שאילתות תכונה

שאילתות תכונה משמשות להתמודדות עם השפלה חיננית. למשל, רשתות CSS פופולריות למדי בימינו. אבל כדאי להזכיר שדפדפנים ישנים לא יכולים לעבד את זה.

כאן, שאילתות תכונות לבדוק אם דפדפן מסוים תומך במאפיין ספציפי או לא ו נותן מערכת תמיכה שמעודדת התייחסות לנכס CSS רק אם היא נתמכת בכך דפדפן. אחרת, ערך ברירת המחדל נחשב. במקרה זה, אתה יכול להציב חסימות במקום רשתות עבור כל חזרה.

כך תוכל ליישם שאילתות תכונות:

@supports (נראות תוכן: אוטומטי) {
גוּף{
רקע: צהבהב;
רוחב: 100%;
גובה: 100%;
}
}

לכן, רק לדפדפנים המציגים מאפייני חשיפה לתוכן צבע רקע צהבהב; אחרת, ערך ברירת המחדל ייחשב. שים לב ש- @ דומה ל- @ media של שאילתות מדיה, שם היית אמור להגדיר רוחב מקסימלי או רוחב מינימלי בכדי לבצע התאמות מאולתרות. זה מפשט את הזכירה של שאילתות התכונה @supports.

קרא עוד: כיצד להשתמש בשאילתות מדיה ב- HTML וב- CSS

תאימות דפדפנים: כל הדפדפנים העיקריים, כולל Chrome, Edge ו- Firefox.

6. נכס נראות תוכן

עיבוד מהיר פועל כעמוד שדרה עבור אתר אינטראקטיבי למשתמש. עם הפופולריות הגוברת של מכשירים ניידים, ביצועי העיבוד של אתר מהווים צוואר בקבוק לקבלת אתר מושך.

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

#main {
נראות תוכן: אוטומטי;
/ * גודל-מהותי: 0 500 פיקסלים; */
}

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

בואו למדוד את העוצמה של נראות התוכן. הנה התוצאה:

7. מעבר, טרנספורמציה, ואנימציה

ב- CSS יש לנו שתי דרכים ליישם אנימציה. Transition משמש לביצוע שינויים חלקים בתכונות החזותיות של אלמנטים. מצד שני, ללא מעבר, טרנספורמציה תתפעל באופן פתאומי ממצב אחד למשנהו.

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

.ילד {
רקע: צהבהב;
גובה: 150 פיקסלים;
רוחב: 150 פיקסלים;
צבע לבן;
מעבר: להפוך 0.2s קלות-ב-אאוט;
אנימציה: myAnimation 2s אינסופי;
}
.child: רחף {
להפוך: קנה מידה (2, 2) לסובב (45 מעלות);
}
@keyframes myAnimation {
0% {
}
50% {
להפוך: translateX (400px)
}
100% {
transform: translateX (0px)
}
}

תאימות דפדפנים: כל הדפדפנים העיקריים, כולל Chrome, Edge ו- Firefox.

מסיימים

סימון גליונות סגנון מדורגים מתפתח ברציפות עם תכונות טובות יותר. עד כה התוודעתם לשבע התכונות המדהימות הללו הכוללות מאפיין תת-רשת CSS, יחס יחס רוחב, פערים ב- flexbox, גלילה הצמד, שאילתות תכונות, מאפיין נראות תוכן, מעבר, שינוי, ו- אנימציה.

בסופו של יום, עליכם לוודא אילו תכונות מפשטות את עיצוב האתר שלכם.

7 תכונות חדשות שצריך לשים לב אליהם ב- Bootstrap 5

אם אתה מפתח אתרים ואפליקציות המשתמשים במסגרת Bootstrap CSS, הנה מה שחדש ב- Bootstrap 5.

קרא הבא

על הסופר