ได้อ่านในบล็อกนี้บาง ... คิดว่ามันเป็นที่ดีที่จะแคตตาล็อกนี้ไว้เพื่ออ้างอิงในอนาคต .... ยังอาจเป็นคำถามสัมภาษณ์สิ่งสำคัญที่คุณจะถามบางวัน ....
เขียนตัวอย่างของ CSS ที่จะแสดงวรรคสีน้ำเงินในเบราว์เซอร์รุ่นเก่าสีแดงในเบราว์เซอร์รุ่นใหม่สีเขียวใน IE6 และ IE7 ในสีดำ
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re ขี่จักรยานเป็น Buzzword และในการพัฒนาเว็บก็หมายความว่าไม่แตกต่างกัน มันอนุรักษ์พลังงานในแง่ของความพยายาม!
กว่าปีของการเขียน CSS และ HTML สร้างจากการออกแบบที่ผมได้ปฏิบัติตามวิธีปฏิบัติที่ดีที่สุดไม่กี่ในการแสวงหาของการประหยัดเวลาและพลังงานในสิ่งที่เรามักระยะขณะที่ "Re-ประดิษฐ์ล้อ" เวลาและเวลาอีกครั้งที่ฉันได้บอกกับตัวเองว่าฉันจะต้องสร้างแม่แบบที่ไม่กี่บาง CSS ใหม่ใช้งานมาตรฐานที่ผมจะใช้ออกจากช่องในการทำงานในอนาคตของฉัน แม้ว่าไม่สมบูรณ์ แต่ฉันจัดการเพื่อให้บรรลุเป้าหมายบางอย่าง
ในการต่อไป, กลับมาใช้ของ CSS, ฉันได้ดูที่กรอบ CSS น้อยที่มักมีให้เราและตัดสินใจที่จะนำพวกเขาที่จะใช้เป็นเหล่านี้จะมีการทดลองและทดสอบและสร้างโดยนักพัฒนาที่มีประสบการณ์มากขึ้นกว่าตัวเอง ที่สำคัญ "หลีกเลี่ยงประดิษฐ์"
แม้ว่าความรู้ทั่วไปเพื่อทหารผ่านศึกที่ฉันได้พยายามที่จะใช้ปากกาบางคีย์แนวคิด / ปฏิบัติที่ดีที่สุด / ความคิดที่ได้ไปในการสร้างกรอบเหล่านี้เพื่อให้ RE ขี่จักรยานของ CSS ที่เป็นไปได้ หวังนี้จะช่วยให้นักพัฒนา CSS บางคนเป็นเพียงเกี่ยวกับการและเมื่อเร็ว ๆ นี้ผู้โดยสาร bandwagon CSS!
ใช้การตั้งชื่อ
นี้จะต้องมีปัจจัยที่สำคัญที่สุดในการทำให้ CSS / HTML ใหม่ใช้งาน ให้สอดคล้องกับชื่อองค์ประกอบของหน้าช่วยให้กลับมาใช้ชิ้นส่วนหน้าและรูปแบบของพวกเขามีน้อยหรือการปรับเปลี่ยน ในบรรทัดที่มีอาร์กิวเมนต์นี้แม้ HTML5 ในการเปลี่ยนแปลงการเปลี่ยนแปลงที่สำคัญกว่ารุ่นก่อนของคือการแนะนำบาง ได้แก่ แท็กที่มีโครงสร้าง <article>, <section>, <header>, <aside> และ <nav> [ อะไร HTML5 จะนำมา? ] แม้แต่กับ HTML 4 (หรือต่ำ) ที่ดีที่สุดคือการตั้งชื่อส่วนมาตรฐานของหน้าเว็บของคุณ consistanly เช่นในตัวอย่างง่ายๆด้านล่าง ...
จำไว้หน้ามากที่สุดเกี่ยวกับโครงการของคุณท้ายมีองค์ประกอบหลักที่มีโครงสร้างเดียวกัน ระบุเหล่านี้องค์ประกอบของหน้าหลักที่พบบ่อย ....
id="container"> <div <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ div>
รีเซ็ตลักษณะเริ่มต้น (CSS รีเซ็ต): ไม่ว่าคุณจะใช้กรอบหรือเขียนของคุณเองคุณจะต้องให้ CSS รีเซ็ต [ อะไร CSS รีเซ็ตคืออะไร? ] เช่นที่พวกเขาลดหรือขจัดความไม่สอดคล้องกันในบางครั้งภาพที่เกิดขึ้นระหว่างเบราว์เซอร์ต่างๆ ในคำง่ายๆกลไกรีเซ็ต CSS กำหนดรูปแบบขององค์ประกอบ HTML ไปเป็นค่าศูนย์หรือโมฆะจึงเอาชนะใด ๆ ที่เป็นค่าเริ่มต้นเบราว์เซอร์อาจจะโพสท่า นี้จะให้กระดานชนวนที่สะอาดเพื่อกำหนดคุณสมบัติของเหล่านี้เป็นโมฆะองค์ประกอบใด ๆ Defaults User-Agent [ ตัวแทนผู้ใช้ CSS2.1 Defaults สไตล์ชีต ] ทั้งหมดกรอบ CSS จะมีกลไกการตั้งค่าใหม่ ถ้าคุณเขียนคุณเอง CSS รีเซ็ต, คำเตือนก็คือว่าถ้าคุณเกิดลืมที่จะตั้งค่าคุณสมบัติที่สำคัญมันอาจนำไปสู่ปัญหาข้ามเบราว์เซอร์ที่มีความยากมากที่จะแก้ปัญหา จำไว้ว่าเก็บสำเนาของรูปแบบการตั้งค่าและวางไว้ในแต่ละโครงการใหม่ที่คุณสร้างขึ้น
ร่างกาย, div, DL, DT, วัน, UL, ol, li, H1, H2, H3, H4, H5, H6, ก่อนฟอร์ม, fieldset, อินพุทให้เลือก, textarea, p, ยกข้อความทั้งย่อหน้า, ตาราง, th, td { border: 0px; margin: 0; padding: 0; }
ค่าเริ่มต้นของการตั้งค่า (ลักษณะพื้นฐาน) ถึงองค์ประกอบ:
หลังจากที่คุณได้ตั้งค่า (ให้เป็นศูนย์หรือ null) ค่าเริ่มต้นของคุณลักษณะบางอย่างขององค์ประกอบ HTML บางอย่างมันเป็นสิ่งจำเป็นในการใช้ลักษณะบางอย่างระหว่างอินสแตนซ์ขององค์ประกอบเหล่านี้ทุก ตั้งค่าเริ่มต้นเหล่านี้อาจแตกต่างกันไปตามการออกแบบหรือตามแนวทางปฏิบัติที่ดีที่คุณทำตาม
ส่วนใหญ่กรอบ CSS, เสมอแนะนำเริ่มต้นใหม่บางนอกเหนือไปจากรูปแบบการตั้งค่าเริ่มต้นเบราว์เซอร์
ค่าเริ่มต้นเหล่านี้เป็นโมฆะของค่าเริ่มต้นของ User-Agent (ปล้นไปโดยตั้งค่าใหม่ CSS) เหล่านี้จะสอดคล้องกันเบราว์เซอร์
โปรดจำไว้ว่ารูปแบบพื้นฐานที่ใช้ในการกำหนดรูปแบบที่จะนำมาใช้ในการออกแบบกว้าง ยกตัวอย่างเช่น
html {font-size: 77%; font-family: Arial, sans-serif;} ที่แข็งแกร่ง, H1, H2, H3, H4, H5, H6 {font-น้ำหนัก: หนา;}
ลักษณะบทคัดย่อสำหรับส่วนประกอบ HTML สามัญและระดับชั้นสามัญ:
โครงการส่วนใหญ่ประกอบด้วยหลายหน้าจะมีองค์ประกอบ HTML ทั่วไปที่ใช้ในเว็บไซต์สำหรับการจัดเรียงของรูปแบบการแจ้งเตือนและข้อผิดพลาด, ป๊อปอัปที่กำหนดเอง, LightBoxes ฯลฯ เช่นบางคนตั้งแต่องค์ประกอบดังกล่าวถูกนำมาใช้ซ้ำแล้วซ้ำอีกตลอดทั้งโครงการที่จะเป็นประโยชน์ในการให้บริการ ชุดชั้นเรียนที่เกี่ยวข้องกับรูปแบบที่กำหนดไว้ล่วงหน้าสำหรับส่วนประกอบเหล่านี้และคุณสามารถช่วยตัวเองมากเวลา
นอกเหนือจากการกำหนดรูปแบบที่นำมาใช้ซ้ำคำจำกัดความสำหรับคอมโพเนนต์ของ HTML ร่วมกันเรียนรูปแบบนามธรรมที่เราสามารถที่เกี่ยวข้องกับวิชาการพิมพ์สีหรือแม้กระทั่งรูปแบบ ตัวผมเองมีแนวโน้มที่คุณใช้ ... ชั้นเรียนที่เหมือนกันเช่น Clearfix, Font08, FontGrey, AlignL, DisplayB ฯลฯ
ใส่แบบฟอร์ม {border: 0px; พื้นหลัง: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; ความสูง: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} แบบฟอร์ม textarea {border: 0px; พื้นหลัง: # FFFFFF; color: # 000000; font-size: .9 em; line-height: 1.5em; overflow: มองเห็นได้;} . fbold {font-น้ำหนัก: หนา; color: # cccccc;} . {color: # 666666;} fgrey . {color: # bbbbbb;} flightgrey . clearfix {clear: both;} แบ่ง {border-ชั้น: 1px solid # 647B06; พรมแดนด้านล่าง: 1px solid # 9CC00A; ความสูง: 0px;}. . displayb {display: block;}. displayn {display: none;} alignr {text-align: ขวา}.. alignc {text-align: ศูนย์} . floatr {ลอย: ขวา;}. floatl {float: left;}
การแก้ไขการ quirks เบราว์เซอร์ทั่วไป
เบราว์เซอร์ต่าง ๆ ใช้รหัส CSS และให้แตกต่างกันระดับของการสนับสนุนสำหรับคุณสมบัติของ CSS ผลจากการนี้ .... "Quirks เบราว์เซอร์" ว่านักพัฒนาที่เรามีเหลือที่จะแก้ไขปัญหา โดยเฉพาะอย่างยิ่ง IE6 หลอกหลอนผู้เขียนโคด CSS ส่วนใหญ่ที่มีกำหนดเส้นตายที่จะตอบสนอง ข่าวดีก็คือประสบการณ์ที่ได้มาร่วมกันแก้ไขไปได้ที่จะนำมาใช้ซ้ำปัญหาเหล่านี้ (เรียกว่าบ่อยครั้งที่เป็น CSS Hacks )
จำไว้ให้เหล่าแฮ็แก้ไข / ประโยชน์
/ * ซูมต่อไปนี้กฎข้อที่ 1 เป็นพิเศษสำหรับ IE6 + IE7 * / html *. clearfix, *:. แรกของเด็ก-+ HTML clearfix { ซูม: 1; }
ให้กลั่น CSS ของคุณ
ในที่สุด หากคุณมีแรงบันดาลใจและตั้งใจที่จะใช้อย่างใดอย่างหนึ่งหรือมากกว่าของกรอบ CSS, Heres เป็นรายการที่รวดเร็วของคนที่ได้รับความนิยมไม่กี่ ....
จำไว้ว่าใช้กรอบ CSS ไม่ได้หมายความว่าคุณมีความขี้เกียจที่จะสร้างของคุณเอง ... มันหมายถึงว่าคุณเป็นสมาร์ทที่จะเรียนรู้จากประสบการณ์ของผู้อื่นและความผิดพลาดประหยัดเวลาและเพิ่มผลผลิต!
CSS เสร็จดำรงอยู่ 10 ปีในปีนี้! บรรดาผู้ที่ได้รับรอบในขณะที่รายได้ขนมปัง (หรือไม่) ใช้ CSS ของพวกเขาแล้วคุณอาจตระหนักถึงวิธีการที่เราได้รับการอดอาหารเพื่อเลือกที่ดีของแบบอักษร แม้จะมีการขาดนักออกแบบตัวอักษรเช่นเดียวกับที่ที่ การ์เด้น CSS เซน ได้ทำให้การใช้ CSS ภาพพื้นหลังที่จะเปลี่ยนแบบอักษรในการแสวงหาความยุติธรรมในการดำเนินการบางอย่างเพื่อการออกแบบของพวกเขา เราได้พยายามยัง Flash / JavaScript hacks ®เพื่อให้บรรลุเป้าหมายในการออกแบบของเรา โดยไม่นี้เป็นวิธีที่ผิดที่จะได้รับแบบอักษรที่เราต้องการในการออกแบบเว็บของเรา แต่แน่นอนมันไม่ได้เป็นวิธีที่ต้องการมากที่สุด และมากกว่าปีที่ผ่านมานักออกแบบเว็บไซต์เช่นฉันได้อาศัยอย่างเต็มที่ในสิบหรือเพื่อให้แบบอักษรสำหรับการออกแบบของพวกเขา
การพัฒนาล่าสุดในเว็บมาตรฐานและรูปแบบตัวอักษรทำให้มันไปได้ที่จะแสดงข้อความ HTML ใน typefaces อื่นนอกเหนือจากที่เดียวกันแบบอักษรเริ่มต้นเก่า มาใน "@ fontface" decleration CSS
@ fontface provids วิธีการแก้ปัญหาที่จะเชื่อมโยงไปยังแฟ้มตัวอักษรที่เกิดขึ้นจริงและเรียกดูได้จากเว็บ การใช้ fontface @ นักออกแบบสามารถใช้แบบอักษรโดยไม่ต้องตรึงข้อความเป็นภาพพื้นหลัง การดำเนินงานเป็นอย่างมากตรงไปข้างหน้าดังที่แสดงด้านล่าง แต่เป็นทุกสิ่งที่ดีมีส่วน CON ให้มันเบราว์เซอร์ที่ไม่สนับสนุนคนเดียว "ประเภทของตัวอักษร" หากคุณกำลังวางแผนที่จะใช้ fontface @ ในไซต์ที่มีการกำหนดให้การสนับสนุนเบราว์เซอร์ข้ามแล้วคุณจะต้องให้แหล่งที่มาชนิดตัวอักษรต่างๆของเดียวกัน
โดยใช้ @ fontface
@ font-face { font-family: 'CalligraphyFLFRegular'; src: url ('CalligraphyFLF.eot'); src: ท้องถิ่น ('CalligraphyFLF'), ท้องถิ่น ('CalligraphyFLF') รูปแบบ url ('CalligraphyFLF.woff') ('woff'), url ('CalligraphyFLF.ttf') รูปแบบ ('TrueType'), url ('CalligraphyFLF 'รูปแบบ) (' svg # CalligraphyFLF svg '). } @ font-face { font-family: "แบบอักษรของคุณ"; src: url ("แบบอักษร / font_filename.eot"); src: ท้องถิ่น ("ชื่ออื่น") ท้องถิ่น ("Alternatename"), URL รูปแบบ ("แบบอักษร / font_filename.woff") ("woff"), URL รูปแบบ ("แบบอักษร / font_filename.otf") ("OpenType"), URL รูปแบบ ("แบบอักษร / font_filename.svg font_filename #") ("svg"); } h2 {font-family: "แบบอักษรของคุณ", จอร์เจีย, serif;}
ที่คุณสามารถดูจากตัวอย่างข้างต้นจะรวมตัวอักษรแบบอักษรเลือกหนึ่งที่มีการเชื่อมโยงไปยังชุดของ fonttypes สำหรับแบบอักษรเดียวกัน ดังนั้นคนเรียกมันว่า "Kit Font"
มีชุดตัวอักษรที่มีอยู่ที่ชัดเจนให้เชื่อมโยงกับสถานที่ให้บริการ CSS @ font-face ไปได้ภายใต้ข้อตกลงใบอนุญาตของผู้ใช้ (EULA) คือ
แหล่งข้อมูลที่เป็นประโยชน์ WebFont:
เวลาซ้ำแล้วซ้ำอีกเมื่อทุกเบราว์เซอร์อื่น ๆ ได้เห็นการทำงานเป็นไปตามที่บอกกฎ W3C, spirals IE คุณออกมาจากจิตวิญญาณการพัฒนาโดยการขว้างปาโกรธเคืองที่ไม่ได้ดูเหมือนจะมีการแก้ไข เพียงอย่างใดอย่างหนึ่งดังกล่าวเป็นปัญหาใน IE7 นี้
คำชี้แจงปัญหา:
ฉันและอื่น ๆ อาจจะหลาย ๆ นักพัฒนาเว็บที่ร้ายแรงได้สังเกตเห็นมากกว่าหลายครั้งที่เมื่อมีการซ้อนกันในรูปแบบที่ช่วยลอยตัวติดบนโฉบกว่าการเชื่อมโยงบางอย่าง (แท็กสมอ), ภาชนะที่มีดูเหมือนว่าจะเปลี่ยนไม่กี่พิกเซลไปทางขวา . ฉันได้พยายามแก้ปัญหาของ Google สำหรับปัญหานี้ แต่ได้พบแทบจะไม่ได้คำตอบที่เหมาะสมไปทำไมและเมื่อมันเกิดขึ้น (ที่อาจช่วยป้องกันปัญหาเหล่านี้เกิดขึ้น) ดังนั้นฉันไม่เคยพบวิธีการแก้ปัญหาที่ชัดเจนในการแก้ปัญหาอย่างใดอย่างหนึ่ง ...
ทางออกที่เป็นไป:
จากประสบการณ์ผมมีแจ้งให้ทราบล่วงหน้าร้อยละ 90% เท่านั่นคือว่าปัญหานี้ได้รับการแก้ไขโดยการเพิ่มคุณสมบัติซูมในความหมายของ CSS ภาชนะผิดพลาดพฤติกรรม ...
somediv # { ซูม: 1; }
อีกครั้งด้วยเหตุผลที่คลุมเครือ ... ลองนี้ ...
องค์ประกอบบางอย่างใน IE ได้ "hasLayout" สถานที่ให้บริการซึ่งเป็น "ความจริง" โดยค่าเริ่มต้น หลายพฤติกรรม CSS ภาพ; ตัวอย่างอัลฟากรองใช้งานได้เฉพาะในองค์ประกอบที่ hasLayout และ {ซูม: 1} ดูเหมือนว่าจะให้องค์ประกอบเป้าหมายสถานที่ให้บริการ hasLayout .... มีประโยชน์หรือไม่ I dont คิดดังนั้น ...
สถานที่ให้บริการซูมเข้ายังดูเหมือนว่าจะได้รับการสนับสนุนโดยโครเมี่ยม แต่อาศัยการใช้งานดูเหมือนจะทำให้ผลกระทบมากในรูปแบบของฉัน ... ลองถ้ามันเหมาะกับคุณ ... ถ้าไม่ได้ที่คั่นหน้านี้ภายใต้ "craps CSS"
เมื่อวานนี้หลังจากที่ปัญหาผมพบกับรีเซ็ต CSS ใน Google Chrome ... ฉันคิดว่าการขุดบิตลึกเข้าไปในพื้นที่ของผู้ใช้แผ่นแบบตัวแทน ...
พบข้อมูลตารางนี้ค่าเริ่มต้นของผู้ใช้ตัวแทน CSS2.1 แผ่นแบบ ... (สำหรับผู้ที่เผลอในสิ่งที่ "ผู้ใช้ตัวแทนแผ่นแบบ" ก็คือทำตาม สิ่งที่ผู้ใช้แผ่นแบบตัวแทน (Specification) .
สำหรับรายการทั้งหมดของ CSS ตัวแทนผู้ใช้เริ่มต้น 2.1 แผ่นแบบ คลิกที่นี่
เมื่อวานนี้ทุกอย่างอื่น ๆ "วัน Hog พื้น" ผมได้ทำงานในบางรูปแบบ CSS / tableless ทั้งหมดที่เกิดขึ้นได้ดีใน IE 7, FF 3 และโครมก็จนกว่าผมเห็นบางขอบยกเลิก ignorable เห็นเฉพาะใน Google Chrome แม้ว่าแปลกมากและ worring, มันเป็นข้อผิดพลาดบางปัญหา / ใหม่ที่ผมได้มาค่อนข้างสมเหตุสมผลมีจนเครื่องเทศบางอย่างในการทำงานทางโลกของฉัน เศร้า (แต่ดี) มันได้รับการแก้ไขภายในไม่กี่นาทีของหัว ...
โดยทั่วไปมันดูเหมือน Google Chrome ละเว้น CSS รีเซ็ตของฉัน (margin: 0px) มันจริงที่เกิดจากสไตล์ตัวแทนผู้ใช้ (-webkit-padding เริ่มต้น: 40px) ดังนั้นวิธีการแก้ปัญหาคือการตั้งค่ารูปแบบนี้โดยการตั้งค่า padding: 0 องค์ประกอบการทำงาน
วิธีที่ดีเพื่อป้องกันไม่ให้ปัญหาเหล่านี้เกิดขึ้นกับองค์ประกอบใด ๆ คือการใช้ CSS Rest ทั่วโลกดังนี้
* {margin: 0; padding: 0;}
ผู้ใช้แผ่นแบบตัวแทน (Specification) คืออะไร?
ข้อความที่ตัดตอนมาต่อไปนี้นำมาจาก http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ลิงค์ตามไปอ่านเพิ่มเติมเกี่ยวกับผู้ใช้แผ่นแบบตัวแทน
CSS 1 แนะนำความคิดโดยระบุว่าตัวแทนของผู้ใช้แต่ละคน (UA มักจะ 'เว็บเบราเซอร์' หรือ 'ลูกค้าเว็บ') จะมีสไตล์ชีตเริ่มต้นที่มีการจัดเอกสารในที่เหมาะสม - แต่โลกีย์ arguably - ลักษณะ CSS 2 กล่าวว่าสอดคล้องกับตัวแทนผู้ใช้ต้องใช้สไตล์ชีตเริ่มต้น (หรือประพฤติตัวเป็นหากพวกเขา) และที่สไตล์ชีตตัวแทนผู้ใช้ 's เริ่มต้นควรนำเสนอองค์ประกอบของภาษาเอกสารในรูปแบบที่ตอบสนองความคาดหวังของงานนำเสนอทั่วไปสำหรับภาษาเอกสาร; CSS 3 จะเป็นใจเดียวกัน
เนื่องจากคุณสมบัติของ CSS ปล่อยให้มันขึ้นไปการใช้งานว่าจะใช้ "ของจริง" สไตล์ชีตเริ่มต้นสำหรับการแสดงผลหรือไม่ก็ไม่น่าแปลกใจที่คุณจะไม่พบสไตล์ชีตเริ่มต้นในโฟลเดอร์ที่ติดตั้งเบราว์เซอร์ของทุก ซึ่งแตกต่างจากโปรแกรม Internet Explorer ของ Microsoft เช่นเดียวกับ Opera, ตัวอย่างเช่น (และเท่าที่ฉันรู้), เบราว์เซอร์ตุ๊กแกเช่น Firefox และ Netscape Navigator (มองหา "html.css") แต่ยัง Konqueror ทำให้มันค่อนข้างง่ายที่จะเข้าใจจัดแต่งทรงผมของพวกเขาเริ่มต้น
อีก Tut ฉบับย่อ ที่นี่สิ่งที่ง่ายและใช้พลังงานที่ดีของ CSS คือ ... แต่ก็ยากที่ concieve (และมันก็คือไม่ฉัน) จะเริ่มต้นด้วย เพิ่ม Dropshadow อาจจะมีชิ้นส่วนของเค้กสำหรับส่วนมากของเราโดยใช้เครื่องมือในการแก้ไขภาพเช่น Photoshop ฯลฯ ANF ดอกไม้ไฟบาง
เหตุผลที่ผมเลือกใช้สำหรับเงาโดยใช้ CSS ก็คือมักจะสร้างในขณะที่การออกแบบหน้า / html ของแอพลิเคชันที่ต้องการให้ซ้ำ สิ่งที่ฉันหมายถึงคือในเว็บไซต์ที่มีอยู่กับภาพจำนวนมากเช่นคนแสดง freinds หรือรายการแกลเลอรี่ภาพก็จะเป็นเรื่องยากที่จะประมวลผลความเร็วในการโหลดทั้งหมดของภาพที่ได้รับการยกเลิกการโหลดอยู่แล้วเพื่อเพิ่มหรือลบเงาเพื่อที่ เรื่อง
ดังนั้นถ้าคุณได้ทำคิดไปข้างหน้าเล็กน้อยในขณะที่สร้าง HTMLS เพื่อเพิ่มหน่วยงานเสริมเหล่านี้หรือมักสถานการณ์ที่ว่าคุณมีลอจิกวนการสร้างไอคอนเหล่านี้ / รูปใน XSL, PHP JAVA หรือภาษาเขียนโปรแกรม / สคริปต์อื่น ๆ คุณสามารถเพิ่มได้ตลอดเวลาจากนั้นเป็นเพียงเรื่องของการแสดงและการซ่อนเงาเหล่านี้โดยใช้สถานที่ให้บริการการแสดงผล CSS, เป็นต่อลูกค้าที่เคยเปลี่ยนแปลงความต้องการของ ... ฉัน havn't กระทำการเรียงลำดับของหัวก้าวหน้านี้ ก่อนหน้านี้ ... แต่ ahev เริ่มต้นตอนนี้!
ในตัวอย่างด้านล่าง, ภาพต้นฉบับที่เป็นเงาฟรีและ dropshadows ถูกนำมาใช้ต้องเป็น! นอกจากนี้ผมได้ไปน้อยพิเศษโดยใช้เทคนิคของ Tut ก่อนหน้านี้ของฉัน (Well! เหล่านี้อาจจะเป็นความหลากหลายที่สั้นที่สุดของงานจึงเป็นธรรมเท่านั้นเรียกพวกเขา "Tut" 's) เกี่ยวกับ การใช้สถานที่ให้บริการคลิป CSS สำหรับแสดงปิดเท่านั้น
ฉันต้องการที่จะเข้าใจนี้ทำไม? Humm ... !
ส่วนใหญ่ของนักเขียน CSS จะยอมรับว่าสถานที่ให้บริการคลิป CSS อาจเป็นหนึ่งในที่สุดยกเลิกการใช้คุณสมบัติ CSS มันจึงเป็นความจริงสำหรับฉันมากเกินไปและเป็นส่วนใหญ่ยินดีที่จะละเลยมันจนผมเริ่มปรับเปลี่ยน MooTools TWO Knob ชิ้นส่วน Slider (Pin) (มีตัวบ่งชี้กลาง) .
มีคำแนะนำที่ดีคือจากหนึ่งในผู้ประกอบการปรับเปลี่ยนชิ้นส่วนเลื่อนการใช้ภาพภูมิหลังตัด (ต่อส่วนความกว้างของตัวแปร) เพื่อระบุช่วงเลื่อน ดังนั้นเวลาที่จะใส่ความสนุก แต่ยกเลิกการเช่าเหมาลำ (สำหรับฉัน ofcourse) ของฉันน่านน้ำของสถานที่ให้บริการคลิป CSS มา
ดี! วิธีการที่ยากที่จะสามารถ? ไม่มากเลย ... ใช่และไม่ใช่ ไวยากรณ์ที่จะใช้สถานที่ให้บริการคลิป CSS คือตรงสวย แต่ความหมาย / usuage เป็นบิต croocked กับหน่วยความจำเช่นเหมือง, everytime I นั่งการ rework กับสคริปต์ Slider ของฉัน ... ฉันมี tokeep อ้างอิงกลับไปยังสถานที่ให้บริการการใช้งานของคลิปนี้เพื่อเตือนตัวเองตรรกะที่ฉันได้สร้างขึ้นในสคริปต์ของฉัน .... HENCE! คิดว่าจะปากกามันลงมาด้วยความหวังที่จะจำมันในอนาคต (และยังเพื่อประโยชน์ของผู้ที่ดูเหมือน boggled โดยสถานที่ให้บริการคลิป CSS)
คลิป CSS ทำอะไร?
คลิปเป็นส่วนหนึ่งของโมดูลผลภาพของ CSS 2.1 ใส่เพียงงานที่จะวางหน้าต่างที่มองเห็นอยู่ด้านบนของวัตถุที่จะถูกตัดทอนจึงตัดภาพและการสร้างภาพขนาดเล็กโดยไม่ต้องสร้างแฟ้มเพิ่มเติม (ผมมีอยู่แล้วนำคุณลักษณะนี้เพื่อการใช้งานที่ดีขึ้นในชิ้นส่วน Slider 
)
การใช้สถานที่ให้บริการคลิป CSS, คุณสามารถสร้างการตัดโดยใช้รูปทรงสี่เหลี่ยมมุมฉาก ชอบหลายคุณสมบัติ CSS อื่น ๆ (เช่นขอบ padding ฯลฯ ), การใช้การดูแลรักษาต้องสี่พิกัดบน, ล่าง, ขวา, ซ้าย (TRBL) ธรรมชาติ croocked ที่ให้บริการนี้สะท้อนให้เห็นถึงเมื่อคุณใช้เวลามองใกล้ที่วิธีการคำนวณคลิปภาคคลิปที่ใช้เหล่านี้สี่พิกัด (ส่งเข้าไปในสมองโยนในขณะที่) ตอนนี้สับสนคุณด้านล่างเริ่มจากด้านบนและด้านขวาเริ่มจากด้านซ้าย . คุณจะเห็นสิ่งที่ผมพูด? .... ดังนั้นกระทู้นี้ ...
นี้สับสนเล็กน้อยสามารถหายไปกับคำอธิบายภาพนี้จากคุณสมบัติ CSS คลิป / ดูแลรักษาดังนี้!
งานที่เราได้เริ่มต้นคือการตัดภาพต่อไปนี้เป็นภาพที่หา squarer (และยังเป็นภาพมุมกว้าง)
| |  |
| Thumbnal Original / รูปภาพ | ข้อกำหนดสำหรับคลิป Sqaure Thumbmail |
ก่อนที่เราจะมีการจัดการกับ CSS เพื่อสร้างเค้าโครงหน้าของเราจัดเนื้อหาบางส่วนที่อยู่ภายในเซลล์ของตารางดูเหมือนเด็กเล่นเพียงของ เพียงแค่ตั้งค่า "จัด" หรือสถานที่ให้บริการ "VALIGN" ของตารางที่จะมีการจัดตำแหน่งที่คุณเลือกชิ้นส่วนของเค้ก!
ด้วยรูปแบบ CSS แต่เรามี "vertical-align" สถานที่ให้บริการสำหรับองค์ประกอบก็ดูเหมือนจะไม่เป็นง่ายๆเป็น "เส้นตรง" หรือคุณสมบัติ "VALIGN" การจะมีมากขึ้น specifiic "vertical-align" ไม่เคยดูเหมือนว่าจะแก้ปัญหาใด ๆ ของคุณโดยเฉพาะถ้ามีการเขียนชิ้นส่วนของ cross-browser CSS
โดยไม่ต้องใช้ตาราง HTML ปัญหาของศูนย์กลางบนวัตถุไม่ว่าจะเป็นภาพหรือข้อความบางส่วนที่มีอยู่ภายในได้รับอาจจะทุก UI / CSS ฝันร้ายนักพัฒนาในบางจุด ปัญหานี้ต่อไป extrapolates กังวลของคุณจากการจัดตำแหน่งหากวัตถุที่จะเป็นศูนย์กลางเป็นแบบไดนามิกในธรรมชาติเช่นเมื่อความสูงของมันคือตัวแปร (ความสูงที่ไม่รู้จัก)
แม้ว่าจะไม่มีวิธีการแก้ปัญหาตรงไปข้างหน้าเป็นที่รู้จักที่จะทำงานในช่วงของเบราว์เซอร์ที่เราต้องจัดการกับการแก้ปัญหาที่ผมได้พยายามที่จะมาถึงที่ไม่ดูเหมือนจะทำงานในเบราว์เซอร์ไม่กี่แห่งที่ผมได้พยายามใน (IE6, IE 7 , FF)
SOLUTION:
ในเบราว์เซอร์เช่น Mozilla, Opera และ Safari แปลกพฤติกรรม "vertical-align" สถานที่ให้บริการสามารถนำความรู้สึกของตนเพียงโดยการตั้งค่า "แสดง" สถานที่ให้บริการของแผนกที่มีการ "ตารางเซลล์" (แสดง: ตารางเซลล์-) .
ปัญหาที่เกิดขึ้นยังคงอยู่กับครอบครัวเบราว์เซอร์ IE ที่ยังดูเหมือนจะไม่เข้าใจว่าจะมี "ตารางเซลล์" ทรัพย์สินและไม่รู้ว่าพวกเขาเป็นพวกเขาก็ไม่สนใจมัน วิธีการแก้ปัญหาให้ด้านล่างนี้แม้ว่าโฆษณาแบบง่ายๆองค์ประกอบเพิ่มเติม DOM ไม่กี่ HTML ของคุณจะทำให้สิ่งที่เกิดขึ้น
CSS และ HTML ลักษณะเช่นนี้
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> ขอ Views: 3456 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
ดูการสาธิตที่นี่ | ดาวน์โหลดไฟล์ที่มา (Downloaded 452 ครั้ง)
TOP จัด CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> ขอ Views: 1234 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
BOTTOM จัด CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> ขอ Views: 1234 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
ดูการสาธิตที่นี่ | ดาวน์โหลดที่นี่
ดูเหมือนว่าทุกเพศทุกวัยตั้งแต่ผมพยายามที่จะหาทางออกที่เหมาะสมเพื่อการจัดแนวนี้ปัญหาที่เกิดขึ้น แต่ตอนนี้มีวิธีการแก้ปัญหานี้ผมรู้สึกเหมือนอยู่ที่ความสงบสุขเล็ก ๆ น้อย ๆ
ด้วยความหวังว่าสักวันหนึ่ง
ดาวน์โหลด CSS และ HTML ของการแก้ปัญหาข้างต้นที่นี่ (Downloaded 452 ครั้ง) .. สำหรับ understandability, CSS ไม่ได้รับการเพิ่มประสิทธิภาพ
PS: และโดยวิธีการเหล่านั้นจะรูปขนาดย่อของภาพบางส่วนที่ผมได้คลิก ...
CSS สำหรับเบราว์เซอร์ที่ไม่ใช่ IE: มันไม่มีข่าวกับนักพัฒนา CSS ที่, CSS Selectors เด็กเช่นตัวอย่างด้านล่างนี้ดูเหมือนจะไม่ทำงานใน IE
เช่น div> ช่วง {} CSS บางที่หมายถึง "เมื่อองค์ประกอบช่วงเป็นเด็ก (และไม่หลานหรือเด็กที่ยิ่งใหญ่มาก ฯลฯ ) ขององค์ประกอบส่วน"
แต่เราใช้ CON นี้เพื่อประโยชน์ของเรา ในอดีตตัวเลือกสำหรับเด็กที่ได้รับการใช้ในการซ่อนคำสั่ง CSS จาก IE เพียงโดยการวาง html>body ในหน้าใด ๆ CSS คำสั่ง IE จะไม่สนใจมัน:
html>body .foo { CSS commands go here ;}
งานนี้เพราะ <body> อยู่เสมอลูกของ <html> - มันสามารถของหลักสูตรที่ไม่เคยเป็นหลานที่ดีหรือหลานของ <html> .
ตอนนี้ที่ IE 7 เข้าใจเลือกสำหรับเด็กที่คุณต้องแทรกแท็กข้อคิดเห็นว่างในโดยตรงหลังจากเครื่องหมายมากกว่า IE 7 จะไม่เข้าใจนี้เลือก (ผู้รู้ว่าทำไม?) และจะทำให้ทั้งหมดไม่สนใจคำสั่งนี้ CSS.:
html> /**/ body .foo { CSS commands go here ;}
ถ้ายังไม่ได้เห็นแล้วเหล่านี้ก่อนที่มีอ่านต่อไปนี้ผ่านเช่นกัน
