טכניקות HTML, CSS ו- JavaScript חיוניות

מְחַבֵּר: Monica Porter

תאריך הבריאה: 22 מרץ 2021

תאריך עדכון: 17 מאי 2024

וִידֵאוֹ: Learn HTML5 and CSS3 From Scratch - Full Course

תוֹכֶן

מַעֲרָך
Clearfix
גודל התיבה
רב עמודות
חישובים
סִגְנוֹן
שְׁקִיפוּת
מסננים
החלפת תמונה
סרטון רספונסיבי
פונקציונליות
בחירת אלמנטים בקלות
יצירת מערכים חדשים
נקה אובייקטים של מסמכים וחלונות
אהבתי את זה? תקרא את זה!

מאמר זה הופיע לראשונה בגיליון 234 של המגזין .net - המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחי אינטרנט.

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

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

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

בשנת 2010 נחת מפרט ה- HTML5 ומספק סביבת אינטרנט חדשה וחצי סטנדרטית. דפדפנים כמו אופרה, פיירפוקס, כרום וספארי אימצו את הגל החדש הזה ודחפו את צוותי ההתפתחות שלהם למגבלות חדשות של יישומי סטנדרטים וחקירת API. כדי לתת לך מושג על מידת 'הדפדפן' בדפדפנים אלה, עיין בוויזואליזציה של www.html5readiness.com על שינוי התמיכה ב- HTML5.

אל תדאג מחוסר התמיכה ב- Internet Explorer. אנו יכולים להילחם בכך בזכות מסגרת Google Chrome. מאז שגוגל הציגה אותו בשנת 2010 הוא הפך למנגנון התמיכה עבור Internet Explorer. ניתן למקד את כל הגרסאות של IE באמצעות Chrome Frame, שמבקש ממשתמש חדש להוריד פלאגין שמביא לאתרים מצומצמים עם גרסה קלה של Chrome בתוך IE. כדי ליישם את Chrome Frame אנו מוסיפים את תגית meta> הבאה בתוך תג הראש> האתר שלנו.

meta http-equiv = "תואם X-UA" content = "chrome = 1" />

מכאן אנו יכולים להנחות את משתמשי ה- IE להוריד את התוסף, אם הוא עדיין לא מותקן, באמצעות JavaScript:

סוג script = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
סקריפט>
window.onload = פונקציה () {
CFInstall.check ({
מצב: "כיסוי כיסוי",
יעד: "http://www.yourdomain.com"
});
};
/ סקריפט>

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

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

מַעֲרָך

Clearfix

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

קח את ה- HTML הבא:

div>
div> ... / div>
div> ... / div>
/ div>

טכניקה זו נכתבה על ידי ניקולה גלאגר:

.clearfix: לפני,
.clearfix: אחרי {
תוכן: "";
תצוגה: שולחן;
}
.clearfix: אחרי {
תנקה את שניהם;
}
.clearfix {
* זום: 1;
}

אם אתה משתמש ב- HTML5Boilerplate כדי להניע את הפרויקטים שלך, כבר תהיה לך גרסה זו של טכניקת ה- clearfix אפויה.

גודל התיבה

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

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

פופולרי על ידי כריס קויייר ופול איריש, ניתן ליישם טכניקה כוללת הכוללת את הדברים הבאים:

* {
-Webkit-Box-Sizing: גבול-תיבה;
-moz-box-sizing: גבול-תיבה;
גודל תיבה: גבול-תיבה;
}

השימוש בבורר * ב- CSS התווכח בגלל פגיעות ביצועים פוטנציאליות. תביעות מסוג זה קלות דעת אם אינך מייעל את כל ההיבטים האחרים באתר / באפליקציה שלך. שימוש ב- border-box יגרום לדפדפן להוסיף ריפוד וגבולות בתוך ערכת השטח הזמינה. ניתן להשתמש ב'מצב תקנים 'על ידי הגדרת גודל התיבה לתיבת התוכן.

רב עמודות

הרשת קיבלה השראה רבה מהצורה והסוג הכתובים. למרבה הצער, נתקענו בשלב הקלף. חלק מהנושאים הללו מתגלים עם מפרט המיוחל של Paged-Media ו- CSS. עם זאת, הצעדים הראשונים לעבר פריסות דומות למגזינים נלקחו כאשר הדפדפנים החלו ליישם CSS עמודות מרובות. הקוד ליצירת אפקט זה הוא פשוט למדי:

p {
-ספירת עמודים ב- webkit: 2;
ספירת עמוד-מוז: 2;
ספירת עמודות: 2;
}

תוכלו ללמוד עוד על מפרט ה- CSS3 מרובה העמודות, וכן על תגובת JavaScript שבה תוכלו להשתמש בכל דפדפן ללא תמיכה, מהבלוג של A List Apart.

חישובים

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

. מרופד {
שוליים: 0 אוטומטי;
מיקום: קרוב משפחה;
רוחב: -webkit-calc (100% - (20px * 2));
רוחב: -moz-calc (100% - (20px * 2));
רוחב: calc (100% - (20px * 2));
}

calc () דואג לחישוב הרוחב הנכון בהתבסס על רוחב האב של .padded ומינוס ריפוד מוגדר של 20 px. הכפלתי את זה ב -2 לשני צידי האלמנט שלי, ובמרכזתי את האלמנט תוך שימוש במיקום יחסי ובשוליים אוטומטיים של שוליים ושמאליים.

סִגְנוֹן

שְׁקִיפוּת

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

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

a {
צבע: rgba (0,255,0,0.5);
רקע: רגבה (0,0,255,0.05);
גבול: rgba (255,0,0,0.5);
}

אתה יכול להשתמש בצבעי RGBA או HSLA בכל מקום שתמצא ערכי HEX. יש גם רשימה מורחבת של צבעים מהנים עם שמות מוגדרים שתוכל לבדוק ישירות במפרט. אלה שימושיים כשרוצים ליצור שילוב דינמי בין אלמנטים.

מסננים

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

img src = "market.webp">
img {
-Webkit-filter: גווני אפור (100%);
}

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

החלפת תמונה

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

h1 class = 'hide-text'> הלוגו של האתר שלי / h1>
. הסתר טקסט {
כניסה לטקסט: 100%;
חלל לבן: nowrap;
הצפה: מוסתרת;
}

השני נכתב על ידי ניקולה גלאגר:

. הסתר טקסט {
גופן: 0/0 א;
טקסט-צל: אין;
צבע: שקוף;
}

סרטון רספונסיבי

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

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

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

אלמנט iframe מכיל אז אובייקט Flash או אלמנט הטמעה. שימוש במשהו כמו iframe {maxwidth: 100%; } לא יעבוד מכיוון שהרכיבים המקוננים אינם משתנים כראוי כאשר הרוחב משתנה. אז אנחנו צריכים לעשות קצת תחבולות.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

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

.video {
מיקום: קרוב משפחה;
ריפוד תחתון: 56.25%;
גובה: 0;
הצפה: מוסתרת;
}
.video iframe,
אובייקט וידאו.
. וידאו מוטבע {
עמדה: מוחלט;
למעלה: 0;
משמאל: 0;
רוחב: 100%;
גובה: 100%;
}

הגדרת החלק התחתון של ריפוד הווידאו: 56.25%; הוא הקסם בשיטה זו. שימוש בריפוד פירושו שהאחוז המשמש יתבסס על רוחב ההורה; '56 .25% 'תיצור יחס גובה-רוחב של 16: 9. עשה את המתמטיקה בעצמך, אם אתה רוצה. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (זה האחוז שלנו).

פונקציונליות

בחירת אלמנטים בקלות

עם הפופולריות של מספר ספריות JavaScript (jQuery, למשל), ועדת ECMAScript ותקני W3C שמו לב לאחת מחלקי הליבה של מפתחי פונקציונליות חסרים באופן מקורי - בחירת אלמנטים טובה. שיטות כגון getElementByID () ו- getElementByClassName () היו מהירות אך לא גמישות וחזקות כמו מנועי הבורר המגיעים מקהילת המפתחים; querySelectorAll () הייתה הדרך של גוף הסטנדרטים לחקות חלק מהגמישות הזו בשיטת בורר מקומי.

var פריטים = document.querySelectorAll ('# כותרת. פריט');

querySelectorAll () ניתן להעביר סלקטורים מרובים ומעורבים. קרא עוד על כך.

יצירת מערכים חדשים

התפטרות על מערך היא דבר שהפך למייגע לכתוב. כתיבה ושכתוב לולאות () אינו מהנה. בגרסת 1.6 של JS נחתה שיטת map () המספקת תמיכה לדרך קלה לחזור וליצור מערך חדש מאחר.

var people = ['הת'ר', 'ג'יימס', 'קארי', 'קווין'];
var welcomes = people.map (function (name) {
להחזיר 'היי' + שם + '!';
});

הפעלת קוד זה, אם היינו console.log (מברך) היית רואה מברך זה מערך חדש ['היי הת'ר!', 'היי ג'יימס!', 'היי קארי!', 'היי קווין!' ].

נקה אובייקטים של מסמכים וחלונות

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

var iframe = document.createElement ('iframe');
iframe.style.display = "none";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

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

דארסי קלארק הוא מפתח עטור פרסים, מייסד שותף של חברת הנושא וורדפרס Themify וחברת הצבירה היומית DealPage, וחבר בצוות jQuery. הוא עובד בפולאר מובייל כמפתח בכיר ב- UX.