รองรับเบราว์เซอร์ หนึ่งในคุณสมบัติหลักของเครื่องมือ CSS ก็คือได้รับการให้คะแนนเพื่อให้การสนับสนุนที่สมบูรณ์แบบสำหรับเบราว์เซอร์คลาส A การสนับสนุนเบราว์เซอร์การให้คะแนนเป็นเพียงการให้คะแนนของ Yahoo! และคุณสามารถดูคำอธิบายทั้งหมดได้บนเว็บไซต์ ซึ่งโดยทั่วไปจะอธิบายว่า CSS ทำงานได้ดีในเบราว์เซอร์ในตลาดปัจจุบันอย่างไร ในตารางออนไลน์นี้ เบราว์เซอร์แบ่งออกเป็นสามระดับของการรองรับเบราว์เซอร์ (A, C และ X) ระดับ A คือระดับการสนับสนุนสูงสุด ด้วยการใช้ประโยชน์จากพลังของมาตรฐานเว็บสมัยใหม่ ไลบรารี YUI ค้นพบว่าประสบการณ์คลาส A มอบฟังก์ชันการทำงานขั้นสูงและความเที่ยงตรงของภาพ หมวดหมู่การสนับสนุนและไฟล์ที่เกี่ยวข้องช่วยให้คุณทราบว่า CSS รองรับที่ใดบ้าง แต่ควรมีให้ใช้งานในทุกเบราว์เซอร์ (พร้อมดาวน์เกรดได้) CSS ที่ใช้ซ้ำได้ ไลบรารี YUI มีพื้นที่หรือคุณลักษณะ CSS สามส่วน ครอบคลุมการจัดรูปแบบ การแนะนำแบบอักษร และเค้าโครงตามตาราง (คอลัมน์และแถว) ข้อกำหนดเหล่านี้ใช้บนเว็บไซต์เพื่ออธิบายองค์ประกอบทั้งสามนี้: ตารางหน้า: ช่วยให้คุณสามารถฝังตารางหนึ่งถึงสี่คอลัมน์ภายในความจุของเทมเพลตที่คุณใช้ กริดหน้า: buildgridsgrids.css เค้าโครงหน้าตาราง เค้าโครงแบบตารางเป็นแรงผลักดันเบื้องหลังการออกแบบไซต์หรือเค้าโครงหน้าเกือบทุกรูปแบบ ในอดีตสิ่งนี้มักทำผ่านตาราง HTML แต่ CSS ให้พลังและความยืดหยุ่นอย่างมากสำหรับการจัดวางหน้า Page Grid มีโค้ดสำหรับสร้างเพจที่มีคอลัมน์และแถวตามความต้องการของคุณ ที่ระดับพื้นฐานที่สุดของตารางหน้า จะมีเทมเพลตเว็บเพจเจ็ดแบบ โดยหกเทมเพลตจะกำหนดเนื้อหาหลัก/เค้าโครงแถบเครื่องมือโดยละเอียด เทมเพลตที่เจ็ดกำหนดเค้าโครงโดยไม่มีแถบเครื่องมือ และเนื้อหาหลักจะใช้ความกว้างของหน้าทั้งหมด ชื่อของเทมเพลตเหล่านี้มีดังนี้: yui-t1: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 160px ทางด้านซ้าย และพื้นที่หลักที่มีความกว้าง 570px รายการ ก <html><หัว> เค้าโครงถูกกำหนดให้กับทั้งหน้า - แท็ก div หลักถูกกำหนดให้เป็นคลาส yui-t2 นี่แสดงว่ามีการใช้เทมเพลตที่สอง
แบบอักษร: ให้มาตรฐานและการควบคุมการพิมพ์ข้ามเบราว์เซอร์ โดยทั่วไปแล้ว จะให้แบบอักษรและความสูงของบรรทัดที่สอดคล้องกัน ในขณะเดียวกันก็สนับสนุนการปรับแต่งแบบอักษรของผู้ใช้ (ภายในเบราว์เซอร์) อย่างเต็มที่
รีเซ็ต: ให้การกำหนดมาตรฐานเริ่มต้นให้กับองค์ประกอบ HTML ข้ามเบราว์เซอร์ นอกจากนี้ยังลบนิพจน์เริ่มต้นทั่วไปในเบราว์เซอร์ เช่น การใช้ตัวหนาสำหรับองค์ประกอบที่เน้น เพื่อช่วยให้แน่ใจว่าคำจำกัดความของแบบอักษรทั้งหมดเป็นไปตามเจตนาและองค์ประกอบต่างๆ จะถูกใช้เพื่อความหมายทางความหมายเสมอ ไม่ใช่การแสดงออกทางภาพตามธรรมเนียม
หลังจากติดตั้งแล้ว แต่ละองค์ประกอบของการดาวน์โหลดไลบรารี YUI จะพร้อมใช้งานในไดเร็กทอรี/ไฟล์ต่อไปนี้บนเว็บเซิร์ฟเวอร์:
แบบอักษร: buildfontsfonts.css
รีเซ็ต: สร้าง eset eset.css
คุณสามารถติดตั้งไดเร็กทอรีฐานเหล่านี้บนเว็บเซิร์ฟเวอร์ของคุณเองหรือวางไว้ภายในไซต์ของคุณเพื่อให้คุณสามารถอ้างอิงได้ตามต้องการ คุณสมบัติที่สำคัญของ CSS (นอกเหนือจากความฟรี) คือการทดสอบและดีบั๊กอย่างละเอียดก่อนที่จะเผยแพร่ มาดูการทำงานของเครื่องมือ CSS กันดีกว่า
yui-t2: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 180px ทางด้านซ้าย และพื้นที่หลักที่มีความกว้าง 550px
yui-t3: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 300px ทางด้านซ้าย และพื้นที่หลักที่มีความกว้าง 430px
yui-t4: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 180px ทางด้านขวา และพื้นที่หลักที่มีความกว้าง 550px
yui-t5: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 240px ทางด้านขวา และพื้นที่หลักที่มีความกว้าง 490px
yui-t6: ประกอบด้วยแถบเครื่องมือที่มีความกว้าง 300px ทางด้านขวา และพื้นที่หลักที่มีความกว้าง 430px
yui-t7: มีพื้นที่หลักที่มีความกว้าง 750px และไม่มีแถบเครื่องมือ
คุณสามารถรวม (หรือแก้ไข หากคุณกล้าพอ) เทมเพลตเหล่านี้เพื่อให้เหมาะกับวัตถุประสงค์ของคุณ รายการ A ใช้เค้าโครงแรกในการจัดวางหน้า (หมายเหตุ: เครื่องมือ CSS ได้รับการติดตั้งในไดเรกทอรีเริ่มต้นของเว็บเซิร์ฟเวอร์)
<title>เครื่องมือ Yahoo CSS ตัวอย่างที่ 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</หัว>
<ร่างกาย>
<div id="doc" class="yui-t2">
<div id="hd">ส่วนหัวของหน้า</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">พื้นที่หลัก</div>
</div><div class="yui-b">คอลัมน์ซ้าย</div>
</div>
<div id="ft">ส่วนท้ายของหน้า</div>
</div></body></html>
หมายเหตุบางประการในหน้า HTML:
หน้านี้แบ่งออกเป็นพื้นที่ส่วนหัว เนื้อหา และส่วนท้าย ส่วนหัวจะได้รับตัวระบุ hd ส่วนเนื้อหาคือ bd และส่วนท้ายคือ ft
เนื้อหาหลักของหน้าจะแบ่งออกเป็นพื้นที่ด้านซ้าย (หากเทมเพลตรองรับ) และพื้นที่หลัก ทั้งสองได้รับการกำหนดคลาส yui-b แต่พื้นที่หลักจะถูกต่อท้ายด้วยแอตทริบิวต์ตัวระบุ yui-main ในแท็ก div