เนื้อหา
- เค้าโครง
- Clearfix
- ขนาดกล่อง
- หลายคอลัมน์
- การคำนวณ
- สไตล์
- ความโปร่งใส
- ฟิลเตอร์
- การเปลี่ยนรูปภาพ
- วิดีโอที่ตอบสนอง
- ฟังก์ชันการทำงาน
- เลือกองค์ประกอบได้อย่างง่ายดาย
- การสร้างอาร์เรย์ใหม่
- ทำความสะอาดเอกสารและวัตถุหน้าต่าง
- ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!
บทความนี้ปรากฏครั้งแรกในฉบับที่ 234 ของนิตยสาร. net ซึ่งเป็นนิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์
เทคนิคที่เป็นหัวใจหลักคือวิธีการดำเนินงานและในฐานะนักพัฒนาและนักออกแบบส่วนหน้าเรามีงานมากมาย ที่กล่าวมาเรามักลืมไปว่าภูมิทัศน์นี้เปลี่ยนแปลงไปมากเพียงใด ตั้งแต่ปี 2545 ถึงปี 2553 ชุมชนของเราถูกทำลายด้วยโค้ดและทรัพยากรที่ขยายตัวมากจนขัดขวางประสิทธิภาพและการบำรุงรักษา เพื่อเอาชนะสิ่งนี้เราได้สร้างกลเม็ดเคล็ดลับและแฮ็กมากมายที่เราขนานนามว่า "เทคนิค" เรายังคงทำงานให้ลุล่วง แต่ไม่ใช่ในลักษณะที่มีประสิทธิภาพสูงสุด
การทำแบบ 360 องศาในช่วงไม่กี่ปีที่ผ่านมาได้เห็นมาตรฐานและการปรับใช้มาตรฐานที่ดีขึ้นทำให้เราในฐานะชุมชนสามารถพัฒนา "เทคนิค" ที่ใหม่กว่าและก้าวหน้ากว่าได้ ภูมิทัศน์ใหม่นี้ถือเป็น "เว็บสมัยใหม่"
เมื่อ "เว็บ 2.0" หยุดนิ่งและสับสน "เว็บสมัยใหม่" ก็เช่นกัน ให้เวลา ที่กล่าวว่าในตอนนี้เราสามารถใช้และใช้คำในทางที่ผิดได้ตราบเท่าที่มีความเข้าใจร่วมกันว่าคำนี้หมายถึงอะไร
ในปี 2010 ข้อกำหนด HTML5 ได้มาพร้อมกับสภาพแวดล้อมเว็บแบบกึ่งมาตรฐานใหม่ล่าสุด เบราว์เซอร์เช่น Opera, Firefox, Chrome และ Safari ได้ใช้คลื่นลูกใหม่นี้และผลักดันให้ทีมพัฒนาของตนก้าวไปสู่ขีด จำกัด ใหม่ในการใช้งานมาตรฐานและการสำรวจ API เพื่อให้คุณทราบว่า "ออนบอร์ด" เบราว์เซอร์เหล่านี้เป็นอย่างไรให้ตรวจสอบการแสดงภาพของ www.html5readiness.com เกี่ยวกับการเปลี่ยนแปลงการสนับสนุน HTML5
อย่ากังวลเกี่ยวกับการขาดการสนับสนุนใน Internet Explorer เราสามารถต่อสู้กับสิ่งนี้ได้ด้วย Google Chrome Frame นับตั้งแต่ Google เปิดตัวในปี 2010 จึงกลายเป็นกลไกสนับสนุนสำหรับ Internet Explorer IE ทุกเวอร์ชันสามารถกำหนดเป้าหมายได้ด้วย Chrome Frame ซึ่งจะแจ้งให้ผู้ใช้ใหม่ดาวน์โหลดปลั๊กอินที่แสดงผลเว็บไซต์ที่เลือกใช้ด้วย Chrome เวอร์ชันที่มีน้ำหนักเบาภายใน IE ในการติดตั้ง Chrome Frame เราจะเพิ่มเมตา> แท็กต่อไปนี้ไว้ในแท็ก head> ของไซต์ของเรา
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
จากที่นี่เราสามารถแจ้งให้ผู้ใช้ IE ดาวน์โหลดปลั๊กอินหากยังไม่ได้ติดตั้งโดยใช้ JavaScript:
ประเภทสคริปต์ = "text / javascript" src = "http: // ajax
googleapis.com/ajax/libs/chrome-frame/1/CFInstall
min.js "> / script>
สคริปต์>
window.onload = function () {
CFInstall.check ({
โหมด: "วางซ้อน",
ปลายทาง: "http://www.yourdomain.com"
});
};
/ script>
สามารถตั้งค่าปลายทางให้ส่งผู้ใช้ไปยังลิงก์ที่ต้องการหลังจากติดตั้งปลั๊กอิน คำเตือน: แม้ว่า Chrome Frame จะให้วิธีการในการพัฒนาอย่างเคร่งครัดสำหรับเบราว์เซอร์สมัยใหม่อย่างแท้จริง แต่เราต้องไม่ลืมว่าผู้ใช้มีตัวเลือกที่จะไม่ดาวน์โหลดปลั๊กอินหากไม่ต้องการ หากไม่เป็นเช่นนั้นและคุณจะต้องให้การสนับสนุนสำหรับ IE เวอร์ชันใดเวอร์ชันหนึ่งหรืออื่น ๆ คุณจะต้องใช้เวลามากขึ้นในการค้นหาสิ่งที่คุณสามารถทำได้และไม่สามารถให้ได้จากประสบการณ์ของคุณข้ามเบราว์เซอร์.
ด้วยรหัสนี้ให้พื้นที่เล่นระดับที่มากขึ้นสำหรับการพัฒนาบนเว็บสแต็กที่ทันสมัยเราสามารถก้าวไปข้างหน้าด้วยความสบายใจ คุณอาจจำได้ว่าต้องสร้างแฮ็กเฉพาะเบราว์เซอร์จำนวนมากเพื่อให้ไซต์ของคุณมีโครงสร้างที่เหมาะสมข้ามเบราว์เซอร์สร้างองค์ประกอบว่างจำนวนนับไม่ถ้วนเพื่อใช้กับรูปภาพที่หั่นเป็นชิ้นเล็ก ๆ ของคุณหรือแม้แต่การเขียนโค้ด JavaScript ที่ละเอียดเกินไปหรือซ้ำซ้อนเพื่อให้ได้มา ฟังก์ชั่นที่ง่ายที่สุดในการทำงาน ในแง่หนึ่งความเจ็บปวดทั้งหมดนี้เป็นปัญหาเดียวกับที่เรากังวลในวันนี้ เรายังคงต่อสู้เพื่อการควบคุมที่มากขึ้นและเครื่องมือที่ดีกว่าเพื่อต่อสู้กับเลย์เอาต์สไตล์และฟังก์ชันการทำงาน แต่อยู่ในระดับที่เป็นผู้ใหญ่
เค้าโครง
Clearfix
การลอยองค์ประกอบถูกนำกลับมาใช้ใน CSS 2.1 แต่ไม่เคยกลายเป็นโซลูชันที่สมบูรณ์ที่เราคาดหวัง ปัญหาที่ใหญ่ที่สุดอย่างหนึ่งคือการรักษาขนาดขององค์ประกอบหลักเมื่อองค์ประกอบลูกลอย เพื่อแก้ไขปัญหานี้เทคนิค clearfix ถูกสร้างขึ้น
ใช้ HTML ต่อไปนี้:
div>
div> ... / div>
div> ... / div>
/ div>
เทคนิคนี้เขียนโดย Nicolas Gallagher:
.clearfix: ก่อน,
.clearfix: หลัง {
เนื้อหา: " ";
แสดง: ตาราง;
}
.clearfix: หลัง {
ชัดเจน: ทั้งสอง;
}
.clearfix {
* ซูม: 1;
}
หากคุณใช้ HTML5Boilerplate เพื่อเริ่มโครงการของคุณคุณจะมีเทคนิค clearfix เวอร์ชันนี้อยู่แล้ว
ขนาดกล่อง
เป็นเวลาหลายปีที่นักพัฒนาถกเถียงกันว่าการใช้งานโมเดลกล่องใดเหมาะสมกว่ากัน โหมด Quirks vs Standards มีความหมายจริงๆ: "มิติขององค์ประกอบควรเปลี่ยนไปหลังจากตั้งค่าแล้วเมื่อใช้เส้นขอบและช่องว่างภายในหรือไม่"
ตอนนี้มีการตกลงกันอย่างกว้างขวางว่าการใช้เส้นขอบและช่องว่างภายในองค์ประกอบนั้นเหมาะสมกว่าและไม่เพิ่มความกว้างหรือความสูงขององค์ประกอบ การอภิปรายไม่เกี่ยวข้องกับการใช้การปรับขนาดกล่องอย่างกว้างขวาง เบราว์เซอร์จะรับสัญญาณจากคุณแทนที่จะเป็นในทางกลับกัน
ได้รับความนิยมโดย Chris Coyier และ Paul Irish เทคนิคที่ครอบคลุมทั้งหมดสามารถนำไปใช้ได้ดังต่อไปนี้:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
ขนาดกล่อง: border-box;
}
การใช้ * selector ใน CSS ได้รับการถกเถียงกันเนื่องจากประสิทธิภาพที่เป็นไปได้ การอ้างสิทธิ์ประเภทนี้ไม่สำคัญหากคุณไม่ได้เพิ่มประสิทธิภาพในด้านอื่น ๆ ทั้งหมดของเว็บไซต์ / แอปของคุณ การใช้ border-box จะทำให้เบราว์เซอร์เพิ่มช่องว่างภายในและเส้นขอบภายในชุดพื้นที่ว่าง สามารถใช้ "โหมดมาตรฐาน" ได้โดยการตั้งค่าขนาดกล่องเป็นกล่องเนื้อหา
หลายคอลัมน์
เว็บได้รับแรงบันดาลใจอย่างมากจากรูปแบบและประเภทการเขียน น่าเสียดายที่เราติดอยู่ในขั้นตอนการตัดกระดาษ ปัญหาเหล่านี้บางส่วนกำลังเกิดขึ้นพร้อมกับข้อกำหนดของ Paged-Media และ CSS Regions ที่รอคอยมานาน ที่กล่าวว่าขั้นตอนแรกในการจัดวางแบบนิตยสารมากขึ้นเกิดขึ้นเมื่อเบราว์เซอร์เริ่มใช้ CSS หลายคอลัมน์ รหัสในการสร้างเอฟเฟกต์นี้ค่อนข้างตรงไปตรงมา:
p {
-webkit คอลัมน์นับ: 2;
-moz- คอลัมน์นับ: 2;
คอลัมน์นับ: 2;
}
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับข้อกำหนดหลายคอลัมน์ของ CSS3 ตลอดจนรายการสำรองของ JavaScript ที่คุณสามารถใช้กับเบราว์เซอร์ใดก็ได้โดยไม่ต้องมีการสนับสนุนจากบล็อกของ A List Apart
การคำนวณ
การคำนวณขนาดอาจเป็นเรื่องยาก ย้อนกลับไปในสมัยก่อนเราไม่มีวิธีคำนวณหน่วยใด ๆ นับประสาอะไรกับการคำนวณหน่วยผสม นั่นคือทั้งหมดที่เปลี่ยนไปด้วยการขจัดตะกรัน การสร้างเอฟเฟกต์แบบเบาะที่ไม่มีผลต่อความกว้างขององค์ประกอบเริ่มต้นหรือใช้บางอย่างเช่น box-sizing: border-box; จนกระทั่งเมื่อไม่นานมานี้ทำได้โดยการเพิ่มองค์ประกอบที่มีองค์ประกอบพิเศษเท่านั้น
.padded {
ระยะขอบ: 0 อัตโนมัติ;
ตำแหน่ง: ญาติ;
ความกว้าง: -webkit-calc (100% - (20px * 2));
ความกว้าง: -moz-calc (100% - (20px * 2));
ความกว้าง: คำนวณ (100% - (20px * 2));
}
calc () ดูแลการคำนวณความกว้างที่เหมาะสมตามความกว้างหลักของ. padded และลบช่องว่าง 20px ที่กำหนดไว้ ฉันคูณสิ่งนี้ด้วย 2 สำหรับด้านใดด้านหนึ่งขององค์ประกอบโดยจัดองค์ประกอบให้อยู่ตรงกลางโดยใช้การวางตำแหน่งสัมพัทธ์และอัตโนมัติขอบซ้ายและขวา
สไตล์
ความโปร่งใส
การใช้รูปแบบองค์ประกอบที่เหมาะสมนั้นขึ้นอยู่กับประเภทของเครื่องมือที่เรามีให้ใน CSS เสมอ ความโปร่งใสเป็นหนึ่งในรูปแบบการสนับสนุนแรก ๆ ที่คุณจะพบในช่วงต้นถึงกลางปี 2000
ด้วยการถือกำเนิดของ HTML5 และความพยายามด้านมาตรฐานที่มุ่งเน้นมากขึ้นเบราว์เซอร์จึงมีการใช้คุณสมบัติความทึบตามมาตรฐานและได้เปิดเผยการรองรับช่องสัญญาณอัลฟาตามข้อกำหนดโมดูลสีใหม่ ซึ่งรวมถึงแนวทาง RGBA และ HSLA
ก {
สี: rgba (0,255,0,0.5);
พื้นหลัง: rgba (0,0,255,0.05);
เส้นขอบ: rgba (255,0,0,0.5);
}
คุณสามารถใช้สี RGBA หรือ HSLA ได้ทุกที่ที่คุณพบค่า HEX นอกจากนี้ยังมีรายการสีสนุก ๆ เพิ่มเติมพร้อมชื่อที่กำหนดซึ่งคุณสามารถตรวจสอบได้ในข้อกำหนด สิ่งเหล่านี้มีประโยชน์เมื่อคุณต้องการสร้างการผสมผสานแบบไดนามิกระหว่างองค์ประกอบต่างๆ
ฟิลเตอร์
ตัวกรอง CSS นั้นน่าตื่นเต้นมาก การมีความสามารถในการเปลี่ยนรูปลักษณ์ขององค์ประกอบบนหน้าเว็บแบบไดนามิกโดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สามนั้นน่าทึ่งมากและจะช่วยลดเวลาในการใช้ Photoshop ของคุณได้อย่างมาก
img src = "market.webp">
img {
-webkit กรอง: สีเทา (100%);
}
ปัจจุบันตัวกรอง CSS ได้รับการสนับสนุนเฉพาะในเบราว์เซอร์ WebKit ดังนั้นการใช้งานควรมีลักษณะเพิ่มเติมไม่ใช่ขึ้นอยู่กับ อ่านเพิ่มเติมได้ที่นี่
การเปลี่ยนรูปภาพ
การแทนที่ข้อความด้วยรูปภาพมีมานานแล้ว น่าเสียดายที่ยังคงมีข้อเสียคือความสามารถในการเข้าถึงได้ง่ายไปจนถึงเทคนิคการเปลี่ยนรูปภาพที่ทันสมัยและซับซ้อนที่สุด แต่เมื่อไม่นานมานี้มีสองคนที่ฉลาดมากและมีความโดดเด่นในสิทธิของตัวเอง คนแรกเขียนโดย Scott Kellman:
h1 class = 'hide-text'> โลโก้เว็บไซต์ของฉัน / h1>
.hide-text {
เยื้องข้อความ: 100%;
พื้นที่สีขาว: nowrap;
ล้น: ซ่อน;
}
ประการที่สองเขียนโดย Nicolas Gallagher:
.hide-text {
แบบอักษร: 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 {
ตำแหน่ง: ญาติ;
padding-bottom: 56.25%;
ความสูง: 0;
ล้น: ซ่อน;
}
.video iframe,
.video object,
.video embed {
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ความสูง: 100%;
}
การตั้งค่า padding ของ .video wrapper-bottom: 56.25%; คือความมหัศจรรย์ในวิธีนี้ การใช้ช่องว่างภายในหมายถึงเปอร์เซ็นต์ที่ใช้จะขึ้นอยู่กับความกว้างของผู้ปกครอง ‘56 .25% ’จะสร้างอัตราส่วน 16: 9 ทำคณิตศาสตร์ด้วยตัวคุณเองถ้าคุณต้องการ 9/16 = 0.5625 0.5625 * 100 = 56.25 (นี่คือเปอร์เซ็นต์ของเรา)
ฟังก์ชันการทำงาน
เลือกองค์ประกอบได้อย่างง่ายดาย
ด้วยความนิยมของไลบรารี JavaScript จำนวนมาก (ตัวอย่างเช่น jQuery) คณะกรรมการ ECMAScript และมาตรฐาน W3C จึงสังเกตเห็นหนึ่งในแกนหลักของผู้พัฒนาฟังก์ชันการทำงานที่ขาดโดยกำเนิดนั่นคือการเลือกองค์ประกอบที่ดี วิธีการต่างๆเช่น getElementByID () และ getElementByClassName () นั้นรวดเร็ว แต่ไม่ยืดหยุ่นและแข็งแกร่งเท่ากับเอ็นจิ้นตัวเลือกที่มาจากชุมชนนักพัฒนา querySelectorAll () เป็นวิธีการของร่างกายมาตรฐานในการเลียนแบบความยืดหยุ่นบางอย่างในวิธีการเลือกแบบเนทีฟ
var items = document.querySelectorAll ('# header .item');
querySelectorAll () สามารถส่งผ่านตัวเลือกหลายตัวและแบบผสม อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้
การสร้างอาร์เรย์ใหม่
การทำซ้ำในอาร์เรย์เป็นสิ่งที่น่าเบื่อที่จะเขียน การเขียนและเขียนใหม่สำหรับ () ลูปไม่ใช่เรื่องสนุก ใน JS เวอร์ชัน 1.6 เมธอด map () ได้รับการสนับสนุนสำหรับวิธีง่ายๆในการทำซ้ำและสร้างอาร์เรย์ใหม่จากอันอื่น
var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var ยินดีต้อนรับ = people.map (ฟังก์ชัน (ชื่อ) {
กลับ "สวัสดี" + ชื่อ + "!";
});
การรันโค้ดนี้หากเราไปที่ console.log (ยินดีต้อนรับ) คุณจะเห็นว่ายินดีต้อนรับคืออาร์เรย์ใหม่ [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
ทำความสะอาดเอกสารและวัตถุหน้าต่าง
ไลบรารี JavaScript ของบุคคลที่สามมีแนวโน้มที่จะยุ่งกับเอกสารดั้งเดิมและอ็อบเจ็กต์หน้าต่าง ซึ่งอาจเป็นปัญหาสำหรับไลบรารีบุคคลที่สามอื่น ๆ และนักพัฒนารวมถึงไลบรารีเหล่านี้ด้วย ในฐานะฝ่ายใดฝ่ายหนึ่งตรวจสอบให้แน่ใจว่าคุณกำลังทำงานกับอ็อบเจ็กต์ทั้งสองเวอร์ชันที่สะอาดตาโดยการสร้างอินสแตนซ์ใหม่ของอ็อบเจ็กต์เหล่านี้ วิธีที่ดีที่สุดคือการสร้างองค์ประกอบ iframe แทรกลงใน DOM และจัดเก็บอินสแตนซ์ใหม่ของออบเจ็กต์เหล่านั้น
var iframe = document.createElement ('iframe');
iframe.style.display = "ไม่มี";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
แม้ว่าจะมีการปรับปรุงเว็บสแต็กครั้งใหญ่ แต่การปรับปรุงชุดเทคโนโลยีของเราอย่างต่อเนื่องและซับซ้อนเพื่อตอบสนองความท้าทายที่เราเผชิญในรูปแบบของโครงการรูปแบบและฟังก์ชันการทำงานยังคงมีความสำคัญอย่างมาก เพื่อรักษาระบบนิเวศที่ดีของการเติบโตเราต้องส่งเสริมให้หน่วยงานมาตรฐานและผู้จำหน่ายเบราว์เซอร์ดำเนินการต่อด้วยข้อกำหนดใหม่ ๆ และการนำคุณลักษณะที่เป็นนวัตกรรมไปใช้ในขณะเดียวกันก็แบ่งปันความรู้ของเราเองกับนักพัฒนาและนักออกแบบ ข้อมูลเชิงลึกมากขึ้นแฮ็กน้อยลง
Darcy Clarke เป็นนักพัฒนาที่ได้รับรางวัลผู้ร่วมก่อตั้ง บริษัท ธีม WordPress Themify และ DealPage ผู้รวบรวมข้อตกลงรายวันและเป็นสมาชิกของทีม jQuery เขาทำงานที่ Polar Mobile ในตำแหน่งผู้พัฒนา UX อาวุโส
ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!
- วิธีสร้างแอป
- ดาวน์โหลดฟอนต์ฟรีที่ดีที่สุด
- แปรง Photoshop ฟรีทุกครีเอทีฟโฆษณาต้องมี
- แบบฝึกหัด Illustrator: ไอเดียที่น่าลองวันนี้!
- ตัวอย่างงานศิลปะ doodle ที่ยอดเยี่ยม
- การเลือกบทช่วยสอน Wordpress ที่ยอดเยี่ยม
- แบบอักษรบนเว็บฟรีที่ดีที่สุดสำหรับนักออกแบบ
- ดาวน์โหลดพื้นผิวฟรี: ความละเอียดสูงและพร้อมใช้งานทันที
