รักษารหัสมาร์คอัป CSS3 ของคุณให้ผอม
นักพัฒนาเว็บสามารถประหยัดเวลาได้มากโดยใช้ไวยากรณ์ CSS3 ที่ซับซ้อนยิ่งขึ้น ผู้ใช้ที่เข้าชมหน้าเว็บของคุณกำลังคาดว่าจะมีความเร็วในการโหลดที่เร็วที่สุด - ซึ่งเป็นความรับผิดชอบของคุณในการลดขนาดไฟล์ลง มีเคล็ดลับชวเลขมากมายกับ CSS และโดยเฉพาะอย่างยิ่งภายใต้รูปแบบ CSS3 ใหม่.
ฉันได้รวบรวมแนวคิดเหล่านี้ไว้ในคู่มือด้านล่างนี้แล้ว เราควรสัมผัสกับพื้นที่อื่น ๆ เช่นการลดขนาดโค้ด CSS ของคุณ มีเครื่องมือในเบราว์เซอร์เพื่อช่วยนักพัฒนาในการจัดแต่งทรงผม แต่คุณต้องการรวมรหัสย่อกับการลดขนาดไฟล์นี้เพื่อปรับปรุงกระบวนการเรนเดอร์เว็บไซต์ของคุณในที่สุด.
เคล็ดลับพื้นฐานเกี่ยวกับการฟอร์แมต
ก่อนที่เราจะกระโดดเข้าสู่ไวยากรณ์ CSS ที่แท้จริงฉันต้องการไปที่หัวข้อ อย่างไร เพื่อเขียน CSS ของคุณ หากคุณคุ้นเคยกับการออกแบบเว็บคุณอาจเคยเห็นสไตล์ชีทมาก่อนอาจจะมากกว่าหนึ่งครั้ง ส่วนแรกของแต่ละคำสั่งเรียกว่า ผู้เลือก. เป้าหมายนี้เป็นประเภทขององค์ประกอบที่จะได้รับรูปแบบที่เพิ่มเข้ามาในวงเล็บปีกกาที่รู้จักกันว่า คุณสมบัติ.
ระดับอินไลน์
ด้วยรูปแบบอินไลน์คุณสมบัติแต่ละรายการจะถูกเขียนทีละรายการโดยมีช่องว่างเพื่อแยกเท่านั้น วิธีนี้จะใช้กับตัวเลือกที่ดีที่สุดที่คุณต้องการเพียงไม่กี่คุณสมบัติ มันจะช่วยให้คุณประหยัดพื้นที่บนหน้าและการเลื่อนดูสไตล์ชีทของคุณจะเร็วกว่ามาก ในกรณีที่คุณไม่เคยพบ CSS แบบอินไลน์มาก่อนฉันได้เพิ่มตัวอย่างเล็ก ๆ น้อย ๆ ด้านล่างที่กำหนดเป้าหมายไปที่ลิงก์จุดยึด HTML.
a color: # 648cc8; น้ำหนักตัวอักษร: ตัวหนา; a: hover color: # 739cda; การตกแต่งข้อความ: ไม่มี; a.alt color: # bd4949! important;
ระดับบล็อก
ในอีกทางหนึ่งคุณสมบัติบล็อกสไตล์จะถูกป้อนในหนึ่งบรรทัดต่อคู่คีย์ / ค่าและมักจะเยื้องสำหรับการแก้ไขที่รวดเร็วยิ่งขึ้นเมื่อสแกนรหัส สไตล์ที่สะอาดกว่าประมาณ 99% ที่ฉันใช้ในการจัดรูปแบบนี้และกลายเป็นมาตรฐานอุตสาหกรรมสำหรับนักออกแบบหลายคน หากตัวเลือกของคุณใช้คุณสมบัติมากกว่า 6 หรือ 7 นี่เป็นการจัดรูปแบบที่ดีที่สุดที่จะนำไปใช้.
เมื่อคุณคำนึงถึงคุณสมบัติใหม่ ๆ ของ CSS3 คุณจะรู้ได้ทันทีว่าสไตล์ของคุณเติมเต็มอย่างรวดเร็วเพียงใด และคุณสมบัติเหล่านี้จำนวนมากรองรับการคัดลอกเฉพาะเบราว์เซอร์ซึ่งต้องการรายการรหัสที่ซ้ำกันเกือบ (เช่นรัศมีเส้นขอบ) คุณสามารถตรวจสอบตัวอย่างของคุณสมบัติบล็อกที่ตั้งไว้ด้านล่างกำหนดเป้าหมาย div wrapper ตัวอย่าง.
.wrap display: block; การขยาย: 6px 10px; พื้นหลัง: #FFF; รัศมีเส้นขอบ: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
ทั้งสองวิธีในการเขียน CSS นั้นดีกว่าแบบอื่นโดยเฉพาะ ในที่สุดมันก็เป็นทางเลือกของคุณในฐานะนักพัฒนาที่คุณต้องการสไตล์และแม้กระทั่งสิ่งนี้จะเป็นไปตามโครงการที่คุณทำงาน เป็นเรื่องปกติที่จะหา CSS ที่นักออกแบบได้ผสมกัน! โดยส่วนตัวฉันรู้สึกอย่างนั้น “กำลังดำเนินการ” มีแนวโน้มที่จะง่ายขึ้นด้วยสไตล์บล็อกเนื่องจากฉันตรวจสอบสไตล์ชีทอย่างต่อเนื่องเพื่อทำการแก้ไขหรือเพิ่มเติม แต่สำหรับโดเมนที่มีปริมาณการใช้งานมากการลดขนาดไฟล์ CSS ของคุณเป็นวิธีที่ดีที่สุด.
รักษาพวกเขาให้ผอม
ด้วยการใช้รหัสย่อจำนวนมากที่มีอยู่ใน CSS3 คุณสามารถประหยัดเวลาในการพัฒนาได้มาก การแก้ไของค์ประกอบ HTML จะกลายเป็นเรื่องง่ายขึ้นมากเมื่อคุณเข้าใจศัพท์แสงที่ประหยัดเวลานี้ นอกจากนี้รหัสของคุณจะดูสะอาดตายิ่งขึ้นและดูง่ายขึ้น.
ข้อเสียเพียงอย่างเดียวคือไม่ใช่ทุกเบราว์เซอร์ที่สนับสนุนคุณสมบัติเหล่านี้อย่างเต็มที่ มีวิธีแก้ไขสำหรับปัญหาที่มีอยู่มากมายเช่นใน Internet Explorer และ Netscape โชคดีที่เว็บมีความคืบหน้าอยู่เสมอและเมื่อ CSS3 ได้รับความนิยมเพิ่มขึ้นอย่างไม่ต้องสงสัยเราจะได้สัมผัสกับการเติบโตของความเข้ากันได้ของเบราว์เซอร์ด้วย.
RGBa Color Transparency / Opacity
RGBavalue ใหม่นั้นไม่ใช่ CSS3 คุณสมบัติ, แต่ อัลฟ่าโปร่งใสเป็น CSS3 เฉพาะเท่านั้น. แทนที่จะเป็นค่าทั่วไป "สีแดงสีเขียวสีน้ำเงิน" ที่คุณส่งผ่านเพื่อให้ได้สีคุณสามารถทำได้ในตอนนี้ รวมถึงตัวเลือกที่สี่ของความโปร่งใสของสี. ด้วยเหตุนี้นักพัฒนาเว็บจึงทำ PNG แบบโปร่งใสเกือบทั้งหมด.
ไวยากรณ์พื้นฐานต้องการค่าตั้งแต่ 0-255 ในสามช่องแรก (3) และ 0-1.0 ในตำแหน่งอัลฟ่า ช่วงสีมีความเฉพาะสำหรับแต่ละเฉดสี (RGB) ที่มองเห็นได้โดยที่ 0 ไม่มีอะไรเลยและเต็ม 255.
/ ** ไวยากรณ์ ** / พื้นหลัง: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** ตัวอย่าง ** / div background: rgba (255, 255, 255, 0.3);
ความเข้ากันได้ข้ามเบราว์เซอร์
คุณสมบัติอื่น ความทึบแสง สามารถใช้ในบางสถานการณ์ อย่างไรก็ตามสิ่งนี้จะส่งผลต่อองค์ประกอบ HTML ทั้งหมดและเนื้อหาภายในไม่ใช่เพียงแค่พื้นหลังที่คุณเห็นในตัวอย่างของฉัน.
น่าเสียดายที่ Internet Explorer ยังไม่รองรับค่าสี RGBa ในขณะนี้ โดยทั่วไปคุณควรรวมคุณสมบัติทางเลือกด้วยความทึบเต็มสำหรับเบราว์เซอร์ที่ไม่ได้มาตรฐาน คุณตั้งค่านี้ด้วยค่าเดียวกัน แต่ไม่รวมค่าที่ 4 (ความทึบ) มันจะมีลักษณะเหมือน rgba (255, 255, 255)
นอกจากนี้ Internet Explorer สามารถจัดการได้มากขึ้นอย่างนุ่มนวลผ่านเงื่อนไข คุณสามารถตรวจสอบว่าเบราว์เซอร์นั้นใช้งาน IE อยู่หรือไม่และแสดงตัวกรอง Microsoft CSS ที่เป็นกรรมสิทธิ์ตามคำสั่ง ฉันได้สาธิตเรื่องนี้ในตัวอย่างด้านล่าง (โปรดสังเกตว่าสิ่งนี้จะปรากฏที่ใดที่หนึ่งในไฟล์ HTML ของคุณ):
รัศมีชายแดน CSS3
ฉันได้อ่านหัวข้อฟอรัมที่สร้างความสับสนเกี่ยวกับการสร้างขอบโค้งมนด้วย CSS3 - ไม่มากนักเกี่ยวกับวิธีการทำ แต่ด้วยการสนับสนุนเบราว์เซอร์ที่พิถีพิถันนักพัฒนาเว็บกำลังดิ้นรนหารหัสที่ง่ายที่สุดในการทำงาน.
/ ** ไวยากรณ์ ** / รัศมีเส้นขอบ: ด้านบนซ้ายบนขวาล่างขวาล่างซ้าย
border-radius พร็อพเพอร์ตี้แบ่งปันไวยากรณ์ที่คล้ายกันกับการสร้างเส้นขอบมาตรฐานยกเว้นในกรณีนี้เรากำหนดเป้าหมายมุมกล่อง สถานที่ให้บริการนี้จะยอมรับค่า 1 - 4 และพวกเขาแต่ละเป้าหมายการตั้งค่ามุมที่แตกต่างกัน.
- 1 ค่า: มุมทั้งสี่ถูกปัดเศษเป็นค่าเดียวกัน
- 2 ค่า: ค่าแรกนำไปใช้กับ
บนซ้ายและด้านล่างขวาในขณะที่ค่าที่สองกระทบด้านบนขวาและล่างซ้าย - 3 ค่า: ก่อนอื่นนำไปใช้กับ
บนซ้ายมุมที่สองคือทั้งล่างซ้าย&ด้านบนขวาในขณะที่ใช้ค่าที่ 3 และค่าสุดท้ายด้านล่างขวา - 4 ค่า: ทั้งสี่ค่าของมุมเป้าหมายตามลำดับต่อไปนี้: บนซ้าย, ขวาบน, ล่างขวา, ซ้ายล่าง
/ ** ตัวอย่าง ** / div เส้นขอบรัศมี: 4px 4px 8px 4px; div เส้นขอบรัศมี: 4px 4px 8px;
ดังนั้นในรหัสข้างต้นเรากำลังใช้ border-radius เพื่อใช้เอฟเฟ็กต์แบบ 4px กับทุกสิ่งยกเว้น ด้านล่างขวา เส้นขอบซึ่งได้รับโค้ง 8px เรียบ หากคุณสังเกตว่ารหัสทั้งสองนี้จะใช้เอฟเฟกต์ลักษณะเดียวกันจริง ๆ.
ความเข้ากันได้ข้ามเบราว์เซอร์
ตอนนี้ปัญหาหลักคือว่า border-radius รองรับเบราว์เซอร์บางตัวเท่านั้น Internet Explorer 9 เพิ่งเพิ่มการสนับสนุนที่ดีเยี่ยมและ Opera จะแสดงผลนี้เช่นกัน อย่างไรก็ตามแม้ Opera ได้สร้างทรัพย์สินของตัวเองด้วย -o-border-radius กำหนดเป้าหมายเครื่องมือเบราว์เซอร์เฉพาะของพวกเขา นอกจากนี้ -moz-border-radius ได้รับการสนับสนุนโดยซอฟต์แวร์ Firefox / Gecko และ -WebKit-border-radius สำหรับ Google Chrome / Safari.
รหัสด้านล่างเป็นตัวอย่างของเทมเพลตกระดูกของฉันสำหรับสร้างมุมโค้งมนด้วยการสนับสนุนเบราว์เซอร์ระดับโลกที่ใหญ่ที่สุด.
div เส้นขอบรัศมี: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;
แฟนซีเงาตก?
อีกแง่มุมที่น่ากลัวจริงๆของ CSS3 คือการสนับสนุน กล่อง และ เงาข้อความ. นี่เป็นปัญหาสำหรับนักพัฒนาในอดีตเนื่องจากภาพพื้นหลังเป็นตัวเลือกที่เหมือนจริงเท่านั้น ไวยากรณ์นี้ตามหลังบทบาทชวเลขที่ง่ายกว่าคุณสมบัติอื่น ๆ ที่เราครอบคลุม มันเป็นเรื่องยากที่จะจำลำดับที่เหมาะสมของค่าคีย์ในตอนแรก - แต่ยิ่งคุณฝึกฝนมากเท่าไหร่ก็จะยิ่งง่ายขึ้นเท่านั้น.
น่าเสียดายที่ Internet Explorer เป็นสิ่งแปลกใหม่อีกครั้ง เบราว์เซอร์หลักอื่น ๆ รวมถึง Firefox, Google Chrome, Safari และ Opera รองรับอย่างเต็มที่ ข้อความเงา คุณสมบัติ นักพัฒนาได้พยายามสร้างการสนับสนุน IE ของตัวเองใน แต่ก็ยังมีข้อ จำกัด มาก ไวยากรณ์พื้นฐานถูกเขียนดังนี้:
/ ** ไวยากรณ์ ** / text-shadow: x-offset y-offset สีเบลอรัศมี / ** ตัวอย่าง ** / div text-shadow: 2px 2px 1px # 111;
อ็อฟเซ็ต X และ Y บอกเบราว์เซอร์ว่าเงาควรจะอยู่ทางขวาและล่างมากน้อยเพียงใด คุณสามารถใช้ค่าลบเพื่อจัดวางเงาด้านบนและด้านซ้ายตามลำดับ แต่นี่ออกมาดูเคอะเขินมากดังนั้นฉันแนะนำจำนวนเต็มบวก นอกจากนี้ยังสามารถใช้ค่าเบลอรัศมีเพื่อปรับขอบแข็งให้เรียบหากเงาของข้อความปรากฏผิดธรรมชาติ.
ไวยากรณ์นี้เป็นเพียงการดูสัญลักษณ์พื้นฐานเมื่อสร้างเอฟเฟกต์เงาเพียงครั้งเดียว นักออกแบบขั้นสูงได้ทำการศึกษาเพื่อสร้างเงาหลายอันพร้อมกัน! ฉันอ้างอิงโพสต์บล็อกที่ยอดเยี่ยมนี้ตั้งแต่เดือนเมษายน 2011 ซึ่งมีรายละเอียดที่ดีเยี่ยมเกี่ยวกับเงาของข้อความ หากคุณมีเวลาให้อ่านเนื้อหาเพื่อรับทราบคุณลักษณะขั้นสูงเพิ่มเติมและอย่าลืมคั่นหน้าไว้เป็นข้อมูลอ้างอิงในอนาคต!
ความเข้ากันได้ข้ามเบราว์เซอร์
สิ่งที่น่าสนใจที่สุดที่เราพบคือ Internet Explorer ครั้งแล้วครั้งเล่า Microsoft ได้เปิดตัวเครื่องมือแสดงผลเบราว์เซอร์ของตัวเองซึ่งได้ดำเนินการย่อยที่ดีที่สุด แม้ตอนนี้ด้วย CSS3 ที่จะครองราชย์ด้วยเงาข้อความ แต่ IE ก็ยังอยู่เบื้องหลัง มีเว็บไซต์ตัวอย่างที่ยอดเยี่ยมที่คุณสามารถค้นหาตัวอย่างโค้ดและความคิดเห็นตามเงื่อนไข CSS แบบดั้งเดิม.
โดยทั่วไปคุณต้องการตรวจสอบว่าเบราว์เซอร์ที่ผู้ใช้ของคุณกำลังทำงานอยู่นั้นตรงกับ Internet Explorer 9 หรือรุ่นที่ต่ำกว่า จากนั้นใช้ตัวกรอง MS เราสามารถใช้เงากับองค์ประกอบข้อความใด ๆ (ด้านบนเราใช้ย่อหน้า).
ผ่อนคลายการเปลี่ยน
CSS3 การเปลี่ยนแปลง เป็นสถานที่ให้บริการที่ร้อนแรงที่สุดในตลาดการออกแบบตั้งแต่ flapjacks ยาย! นักออกแบบเว็บไซต์ได้สร้างความยุ่งยากเกี่ยวกับการเปลี่ยน CSS อย่างแท้จริงถึงแม้ว่าการสนับสนุนจะ จำกัด เฉพาะเบราว์เซอร์ Webkit เป็นหลัก แน่นอนคุณสามารถใช้คุณสมบัติรองสำหรับ Mozilla และ Opera และอื่น ๆ แต่สัญกรณ์จดชวเลขเป็นเรื่องที่น่าสนใจจริงๆโดยเฉพาะอย่างยิ่งถ้าคุณต่อต้านภาพเคลื่อนไหว JavaScript ด้วยเหตุผลใดก็ตาม.
ก่อนอื่นเรามาดูคุณสมบัติการเปลี่ยนแปลงดั้งเดิม สิ่งนี้จะต้องมี 4 ค่าซึ่งคุณสามารถแยกย่อยเป็นคุณสมบัติได้ด้วยตนเอง พวกเขาสอดคล้องกับการเปลี่ยนแปลง คุณสมบัติ(ผลคืออะไร), ระยะเวลา(จะวาดออกมานานเท่าไหร่), การกำหนดเวลาการทำงาน(การเปลี่ยนแปลงความเร็วของภาพเคลื่อนไหว) และ ความล่าช้า(จำนวนวินาทีที่ต้องรอก่อนเคลื่อนไหว).
/ ** ไวยากรณ์ ** / transition: ระยะเวลาคุณสมบัติล่าช้าฟังก์ชั่นจับเวลา; / ** ตัวอย่าง ** / img transition-property: opacity; การเปลี่ยนระยะเวลา: 2 วินาที; การเปลี่ยนจังหวะฟังก์ชั่น: ความง่ายในการ; การเปลี่ยนแปลงล่าช้า: 0.5 วินาที;
คุณควรเข้าใจถึงจุดประสงค์ของคุณสมบัติเหล่านี้ส่วนใหญ่ยกเว้นฟังก์ชั่นกำหนดเวลา แม้ว่าจะสับสนในตอนแรกคุณสมบัตินี้เพียงแค่ทำให้การเปลี่ยนแปลงของคุณแตกต่างกันดังนั้นเอฟเฟกต์จะเริ่มช้าลงสิ้นสุดช้าลงหรือสิ่งที่คล้ายกัน.
W3 โรงเรียนมีฟังก์ชั่นจับเวลาเอกสารออนไลน์ซึ่งแสดงรายการค่าที่เป็นไปได้ทั้งหมดที่คุณสามารถลองใช้ได้ ฉันพบว่าตัวเองเป็น Google อย่างสม่ำเสมอสำหรับคำแนะนำเหล่านี้ แต่พวกเขาก็ทำที่คั่นหนังสือที่มีประโยชน์.
ความเข้ากันได้ข้ามเบราว์เซอร์
ตอนนี้เราจะนำการสนับสนุนเบราว์เซอร์เต็มรูปแบบมาเล่น โดยค่าเริ่มต้นคุณสมบัติการเปลี่ยนแปลงคือ เท่านั้น สนับสนุนโดย Safari เวอร์ชั่นใหม่กว่า ผู้ใช้หลายคนยังคงต้องการ -WebKit คำนำหน้าซึ่งใช้กับ Google Chrome และเครื่องมือการแสดงผลที่คล้ายกัน ด้านล่างเป็น “สรุป” เทมเพลตบล็อครหัสฉันขอแนะนำให้บันทึกและใช้หากคุณต้องการการสนับสนุนการเปลี่ยนแปลงจากเว็บเบราว์เซอร์ส่วนใหญ่.
img ช่วงเปลี่ยนภาพ: ความทึบแสง 2s ง่ายใน 1 วินาที; -webkit-transition: opacity 2s ความง่ายใน 1s; / * chrome, Safari, flock * / -moz-transition: opacity 2s ง่ายใน 1s; / * mozilla + gecko * / -o-transition: opacity 2s ความง่ายใน 1s; / * opera * /
ผลข้อความจังหวะ
คุณสมบัตินี้มีขนาดไม่ใหญ่นักและคุณจะไม่พบนักออกแบบเว็บไซต์จำนวนมากที่ใช้งานอยู่ในปัจจุบัน แต่คุณสามารถใช้ ข้อความจังหวะ เพื่อสร้างเอฟเฟกต์ที่ประณีตด้วยแบบอักษรของคุณ เบราว์เซอร์ Webkit เช่น Safari และ Chrome เป็นผู้สนับสนุนที่แท้จริงเพียงรายเดียวของสถานที่ให้บริการแห่งนี้ Opera และ Firefox มีปัญหาในการแสดงวัตถุข้อความที่มีโครงร่างเหมือนกัน.
/ ** ไวยากรณ์ ** / p -webkit-text-stroke: สีความกว้าง; / ** ตัวอย่าง ** / p -webkit-text-stroke: 1px # 222;
ความเข้ากันได้ข้ามเบราว์เซอร์
หากคุณรู้สึกว่าต้องมีเอฟเฟ็กต์จังหวะข้อความคุณควรใส่สีสำรองไว้เสมอ Mozilla และ Opera สามารถเข้าใช้ได้ แต่ผู้ใช้ Internet Explorer ไม่มีตัวเลือกอื่น น่าเศร้าที่นี่เป็นหนึ่งในคุณสมบัติ CSS3 ที่ใหม่กว่าซึ่งเพิ่งไม่ได้รับการสนับสนุนเพียงพอจากชุมชนนักพัฒนาเว็บเบราว์เซอร์ คุณควรใช้เวลาเล่นกับเครื่องมือเว็บที่ยอดเยี่ยมนี้สร้างขึ้นโดยเฉพาะสำหรับการสร้างโครงร่างข้อความ CSS3 เหล่านี้.
กล่องขนาด
คุณสมบัติการปรับขนาดกล่องช่วยให้คุณสามารถควบคุมความกว้าง / ความสูงทั้งหมดขององค์ประกอบบล็อกได้มากขึ้น โดยค่าเริ่มต้นความกว้าง / ความสูง + ชายแดน + ระยะขอบ + ช่องว่างภายในทำขึ้นขนาดรวมของกล่อง อย่างไรก็ตามการใช้เส้นขอบบนเนื้อหาของคุณผลักดันการขยายและขอบทั้งหมดของคุณ ขาเข้า เพื่อรักษาความกว้างเหมือนกันทุกประการ มีเพียงสองค่าสำหรับคุณสมบัตินี้ด้วย เนื้อหากล่อง เป็นค่าเริ่มต้น.
div width: 550px; การขยาย: 9px; ขนาดกล่อง: ชายแดนกล่อง; / * width จะอยู่ที่ 550px * /
ในขณะที่คุณสามารถจินตนาการว่าสิ่งนี้จะมีประโยชน์ในบางช่วงระหว่างอาชีพ CSS ของคุณ การเว้นระยะห่างและระยะขอบอาจเป็นความเจ็บปวดที่แท้จริงและเมื่อคุณเพิ่มในเส้นขอบคุณมักจะสูญเสียการติดตามพิกเซล.
ความเข้ากันได้ข้ามเบราว์เซอร์
Opera และ IE 8 รองรับคุณสมบัติใหม่นี้เป็นค่าเริ่มต้น IE7 และด้านล่างติดอยู่กับการตั้งค่ากล่องเนื้อหาเว้นแต่ว่าผู้เยี่ยมชมของคุณกำลังใช้โหมดแปลก ๆ ข้อมูลเพิ่มเติมเพียงอย่างเดียวที่คุณควรรู้เกี่ยวกับเครื่องมือเบราว์เซอร์ที่ขับเคลื่อนโดย Mozilla และ webkit.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / ขนาดกล่อง: เส้นขอบกล่อง; / * Opera / IE8 + * /
Pure CSS3 Columns
คอลัมน์ค่อนข้างยุ่งยากกับ CSS3 แต่สามารถทำได้ด้วยรหัสขั้นต่ำ ที่พัก 2 แห่งที่คุณต้องการมุ่งเน้นคือ คอลัมน์นับ และ คอลัมน์ช่องว่าง. การนับจะอ้างอิงถึงจำนวนคอลัมน์ทั้งหมดที่คุณต้องการใช้ในขณะที่ช่องว่างนั้นสร้างระยะห่างระหว่างกัน.
div # cols จำนวนคอลัมน์: 3; คอลัมน์ช่องว่าง: 10px;
ในตัวอย่างของฉันเราสามารถดู ID #cols ที่ใช้เป็นที่เก็บ ข้างในเราแบ่ง div ออกเป็น 3 คอลัมน์โดยมีช่องว่าง 10px ระหว่างแต่ละอัน นอกจากนี้คุณสามารถตั้งค่า คอลัมน์กว้าง ซึ่งใช้ในการตั้งค่าความกว้างทั้งหมดของแต่ละคอลัมน์แทนการแสดงรายการตัวเลขที่เป็นของแข็ง.
ความเข้ากันได้ข้ามเบราว์เซอร์
สิ่งใดก่อน IE8 จะไม่สามารถใช้ประโยชน์จากคุณสมบัตินี้ได้ แต่อย่างที่เราเห็นในทุกตัวอย่าง Mozilla และ Webkit นำเสนอโซลูชันของตนเองสำหรับเบราว์เซอร์หลายตัว หากคุณต้องการเทมเพลตลองดูตัวอย่างเล็ก ๆ ของฉันด้านล่าง:
div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; จำนวนคอลัมน์: 3; คอลัมน์ช่องว่าง: 7px;
Custom @ font-face
คุณต้องเคยได้ยินเกี่ยวกับความตื่นเต้นของ CSS3 แบบอักษรที่กำหนดเอง การใช้คุณสมบัติ @ font-face เราสามารถนำเข้ารูปแบบตัวอักษรภายนอกและใช้สิ่งเหล่านี้ได้เหมือนกับตระกูลอื่น ๆ ไวยากรณ์ค่อนข้างซับซ้อนและคุณจะต้องใช้เวลาในการทำให้ถูกต้อง บล็อกสำหรับ @ font-face จะใช้ในการกำหนดชื่อครอบครัวหลังจากนั้นคุณสามารถใช้สิ่งนี้ในของคุณ font-family คุณสมบัติทุกที่!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Internet Explorer เท่านั้น * / ดังนั้นคุณจะเห็นด้านบนฉันไม่ได้กำหนดเป้าหมายแบบอักษรใด ๆ ที่เฉพาะเจาะจง แต่ไวยากรณ์คือสิ่งที่ควรโดดเด่น ขอให้สังเกตว่า Internet Explorer รองรับเท่านั้น .EOT ประเภทตัวอักษรในขณะที่ .TTF และ .OTF เป็นตัวเลือกยอดนิยมสำหรับเบราว์เซอร์อื่น ที่สำคัญคุณควรเข้าใจว่าคุณสามารถส่งผ่าน URL แบบอักษรได้จากลิงก์โดยตรงเช่น. URL ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
การตั้งค่านี้ไม่มีปัญหาข้ามเบราว์เซอร์จริงเนื่องจากเอ็นจิ้นการเรนเดอร์ทั้งหมดสามารถแยกประเภทไฟล์ฟอนต์เหล่านี้ได้ เพียงจำไว้ว่าสำหรับการรองรับ IE คุณต้องรวมรุ่น eot รวมถึงต้นฉบับของคุณ ฉันรู้สึกว่าบทความโรงเรียน W3 มีแคตตาล็อกข้อมูลที่สำคัญที่สุดที่คุณควรตรวจสอบ.
การแปลงเป็น CSS จิ๋ว
หัวข้อนี้จะถกเถียงกันบ่อยครั้งเนื่องจากมีจุดประสงค์ที่แตกต่างกันสำหรับแต่ละโครงการ ในอีกด้านหนึ่งนักพัฒนาเว็บใช้เวลาส่วนใหญ่ในการเขียนสไตล์ชีทของพวกเขา ไม่มีวิธีในการเข้ารหัสข้อมูลข้อความธรรมดาประเภทนี้และซ่อนจากการสอดแนม หากคุณพยายามที่จะป้องกันไม่ให้คนอื่นขโมยโค้ดของคุณอย่างโจ่งแจ้งที่สุดคุณสามารถทำได้คือการจัดระเบียบสไตล์และลบตัวแบ่งบรรทัด / ช่องว่าง.
กระบวนการนี้สามารถติดป้ายว่า miniaturizing รหัสของคุณ โดยทั่วไปนักพัฒนาจะเขียน CSS ในรูปแบบมาตรฐานแล้วลบช่องว่างทั้งหมดก่อนอัปโหลดไปยังเว็บเซิร์ฟเวอร์ จากนั้นคุณมีสำเนาโลคัลเพื่อแก้ไขอย่างรวดเร็วพร้อมกับจัดทำเวอร์ชันที่เล็กกว่าในโครงการถ่ายทอดสด เห็นได้ชัดว่าวิธีการนี้มีประโยชน์ในการลดการโหลดหน้าเว็บรวมถึงการรักษาโค้ดไฮแจ็คเกอร์.
ลิงค์ที่ฉันโพสต์ด้านบนนำไปสู่การลดขนาด CSS มีเนื้อหาการอ่านที่ยอดเยี่ยมในเรื่อง ไซต์ยังมีเครื่องมือที่ใช้เบราว์เซอร์สำหรับการลบช่องว่างและการส่งคืนคีย์ดังกล่าวจากรหัสของคุณ CSS Compressor เป็นอีกทางเลือกหนึ่งในการเล่นอินเตอร์เฟสที่เรียบง่ายซึ่งทำงานโดยตรงภายในเว็บเบราว์เซอร์ของคุณ ฉันเคยได้ยินสิ่งดีๆเกี่ยวกับ Clean CSS ถึงแม้ว่าฉันจะไม่เคยใช้แอพด้วยตัวเอง.
ลิ้งค์ที่มีความเกี่ยวข้อง
เพื่อให้คุณก้าวไปข้างหน้าฉันได้จัดเตรียมลิงก์ที่มีประโยชน์หกลิงก์จากเว็บ สิ่งเหล่านี้รวมถึงการจดชวเลขเพียงอย่างเดียว แต่ยังมีคำแนะนำและแบบฝึกหัดที่เป็นประโยชน์ในการเข้าถึงเมื่อฝึกใช้โค้ด CSS ชวเลขใหม่.
- คู่มือการเริ่มต้นของ CSS3
- คู่มือ CSS ชวเลข
- คุณใช้ CSS3 อย่างเหมาะสม?
- เนื้อหา CSS และแผนภูมิความเข้ากันได้ของเบราว์เซอร์
- CSS3 + Progressive Enhancement = การออกแบบที่ชาญฉลาด
- กรอกดัชนีคุณสมบัติ CSS / CSS3 ให้สมบูรณ์
ข้อสรุป
ต้องใช้ความทุ่มเทและฝึกฝนการเขียนโค้ด CSS เพื่อสร้างกำหนดการที่เป็นรูปธรรมซึ่งคุณสามารถติดตามสำหรับแต่ละโครงการ นักออกแบบเว็บไซต์ส่วนใหญ่ยินดีที่จะรับโครงการและแนวคิดใหม่ ๆ ดังนั้นคุณจะได้พบกับเวลาในการฝึกฝนเคล็ดลับการเข้ารหัสที่เป็นประโยชน์เหล่านี้ ลองคัดลอกแผ่นอ้างอิงขนาดเล็กเพื่อความสะดวกของคุณเองในกรณีที่คุณไม่พบเอกสารโกงหรือแย่กว่านั้นคือคุณขาดการเชื่อมต่ออินเทอร์เน็ต!
คุณรู้จักคุณสมบัติหรือทางลัดอื่น ๆ ของ CSS3 หรือไม่? เราชอบที่จะได้ยินความคิดและความคิดของคุณในการแสดงความคิดเห็นการอภิปราย นักพัฒนาเว็บกำลังผลักดันให้มีมาตรฐานมากขึ้นภายใน W3C และเห็นได้ชัดว่าการเปลี่ยนผ่านเริ่มง่ายขึ้น CSS3 ให้ประโยชน์ที่ยอดเยี่ยมและถ้าคุณสามารถเขียนโค้ดชวเลขและต้นแบบได้จะทำให้ขนาดไฟล์ของคุณต่ำและป้องกันการลอกเลียนแบบโค้ดของคุณ.
