CSS

Cascading สไตล์ชีต (CSS)

นามสกุลไฟล์	.css
ประเภทสื่ออินเทอร์เน็ต	ข้อความ/css
ตัวระบุประเภทเครื่องแบบ (UTI)	public.css
พัฒนาโดย	สมาคมเวิลด์ไวด์เว็บ (W3C)
เปิดตัวครั้งแรก	17 ธันวาคม 2539 ; 24 ปีที่แล้ว ( 2539-12-17 )
รุ่นล่าสุด	CSS 2.1 : Level 2 Revision 1 (12 เมษายน 2559 ; 5 ปีที่แล้ว ) (2016-04-12)
ประเภทของรูปแบบ	ภาษาชีตสไตล์
คอนเทนเนอร์สำหรับ	กฎรูปแบบสำหรับองค์ประกอบ HTML (แท็ก)
ประกอบด้วย	เอกสาร HTML
เปิดรูปแบบ ?	ใช่
เว็บไซต์	www .w3 .org /TR /CSS / #css

Cascading Style Sheets ( CSS ) เป็นภาษาสไตล์ชีตที่ใช้ในการอธิบายถึงการนำเสนอของเอกสารที่เขียนในภาษามาร์กอัปเช่นHTML ^[1] CSS เป็นเทคโนโลยีสำคัญของเวิลด์ไวด์เว็บข้าง HTML และJavaScript ^[2]

CSS ถูกออกแบบมาเพื่อช่วยให้การแยกการนำเสนอและเนื้อหารวมทั้งรูปแบบ , สีและแบบอักษร ^[3]การแยกนี้สามารถปรับปรุงการเข้าถึงเนื้อหาให้ความยืดหยุ่นและการควบคุมมากขึ้นในข้อมูลจำเพาะของลักษณะการนำเสนอ เปิดใช้งานหน้าเว็บหลายหน้าเพื่อแชร์การจัดรูปแบบโดยระบุ CSS ที่เกี่ยวข้องในไฟล์ .css แยก ซึ่งช่วยลดความซับซ้อนและการซ้ำซ้อนในเนื้อหาโครงสร้างเป็น รวมถึงการเปิดใช้แคชไฟล์ .css เพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บระหว่างหน้าที่แชร์ไฟล์และการจัดรูปแบบ

การแยกการจัดรูปแบบและเนื้อหายังทำให้สามารถนำเสนอหน้ามาร์กอัปเดียวกันในสไตล์ที่แตกต่างกันสำหรับวิธีการเรนเดอร์ที่แตกต่างกัน เช่น บนหน้าจอ ในการพิมพ์ ด้วยเสียง (ผ่านเบราว์เซอร์ที่ใช้คำพูดหรือโปรแกรมอ่านหน้าจอ ) และแบบอักษรเบรลล์อุปกรณ์สัมผัส CSS นอกจากนี้ยังมีกฎระเบียบสำหรับการจัดรูปแบบอื่นถ้าเนื้อหามีการเข้าถึงบนอุปกรณ์มือถือ ^[4]

ชื่อแบบเรียงซ้อนมาจากรูปแบบลำดับความสำคัญที่ระบุเพื่อกำหนดว่ากฎของสไตล์ใดจะนำไปใช้ หากมีกฎมากกว่าหนึ่งกฎที่ตรงกับองค์ประกอบหนึ่งๆ โครงการลำดับความสำคัญแบบเรียงซ้อนนี้สามารถคาดการณ์ได้

ข้อกำหนด CSS ได้รับการดูแลโดยWorld Wide Web Consortium (W3C) ประเภทสื่ออินเทอร์เน็ต ( ชนิด MIME ) ได้text/cssรับการลงทะเบียนเพื่อใช้กับ CSS โดย RFC 2318 (มีนาคม 1998) W3C ให้บริการตรวจสอบความถูกต้องของ CSS สำหรับเอกสาร CSS ฟรี ^[5]

นอกเหนือไปจาก HTML, ภาษามาร์กอัปอื่น ๆ ที่สนับสนุนการใช้ CSS รวมทั้งXHTML , XML ธรรมดา , SVGและXUL

ไวยากรณ์

CSS มีไวยากรณ์ที่เรียบง่ายและใช้คำหลักภาษาอังกฤษจำนวนหนึ่งเพื่อระบุชื่อของคุณสมบัติสไตล์ต่างๆ

แผ่นสไตล์ประกอบด้วยรายการของกฎ แต่ละกฎหรือกฎชุดประกอบด้วยหนึ่งหรือมากกว่าเตอร์และบล็อกการประกาศ

ตัวเลือก

ใน CSS ตัวเลือกจะประกาศส่วนใดของมาร์กอัปที่สไตล์ใช้กับโดยการจับคู่แท็กและแอตทริบิวต์ในมาร์กอัปเอง

ตัวเลือกอาจนำไปใช้กับสิ่งต่อไปนี้:

• องค์ประกอบทั้งหมดของประเภทเฉพาะ เช่น ส่วนหัวระดับที่สองh2
• องค์ประกอบที่ระบุโดยแอตทริบิวต์โดยเฉพาะ:
  • id : ตัวระบุที่ไม่ซ้ำภายในเอกสาร ระบุด้วยคำนำหน้าแฮชเช่น#id
  • class : ตัวระบุที่สามารถใส่คำอธิบายประกอบหลายองค์ประกอบในเอกสาร ระบุด้วยคำนำหน้าจุดเช่น.classname
• องค์ประกอบขึ้นอยู่กับว่าพวกเขาจะอยู่เมื่อเทียบกับคนอื่น ๆ ในต้นไม้เอกสาร

คลาสและรหัสเป็นแบบพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ โดยขึ้นต้นด้วยตัวอักษร และสามารถรวมอักขระที่เป็นตัวอักษรและตัวเลขคละกัน ขีดกลาง และขีดล่างได้ คลาสอาจนำไปใช้กับอินสแตนซ์ขององค์ประกอบใดๆ จำนวนเท่าใดก็ได้ รหัสสามารถใช้ได้กับองค์ประกอบเดียวเท่านั้น

คลาสหลอกใช้ในตัวเลือก CSS เพื่ออนุญาตการจัดรูปแบบตามข้อมูลที่ไม่มีอยู่ในแผนผังเอกสาร ตัวอย่างหนึ่งของ pseudo-class ที่ใช้กันอย่างแพร่หลายคือซึ่งระบุเนื้อหาเฉพาะเมื่อผู้ใช้ "ชี้ไปที่" องค์ประกอบที่มองเห็นได้ โดยปกติแล้วโดยการกดเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบนั้น มันถูกผนวกเข้ากับตัวเลือกเป็นในหรือ จัดประเภทหลอกชั้นเอกสารองค์ประกอบเช่นหรือในขณะที่องค์ประกอบหลอกทำให้ตัวเลือกที่อาจประกอบด้วยองค์ประกอบบางส่วนเช่นหรือ ^[6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

ตัวเลือกอาจรวมกันได้หลายวิธีเพื่อให้ได้ความจำเพาะและความยืดหยุ่นที่ยอดเยี่ยม ^[7]ตัวเลือกหลายตัวอาจเข้าร่วมในรายการที่เว้นระยะเพื่อระบุองค์ประกอบตามตำแหน่ง ประเภทองค์ประกอบ รหัส คลาส หรือการรวมกันของสิ่งนั้น ลำดับของผู้คัดเลือกมีความสำคัญ ตัวอย่างเช่นนำไปใช้กับองค์ประกอบทั้งหมดของคลาส myClass ที่อยู่ภายในองค์ประกอบ div ในขณะที่นำไปใช้กับองค์ประกอบ div ทั้งหมดที่อยู่ในองค์ประกอบของคลาส myClass อย่าสับสนกับตัวระบุที่ต่อกัน เช่นที่ใช้กับองค์ประกอบ div ของคลาส myClass div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

ตารางต่อไปนี้แสดงบทสรุปของไวยากรณ์ตัวเลือกที่ระบุการใช้งานและเวอร์ชันของ CSS ที่แนะนำ ^[8]

บล็อกประกาศ

บล็อกการประกาศประกอบด้วยรายการของการประกาศในวงเล็บปีกกา แต่ละคนประกาศตัวเองประกอบด้วยคุณสมบัติ , ลำไส้ใหญ่ ( :) และค่า หากมีหลายการประกาศในบล็อก;จะต้องแทรกเซมิโคลอน ( ) เพื่อแยกการประกาศแต่ละรายการ ตัวเลือกลำไส้ใหญ่กึ่งหลังจากที่ผ่านมา (หรือเดี่ยว) ประกาศอาจจะถูกใช้ ^[9]

คุณสมบัติระบุไว้ในมาตรฐาน CSS แต่ละคุณสมบัติมีชุดของค่าที่เป็นไปได้ คุณสมบัติบางอย่างอาจส่งผลต่อองค์ประกอบประเภทใดก็ได้ และคุณสมบัติอื่นๆ ใช้กับกลุ่มขององค์ประกอบบางกลุ่มเท่านั้น ^{[10] [11]}

ค่าอาจเป็นคีย์เวิร์ด เช่น "center" หรือ "inherit" หรือค่าตัวเลข เช่น200px(200 พิกเซล) 50vw(50 เปอร์เซ็นต์ของความกว้างของวิวพอร์ต) หรือ80% (80 เปอร์เซ็นต์ของความกว้างขององค์ประกอบหลัก) ค่าสีสามารถระบุได้ด้วยคีย์เวิร์ด (เช่น " ") ค่าฐานสิบหก (เช่นย่อมาจาก) ค่า RGB ในระดับ 0 ถึง 255 (เช่น) ค่า RGBA ที่ระบุทั้งสีและความโปร่งใสของอัลฟา (เช่น) หรือ HSL หรือค่า HSLA (เช่น, ) ⁽¹²⁾red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

หน่วยความยาว

ค่าตัวเลขที่ไม่ใช่ศูนย์ที่แสดงการวัดเชิงเส้นต้องมีหน่วยความยาว ซึ่งเป็นรหัสตัวอักษรหรือตัวย่อ เช่น ใน200pxหรือ50vw; หรือเครื่องหมายเปอร์เซ็นต์ เช่น80%. บางหน่วย – cm( เซนติเมตร ); in( นิ้ว ); mm( มิลลิเมตร ); pc( พิก้า ); และpt( จุด ) – เป็นค่าสัมบูรณ์ซึ่งหมายความว่ามิติที่แสดงผลไม่ขึ้นอยู่กับโครงสร้างของหน้า อื่นๆ – em( em ); ex( อดีต ) และpx( พิกเซล ) – สัมพันธ์กันซึ่งหมายความว่าปัจจัยต่างๆ เช่น ขนาดแบบอักษรขององค์ประกอบหลักสามารถส่งผลต่อการวัดที่แสดงผล แปดหน่วยเหล่านี้เป็นคุณลักษณะของ CSS 1 ^[13]และเก็บไว้ในการแก้ไขที่ตามมาทั้งหมด CSS Values ​​and Units Module Level 3 ที่เสนอ หากนำมาใช้เป็นคำแนะนำ W3C จะมีหน่วยความยาวเพิ่มเติมอีกเจ็ดหน่วย: ch; Q; rem; vh; vmax; vmin; และvw. ^[14]

ใช้

ก่อน CSS แอตทริบิวต์การนำเสนอเกือบทั้งหมดของเอกสาร HTML อยู่ในมาร์กอัป HTML ต้องอธิบายสีแบบอักษร ลักษณะพื้นหลัง การจัดแนวองค์ประกอบ เส้นขอบและขนาดทั้งหมดอย่างชัดเจนภายใน HTML บ่อยครั้ง CSS ช่วยให้ผู้เขียนย้ายข้อมูลส่วนใหญ่ไปยังไฟล์อื่น ซึ่งก็คือสไตล์ชีต ส่งผลให้ HTML ง่ายขึ้นมาก

ตัวอย่างเช่น ส่วนหัว ( h1องค์ประกอบ) หัวข้อh2ย่อย ( h3) หัวข้อย่อย ( ) ฯลฯ ถูกกำหนดโครงสร้างโดยใช้ HTML ในการพิมพ์และบนหน้าจอทางเลือกของตัวอักษร , ขนาด , สีและเน้นสำหรับองค์ประกอบเหล่านี้คือpresentational

ก่อน CSS ผู้เขียนเอกสารที่ต้องการกำหนดลักษณะการพิมพ์ดังกล่าวh2ส่วนหัวทั้งหมดต้องมาร์กอัปการนำเสนอ HTML ซ้ำ สำหรับการเกิดขึ้นแต่ละครั้งของประเภทส่วนหัวนั้น ทำให้เอกสารมีความซับซ้อนมากขึ้น มีขนาดใหญ่ขึ้น และเกิดข้อผิดพลาดได้ง่ายยิ่งขึ้น และดูแลรักษายาก CSS ช่วยให้สามารถแยกการนำเสนอออกจากโครงสร้างได้ CSS สามารถกำหนดสี แบบอักษร การจัดตำแหน่งข้อความ ขนาด เส้นขอบ ระยะห่าง เลย์เอาต์ และลักษณะการพิมพ์อื่นๆ ได้มากมาย และสามารถทำได้แยกกันสำหรับมุมมองบนหน้าจอและแบบพิมพ์ CSS ยังกำหนดรูปแบบที่ไม่ใช่ภาพ เช่น ความเร็วในการอ่านและการเน้นสำหรับผู้อ่านข้อความเกี่ยวกับหูW3Cได้ตอนนี้เลิกใช้ทั้งหมด presentational HTML มาร์กอัป^[15]

ตัวอย่างเช่น ภายใต้ pre-CSS HTML องค์ประกอบส่วนหัวที่กำหนดด้วยข้อความสีแดงจะถูกเขียนเป็น:

< h1 >< font  color = "red" >บทที่ 1 </ font ></ h1 >

การใช้ CSS องค์ประกอบเดียวกันสามารถเข้ารหัสได้โดยใช้คุณสมบัติสไตล์แทนแอตทริบิวต์การนำเสนอ HTML:

< h1  style = "สี: สีแดง;" >บทที่ 1 </ h1 >

ข้อดีของสิ่งนี้อาจไม่ชัดเจนในทันที แต่พลังของ CSS นั้นชัดเจนยิ่งขึ้นเมื่อวางคุณสมบัติของสไตล์ในองค์ประกอบสไตล์ภายในหรือไฟล์ CSS ภายนอกที่ดียิ่งขึ้น ตัวอย่างเช่น สมมติว่าเอกสารมีองค์ประกอบสไตล์:

< style > 
    h1  { 
        สี:  แดง; 
    } 
</ style >

h1องค์ประกอบทั้งหมดในเอกสารจะกลายเป็นสีแดงโดยอัตโนมัติโดยไม่ต้องใช้รหัสที่ชัดเจน หากภายหลังผู้เขียนต้องการทำให้h1องค์ประกอบเป็นสีน้ำเงินแทน สามารถทำได้โดยเปลี่ยนองค์ประกอบสไตล์เป็น:

< style > 
    h1  { 
        สี:  ฟ้า; 
    } 
</ style >

แทนที่จะใช้ความอุตสาหะในการดูเอกสารและเปลี่ยนสีสำหรับแต่ละh1องค์ประกอบ

สไตล์ยังสามารถวางในไฟล์ CSS ภายนอกตามที่อธิบายไว้ด้านล่าง และโหลดโดยใช้ไวยากรณ์ที่คล้ายกับ:

< link  href = "path/to/file.css"  rel = "stylesheet"  type = "text/css" >

สิ่งนี้จะแยกการจัดสไตล์ออกจากเอกสาร HTML และทำให้สามารถจัดรูปแบบเอกสารหลายฉบับใหม่ได้โดยเพียงแค่แก้ไขไฟล์ CSS ภายนอกที่แชร์

ที่มา

ข้อมูล CSS ได้จากแหล่งต่างๆ แหล่งที่มาเหล่านี้อาจเป็นเว็บเบราว์เซอร์ ผู้ใช้ และผู้แต่ง ข้อมูลจากผู้เขียนสามารถจำแนกเพิ่มเติมได้เป็นอินไลน์ ประเภทสื่อ ความสำคัญ ความเฉพาะเจาะจงของตัวเลือก ลำดับกฎ การสืบทอด และคำจำกัดความคุณสมบัติ ข้อมูลรูปแบบ CSS สามารถอยู่ในเอกสารแยกต่างหาก หรือสามารถฝังลงในเอกสาร HTML ได้ นำเข้าสไตล์ชีตได้หลายแบบ สามารถใช้สไตล์ที่แตกต่างกันได้ขึ้นอยู่กับอุปกรณ์ส่งออกที่ใช้ ตัวอย่างเช่น เวอร์ชันหน้าจออาจแตกต่างจากเวอร์ชันที่พิมพ์ได้ค่อนข้างมาก เพื่อให้ผู้เขียนสามารถปรับแต่งการนำเสนอได้อย่างเหมาะสมสำหรับแต่ละสื่อ

สไตล์ชีตที่มีลำดับความสำคัญสูงสุดจะควบคุมการแสดงเนื้อหา การประกาศที่ไม่ได้ตั้งค่าในแหล่งที่มาที่มีลำดับความสำคัญสูงสุดจะถูกส่งไปยังแหล่งที่มาที่มีลำดับความสำคัญต่ำกว่า เช่น รูปแบบตัวแทนผู้ใช้ กระบวนการนี้เรียกว่าซ้อน

หนึ่งในเป้าหมายของ CSS คือการอนุญาตให้ผู้ใช้ควบคุมการนำเสนอได้ดียิ่งขึ้น คนที่พบว่าหัวเอียงสีแดงอ่านยากอาจใช้สไตล์ชีตอื่น ขึ้นอยู่กับเบราว์เซอร์และเว็บไซต์ ผู้ใช้อาจเลือกสไตล์ชีตต่างๆ ที่ออกแบบโดยนักออกแบบ หรืออาจลบสไตล์ที่เพิ่มทั้งหมดและดูไซต์โดยใช้สไตล์เริ่มต้นของเบราว์เซอร์ หรืออาจแทนที่เฉพาะรูปแบบส่วนหัวของตัวเอียงสีแดงโดยไม่เปลี่ยนแปลงส่วนอื่นๆ คุณลักษณะ.

ความจำเพาะ

ความจำเพาะหมายถึงน้ำหนักสัมพัทธ์ของกฎต่างๆ ^[16]กำหนดลักษณะที่จะนำไปใช้กับองค์ประกอบเมื่อสามารถใช้กฎได้มากกว่าหนึ่งกฎ ตามข้อกำหนด ตัวเลือกอย่างง่าย (เช่น H1) มีความจำเพาะ 1, ตัวเลือกคลาสมีความจำเพาะ 1,0 และตัวเลือก ID มีความจำเพาะ 1,0,0 เนื่องจากค่าความจำเพาะไม่ส่งต่อเหมือนในระบบทศนิยม เครื่องหมายจุลภาคจึงใช้เพื่อแยก "ตัวเลข" ^[17] (กฎ CSS ที่มี 11 องค์ประกอบและ 11 คลาสจะมีความจำเพาะที่ 11,11 ไม่ใช่ 121)

ดังนั้นตัวเลือกกฎต่อไปนี้ส่งผลให้เกิดความจำเพาะที่ระบุ:

ตัวอย่าง

พิจารณาส่วน HTML นี้:

<!DOCTYPE html> 
< html > 
    < head > 
        < meta  charset = "utf-8" > 
        < style > 
            # xyz  {  color :  blue ;  } 
        </ style > 
    </ head > 
    < body > 
        < p  id = "xyz"  style = "color: green;" >เพื่อแสดงความจำเพาะ</ p > 
    </ body > 
</ html >

ในตัวอย่างข้างต้น การประกาศในstyleแอตทริบิวต์จะแทนที่การประกาศใน<style>องค์ประกอบเนื่องจากมีความจำเพาะสูงกว่า ดังนั้นย่อหน้าจึงปรากฏเป็นสีเขียว

มรดก

การสืบทอดเป็นคุณสมบัติหลักใน CSS; มันอาศัยความสัมพันธ์ระหว่างบรรพบุรุษกับลูกหลานในการดำเนินการ การสืบทอดเป็นกลไกที่ใช้คุณสมบัติไม่เพียงกับองค์ประกอบที่ระบุเท่านั้น แต่ยังรวมถึงลูกหลานด้วย ^{[16] การ}สืบทอดอาศัยโครงสร้างเอกสาร ซึ่งเป็นลำดับชั้นของXHTMLองค์ประกอบในหน้าตามการซ้อน องค์ประกอบสืบทอดอาจสืบทอดค่าคุณสมบัติ CSS จากองค์ประกอบบรรพบุรุษที่ล้อมรอบพวกเขา โดยทั่วไป องค์ประกอบสืบทอดจะสืบทอดคุณสมบัติที่เกี่ยวข้องกับข้อความ แต่คุณสมบัติที่เกี่ยวข้องกับกล่องจะไม่สืบทอดมา คุณสมบัติที่สามารถสืบทอดได้ ได้แก่ สี แบบอักษร การเว้นวรรคตัวอักษร ความสูงของบรรทัด รูปแบบรายการ การจัดแนวข้อความ การเยื้องข้อความ การแปลงข้อความ การมองเห็น ช่องว่างสีขาว และการเว้นวรรคคำ คุณสมบัติที่ไม่สามารถสืบทอดได้ ได้แก่ พื้นหลัง เส้นขอบ แสดง ลอยและชัดเจน ความสูง และความกว้าง ระยะขอบ ความสูงและความกว้างต่ำสุดและสูงสุด โครงร่าง ล้น ช่องว่างภายใน ตำแหน่ง การตกแต่งข้อความ การจัดแนวแนวตั้ง และ z -ดัชนี.

สามารถใช้การสืบทอดเพื่อหลีกเลี่ยงการประกาศคุณสมบัติบางอย่างซ้ำแล้วซ้ำอีกในสไตล์ชีต ซึ่งช่วยให้ CSS สั้นลง

การสืบทอดใน CSS นั้นไม่เหมือนกับการสืบทอดในภาษาการเขียนโปรแกรมแบบอิงคลาสซึ่งเป็นไปได้ที่จะกำหนดคลาส B ว่า "เหมือนคลาส A แต่มีการดัดแปลง" ^[18]ด้วย CSS คุณสามารถจัดรูปแบบองค์ประกอบด้วย "คลาส A แต่มีการดัดแปลง" อย่างไรก็ตาม เป็นไปไม่ได้ที่จะกำหนด CSS คลาส B แบบนั้น ซึ่งสามารถใช้เพื่อจัดรูปแบบองค์ประกอบหลายรายการโดยไม่ต้องทำการแก้ไขซ้ำ

ตัวอย่าง

รับสไตล์ชีตต่อไปนี้:

h1  { 
   สี:  ชมพู; 
}

สมมติว่ามีองค์ประกอบ h1 ที่มีองค์ประกอบเน้น (em) อยู่ภายใน:

< h1 > 
   นี่คือการ< em >แสดง</ em >มรดก
 </ h1 >

หากไม่มีการกำหนดสีให้กับองค์ประกอบ em คำว่า "illustrate" ที่เน้นสีจะสืบทอดสีขององค์ประกอบหลัก h1 สไตล์ชีต h1 มีสีชมพู ดังนั้นองค์ประกอบ em จึงเป็นสีชมพูเช่นเดียวกัน

ช่องว่าง

ช่องว่างระหว่างคุณสมบัติและตัวเลือกจะถูกละเว้น ข้อมูลโค้ดนี้:

ร่างกาย{ ล้น: ซ่อน; พื้นหลัง: #000000 ; ภาพพื้นหลัง: url ( images/bg.gif ); background-repeat : ไม่ซ้ำ; พื้นหลังตำแหน่ง: ซ้าย บน;}

ใช้งานได้เทียบเท่ากับสิ่งนี้:

ร่างกาย { 
   ล้น:  ซ่อน; 
   สีพื้นหลัง:  #000000 ; 
   ภาพพื้นหลัง:  url ( images/bg.gif ); 
   background-repeat :  ไม่ซ้ำ; 
   พื้นหลังตำแหน่ง:  ซ้าย บน; 
}

วิธีหนึ่งทั่วไปในการจัดรูปแบบ CSS เพื่อให้อ่านง่ายคือการเยื้องแต่ละคุณสมบัติและกำหนดบรรทัดของตัวเอง นอกจากการจัดรูปแบบ CSS เพื่อให้อ่านง่ายแล้ว คุณสามารถใช้คุณสมบัติชวเลขเพื่อเขียนโค้ดได้เร็วขึ้น ซึ่งจะได้รับการประมวลผลเร็วขึ้นเมื่อแสดงผล: ^[19]

ร่างกาย { 
   ล้น:  ซ่อน; 
   พื้นหลัง:  #000  url ( images/bg.gif )  ไม่ซ้ำ ด้าน บนซ้าย; 
}

การวางตำแหน่ง

CSS 2.1 กำหนดรูปแบบการวางตำแหน่งสามรูปแบบ:

การไหลปกติ

รายการในบรรทัดจะถูกจัดวางในลักษณะเดียวกับตัวอักษรในคำในข้อความ ทีละรายการในพื้นที่ว่างที่มีอยู่จนกว่าจะไม่มีที่ว่างเหลือ จากนั้นจึงขึ้นบรรทัดใหม่ด้านล่าง บล็อกรายการเรียงซ้อนในแนวตั้ง เช่น ย่อหน้า และชอบรายการในรายการหัวข้อย่อย โฟลว์ปกติยังรวมถึงการวางตำแหน่งสัมพันธ์ของรายการบล็อกหรืออินไลน์ และกล่องรันอิน

ลอยน้ำ

สิ่งของที่ลอยอยู่จะถูกนำออกจากกระแสปกติและเลื่อนไปทางซ้ายหรือขวาให้มากที่สุดในพื้นที่ที่มี เนื้อหาอื่นจะไหลควบคู่ไปกับรายการที่ลอยอยู่

ตำแหน่งที่แน่นอน

สิ่งของที่อยู่ในตำแหน่งที่แน่นอนไม่มีที่เข้า และไม่มีผลกระทบต่อการไหลปกติของสิ่งของอื่นๆ มันใช้ตำแหน่งที่ได้รับมอบหมายในคอนเทนเนอร์โดยไม่ขึ้นกับรายการอื่นๆ ⁽²⁰⁾

คุณสมบัติตำแหน่ง

มีห้าค่าที่เป็นไปได้ของpositionคุณสมบัติ ถ้ารายการที่อยู่ในตำแหน่งในทางอื่น ๆ กว่าใด ๆstaticแล้วคุณสมบัติที่เพิ่มเติมtop, bottom, leftและrightจะใช้ในการระบุการชดเชยและองค์ประกอบ positions.The มีตำแหน่งคงไม่ได้รับผลกระทบจาก top, bottom, leftหรือ rightคุณสมบัติ

คงที่

ค่าเริ่มต้นวางรายการในโฟลว์ปกติ

ญาติ

รายการถูกวางในโฟลว์ปกติแล้วเลื่อนหรือออฟเซ็ตจากตำแหน่งนั้น รายการโฟลว์ที่ตามมาจะถูกจัดวางราวกับว่ารายการนั้นไม่ได้ถูกย้าย

แอบโซลูท

ระบุตำแหน่งแน่นอน องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับบรรพบุรุษที่ไม่คงที่ที่ใกล้ที่สุด

แก้ไขแล้ว

รายการอยู่ในตำแหน่งที่แน่นอนบนหน้าจอแม้ในขณะที่ส่วนที่เหลือของเอกสารถูกเลื่อน^[20]

ลอยและชัดเจน

floatคุณสมบัติอาจจะมีหนึ่งในสามของค่า ไม่สามารถลอยรายการตำแหน่งที่แน่นอนหรือคงที่ได้ องค์ประกอบอื่น ๆ ได้ตามปกติการไหลของรายการรอบลอยจนกว่าพวกเขาจะมีการป้องกันจากการทำเช่นนี้โดยพวกเขาclearคุณสมบัติ

ซ้าย

รายการลอยอยู่ทางด้านซ้ายของบรรทัดที่มันจะปรากฏ รายการอื่นอาจไหลไปทางด้านขวา

ขวา

รายการลอยอยู่ทางด้านขวาของบรรทัดที่มันจะปรากฏ สิ่งของอื่นๆ อาจไหลไปทางด้านซ้าย

แจ่มใส

บังคับให้องค์ประกอบปรากฏภายใต้ ('ชัดเจน') องค์ประกอบลอยไปทางซ้าย ( ), ขวา ( ) หรือทั้งสองด้าน ( ) ^{(20) [21]}clear:leftclear:rightclear:both

ประวัติ

Håkon Wium Lieหัวหน้าฝ่ายเทคนิคของบริษัท Opera Software และผู้ร่วมสร้างมาตรฐานเว็บ CSS

CSS ถูกเสนอครั้งแรกโดยHåkon Wium Lieที่ 10 ตุลาคม 1994 ^[22]ในขณะที่โกหกได้ทำงานกับTim Berners-Leeที่เซิร์น ^[23]ภาษาสไตล์ชีตอื่น ๆ อีกหลายภาษาสำหรับเว็บได้รับการเสนอในเวลาเดียวกัน และการอภิปรายเกี่ยวกับรายชื่อผู้รับจดหมายสาธารณะและภายในWorld Wide Web Consortiumส่งผลให้มีการแนะนำ W3C CSS (CSS1) ฉบับแรก^[24]ออกในปี พ.ศ. 2539 โดยเฉพาะ ข้อเสนอของเบิร์ต บอสมีอิทธิพลมาก เขากลายเป็นผู้ร่วมเขียน CSS1 และถือเป็นผู้ร่วมสร้าง CSS ^[25]

สไตล์ชีตมีอยู่ในรูปแบบใดรูปแบบหนึ่งตั้งแต่เริ่มต้น Standard Generalized Markup Language ( SGML ) ในทศวรรษ 1980 และ CSS ได้รับการพัฒนาเพื่อจัดเตรียมสไตล์ชีตสำหรับเว็บ^[26]ข้อกำหนดประการหนึ่งสำหรับภาษาของสไตล์ชีตของเว็บคือสำหรับสไตล์ชีตที่มาจากแหล่งต่างๆ บนเว็บ ดังนั้น ภาษาของสไตล์ชีตที่มีอยู่ เช่นDSSSLและFOSIจึงไม่เหมาะ ในทางกลับกัน CSS ให้สไตล์ของเอกสารได้รับอิทธิพลจากสไตล์ชีตหลายแบบโดยใช้สไตล์ "เรียงซ้อน" ⁽²⁶⁾

เป็น HTML ขึ้นมาเพื่อให้ครอบคลุมความหลากหลายมากขึ้นของความสามารถในโวหารเพื่อตอบสนองความต้องการของนักพัฒนาเว็บวิวัฒนาการนี้ทำให้นักออกแบบสามารถควบคุมลักษณะที่ปรากฏของไซต์ได้มากขึ้น โดยใช้ HTML ที่ซับซ้อนมากขึ้น รูปแบบในเว็บเบราเซอร์การใช้งานเช่นViolaWWWและWorldWideWeb , ^[27]ปรากฏตัวเว็บไซต์สอดคล้องยากและผู้ใช้ต้องควบคุมน้อยกว่าวิธีการที่เนื้อหาเว็บแสดง เบราว์เซอร์/ตัวแก้ไขที่พัฒนาโดย Tim Berners-Lee มีสไตล์ชีตที่ฮาร์ดโค้ดลงในโปรแกรม ดังนั้นจึงไม่สามารถเชื่อมโยงสไตล์ชีตกับเอกสารบนเว็บได้^[23]โรเบิร์ต ไคลิอู เช่นเดียวกับ CERN ที่ต้องการแยกโครงสร้างออกจากการนำเสนอเพื่อให้สไตล์ชีตที่แตกต่างกันสามารถอธิบายการนำเสนอที่แตกต่างกันสำหรับการพิมพ์ การนำเสนอบนหน้าจอ และบรรณาธิการ^[27]

การปรับปรุงความสามารถในการนำเสนอเว็บเป็นหัวข้อที่น่าสนใจสำหรับหลาย ๆ คนในชุมชนเว็บ และมีการเสนอภาษาของสไตล์ชีตที่แตกต่างกัน 9 ภาษาในรายการส่งเมลแบบ www ^[26]จากข้อเสนอเก้าข้อนี้ สองข้อเสนอมีอิทธิพลอย่างยิ่งต่อสิ่งที่กลายเป็น CSS: Cascading HTML Style Sheets ^[22]และ Stream-based Style Sheet Proposal (SSP) ^{[25] [28]}สองเบราว์เซอร์ทำหน้าที่เป็นเตียงทดสอบสำหรับข้อเสนอเบื้องต้น Lie ทำงานร่วมกับYves Lafonเพื่อปรับใช้ CSS ในเบราว์เซอร์ArenaของDave Raggett ^{[29] [30] [31]}เบิร์ต บอส ใช้ข้อเสนอ SSP ของเขาเองในเบราว์เซอร์Argo ^[25]หลังจากนั้น Lie และ Bos ได้ทำงานร่วมกันเพื่อพัฒนามาตรฐาน CSS (ตัว 'H' ถูกลบออกจากชื่อเนื่องจากสไตล์ชีตเหล่านี้สามารถนำไปใช้กับภาษามาร์กอัปอื่นๆ นอกเหนือจาก HTML ได้) ^[23]

ข้อเสนอของ Lie ถูกนำเสนอในการประชุม " Mosaic and the Web " (ภายหลังเรียกว่า WWW2) ในเมืองชิคาโก รัฐอิลลินอยส์ ในปี 1994 และอีกครั้งกับ Bert Bos ในปี 1995 ^[23]ในช่วงเวลานี้ W3C ได้ถูกสร้างขึ้นแล้วและได้รับความสนใจ ในการพัฒนา CSS มันจัดอบรมเชิงปฏิบัติการในช่วงท้ายที่เป็นประธานโดยสตีเฟนเพมเบอร์ตันส่งผลให้ W3C เพิ่มงานใน CSS ให้กับผลงานของคณะกรรมการตรวจสอบบรรณาธิการ HTML (ERB) Lie และ Bos เป็นเจ้าหน้าที่ด้านเทคนิคหลักในด้านนี้ของโครงการ โดยมีสมาชิกเพิ่มเติม รวมถึงThomas Reardonจาก Microsoft เข้าร่วมด้วย ในเดือนสิงหาคม พ.ศ. 2539 Netscape Communication Corporation ได้นำเสนอภาษาสไตล์ชีตทางเลือกที่เรียกว่าสไตล์ชีต JavaScript (JSSS) ^[23]ข้อมูลจำเพาะยังไม่เสร็จสิ้น และเลิกใช้แล้ว ^[32]ภายในสิ้นปี 2539 CSS ก็พร้อมที่จะเป็นทางการ และคำแนะนำ CSS ระดับ 1 ได้รับการเผยแพร่ในเดือนธันวาคม

การพัฒนา HTML, CSS และDOMทั้งหมดเกิดขึ้นในกลุ่มเดียว นั่นคือ HTML Editorial Review Board (ERB) ในช่วงต้นปี 1997 ERB ถูกแบ่งออกเป็นสามกลุ่มงาน: HTML Working groupโดยมีDan Connollyแห่ง W3C เป็นประธาน; คณะทำงาน DOM โดยมี Lauren Wood แห่งSoftQuadเป็นประธาน; และCSS Working groupโดยมีChris Lilleyแห่ง W3C เป็นประธาน

คณะทำงาน CSS เริ่มจัดการกับปัญหาที่ไม่ได้รับการจัดการกับ CSS ระดับ 1 ส่งผลให้มีการสร้าง CSS ระดับ 2 เมื่อวันที่ 4 พฤศจิกายน 1997 ได้รับการตีพิมพ์เป็นคำแนะนำของ W3C เมื่อวันที่ 12 พฤษภาคม 1998 CSS ระดับ 3 ซึ่งเป็น เริ่มในปี 2541 ยังอยู่ระหว่างการพัฒนาในปี 2557

ในปี 2548 คณะทำงาน CSS ได้ตัดสินใจที่จะบังคับใช้ข้อกำหนดสำหรับมาตรฐานต่างๆ อย่างเคร่งครัดมากขึ้น ซึ่งหมายความว่ามาตรฐานที่เผยแพร่แล้ว เช่น CSS 2.1, CSS 3 Selectors และ CSS 3 Text ถูกดึงกลับจาก Candidate Recommendation เป็น Working Draft

ความยากลำบากในการรับเลี้ยงบุตรบุญธรรม

ข้อกำหนด CSS 1 เสร็จสมบูรณ์ในปี 1996 Internet Explorer 3 ^[23]ของ Microsoft เปิดตัวในปีนั้น โดยมีการสนับสนุนที่จำกัดสำหรับ CSS IE 4และNetscape 4.x ได้เพิ่มการสนับสนุนมากขึ้น แต่โดยทั่วไปแล้วจะไม่สมบูรณ์และมีข้อบกพร่องมากมายที่ทำให้ CSS ไม่สามารถนำมาใช้ประโยชน์ได้ เป็นเวลากว่าสามปีก่อนที่เว็บเบราว์เซอร์ใด ๆ จะใช้งานข้อกำหนดนี้จนเกือบสมบูรณ์Internet Explorer 5.0สำหรับMacintoshซึ่งจัดส่งในเดือนมีนาคม 2000 เป็นเบราว์เซอร์ตัวแรกที่รองรับ CSS 1 เต็มรูปแบบ (ดีกว่า 99 เปอร์เซ็นต์) ^[33]เหนือกว่าOperaซึ่งเป็นผู้นำตั้งแต่เปิดตัว CSS รองรับเมื่อ 15 เดือนก่อน เบราว์เซอร์อื่นๆ ตามมาหลังจากนั้นไม่นาน และหลายๆ เบราว์เซอร์ได้นำส่วนต่างๆ ของ CSS 2 มาใช้เพิ่มเติม^{[ ต้องการการอ้างอิง ]}

อย่างไรก็ตามแม้ในขณะที่ต่อมา 'รุ่น 5' เว็บเบราว์เซอร์เริ่มที่จะมีการดำเนินการอย่างเป็นธรรมเต็มรูปแบบของ CSS, พวกเขายังคงไม่ถูกต้องในบางพื้นที่และเต็มไปด้วยความไม่สอดคล้องกันแมลงและอื่น ๆ ที่นิสัยใจคอ Microsoft Internet Explorer 5.x สำหรับ Windowsต่างจากIE ที่แตกต่างกันมากสำหรับ Macintoshมีการนำ ' รูปแบบกล่อง CSS ' ไปใช้อย่างมีข้อบกพร่องเมื่อเทียบกับมาตรฐาน CSS ไม่สอดคล้องกันและการเปลี่ยนแปลงในการสนับสนุนคุณสมบัติดังกล่าวทำให้มันยากสำหรับนักออกแบบเพื่อให้บรรลุลักษณะที่สอดคล้องกันในเบราว์เซอร์และแพลตฟอร์มโดยไม่ต้องใช้วิธีการแก้ปัญหาที่เรียกว่าแฮ็ก CSS และฟิลเตอร์บั๊กของโมเดลกล่อง IE/Windows นั้นร้ายแรงมากเมื่อInternet Explorer 6เปิดตัวแล้ว Microsoft ได้แนะนำโหมดการตีความ CSS ที่เข้ากันได้แบบย้อนหลัง (' โหมด quirks ') ควบคู่ไปกับ 'โหมดมาตรฐาน' ที่แก้ไขแล้ว เบราว์เซอร์อื่นที่ไม่ใช่ของ Microsoft ยังให้ความสามารถในการทำงานของสวิตช์ 'โหมด' ดังนั้นจึงกลายเป็นสิ่งจำเป็นสำหรับผู้เขียนไฟล์HTMLเพื่อให้แน่ใจว่ามีเครื่องหมาย 'มาตรฐาน CSS ที่ตั้งใจไว้' ที่โดดเด่นเป็นพิเศษเพื่อแสดงว่าผู้เขียนตั้งใจให้ CSS ตีความอย่างถูกต้อง สอดคล้องกับมาตรฐาน ตรงข้ามกับที่ตั้งใจไว้เป็นเวลานานเบราว์เซอร์ IE5/Windows ที่ล้าสมัย. หากไม่มีเครื่องหมายนี้ เว็บเบราว์เซอร์ที่มีความสามารถในการสลับ 'โหมดแปลก' จะปรับขนาดวัตถุในหน้าเว็บเหมือนกับ IE5/Windows แทนที่จะปฏิบัติตามมาตรฐาน CSS ^{[ ต้องการการอ้างอิง ]}

ปัญหาเกี่ยวกับการนำ CSS มาใช้เป็นหย่อม ๆ ร่วมกับ errata ในข้อกำหนดดั้งเดิม ทำให้ W3C แก้ไขมาตรฐาน CSS 2 เป็น CSS 2.1 ซึ่งย้ายไปอยู่ใกล้สแนปชอตที่ใช้งานได้ของการสนับสนุน CSS ปัจจุบันในเบราว์เซอร์ HTML คุณสมบัติ CSS 2 บางอย่างที่เบราว์เซอร์ใช้งานไม่สำเร็จถูกละทิ้ง และในบางกรณี พฤติกรรมที่กำหนดไว้ก็เปลี่ยนไปเพื่อให้มาตรฐานสอดคล้องกับการใช้งานที่มีอยู่อย่างเด่นๆ CSS 2.1 กลายเป็น Candidate Recommendation เมื่อวันที่ 25 กุมภาพันธ์ พ.ศ. 2547 แต่ CSS 2.1 ถูกดึงกลับไปที่สถานะ Working Draft เมื่อวันที่ 13 มิถุนายน พ.ศ. 2548 ^[34]และกลับสู่สถานะ Candidate Recommendation ในวันที่ 19 กรกฎาคม พ.ศ. 2550 ^[35]

นอกเหนือจากปัญหาเหล่านี้.cssส่วนขยายยังถูกใช้โดยผลิตภัณฑ์ซอฟต์แวร์ที่ใช้ในการแปลงไฟล์PowerPointเป็นไฟล์ Compact Slide Show ^[36] ดังนั้นเว็บเซิร์ฟเวอร์บางแห่งจึงให้บริการทั้งหมด.css^[37]เป็นประเภท MIME application/x-pointplus^[38]แทนที่จะเป็นtext/css.

คำนำหน้าผู้ขาย

ผู้จำหน่ายเบราว์เซอร์แต่ละรายแนะนำพารามิเตอร์ใหม่เป็นครั้งคราวก่อนการทำให้เป็นมาตรฐานและการทำให้เป็นสากล เพื่อป้องกันไม่ให้ยุ่งกับการใช้งานในอนาคตผู้ขาย prepended ชื่อที่ไม่ซ้ำกับพารามิเตอร์เช่น-moz-สำหรับMozilla Firefox , -webkit-การตั้งชื่อตามเครื่องมือการเรียกดูของApple Safari , -o-สำหรับเบราเซอร์ Operaและ-ms-สำหรับMicrosoft Internet Explorer

ในบางครั้ง พารามิเตอร์ที่มีคำนำหน้าผู้ขาย เช่น-moz-radial-gradientและ-webkit-linear-gradientมีไวยากรณ์ที่แตกต่างกันเล็กน้อยเมื่อเปรียบเทียบกับคำนำหน้าที่ไม่ใช่ของผู้ขาย ^[39]

คุณสมบัตินำหน้าจะล้าสมัยเมื่อถึงเวลากำหนดมาตรฐาน มีโปรแกรมให้เพิ่มคำนำหน้าโดยอัตโนมัติสำหรับเบราว์เซอร์รุ่นเก่า และเพื่อชี้ให้เห็นพารามิเตอร์นำหน้าเวอร์ชันมาตรฐาน เนื่องจากคำนำหน้าจำกัดไว้เฉพาะส่วนย่อยของเบราว์เซอร์ การลบคำนำหน้าจะทำให้เบราว์เซอร์อื่นๆ มองเห็นฟังก์ชันการทำงานได้ ข้อยกเว้นคือ-webkit-คุณสมบัตินำหน้าที่ล้าสมัยซึ่งพบได้ทั่วไปและคงอยู่บนเว็บซึ่งเบราว์เซอร์ตระกูลอื่นๆ ได้ตัดสินใจสนับสนุนคุณสมบัติเหล่านี้เพื่อความเข้ากันได้ ^[40]

รูปแบบต่างๆ

CSS มีระดับและโปรไฟล์ที่หลากหลาย CSS แต่ละระดับสร้างขึ้นจากส่วนสุดท้าย โดยทั่วไปจะเพิ่มคุณสมบัติใหม่และโดยทั่วไปจะแสดงเป็น CSS 1, CSS 2, CSS 3 และ CSS 4 โดยทั่วไปแล้ว โปรไฟล์จะเป็นชุดย่อยของ CSS หนึ่งระดับขึ้นไปที่สร้างขึ้นสำหรับอุปกรณ์หรือส่วนต่อประสานผู้ใช้เฉพาะ . ปัจจุบันมีโปรไฟล์สำหรับอุปกรณ์พกพา เครื่องพิมพ์ และโทรทัศน์ โปรไฟล์ไม่ควรสับสนกับประเภทสื่อที่เพิ่มใน CSS 2

CSS 1

ข้อกำหนด CSS แรกที่จะกลายเป็นคำแนะนำของ W3C อย่างเป็นทางการคือ CSS ระดับ 1 ซึ่งเผยแพร่เมื่อวันที่ 17 ธันวาคม พ.ศ. 2539 Håkon Wium LieและBert Bosได้รับการยกย่องว่าเป็นนักพัฒนาดั้งเดิม ^{[41] [42]}ความสามารถของมันคือการสนับสนุนสำหรับ

• คุณสมบัติแบบอักษรเช่น แบบอักษรและการเน้น
• สีของข้อความ พื้นหลัง และองค์ประกอบอื่นๆ
• คุณสมบัติข้อความ เช่น การเว้นวรรคระหว่างคำ ตัวอักษร และบรรทัดข้อความ
• การจัดแนวข้อความ รูปภาพตารางและองค์ประกอบอื่นๆ
• ขอบ ขอบ ช่องว่างภายใน และการวางตำแหน่งสำหรับองค์ประกอบส่วนใหญ่
• การระบุเอกลักษณ์และการจำแนกประเภททั่วไปของกลุ่มคุณลักษณะ

W3C ไม่รักษา CSS 1 Recommendation อีกต่อไป ^[43]

CSS2

ข้อมูลจำเพาะ CSS ระดับ 2 ได้รับการพัฒนาโดย W3C และเผยแพร่เป็นคำแนะนำในเดือนพฤษภาคม 2541 ซูเปอร์เซ็ตของ CSS 1, CSS 2 มีความสามารถใหม่จำนวนหนึ่ง เช่น การจัดตำแหน่งองค์ประกอบแบบสัมบูรณ์ สัมพัทธ์ และตำแหน่งคงที่ และดัชนี zแนวคิดของ ประเภทสื่อ การรองรับสไตล์ชีตเกี่ยวกับหู (ซึ่งต่อมาถูกแทนที่ด้วยโมดูลเสียงพูด CSS 3) ^[44]และข้อความแบบสองทิศทาง และคุณสมบัติแบบอักษรใหม่ เช่น เงา

W3C ไม่รักษาคำแนะนำ CSS 2 อีกต่อไป ^[45]

CSS 2.1

การแก้ไข CSS ระดับ 2 1 ซึ่งมักเรียกว่า "CSS 2.1" แก้ไขข้อผิดพลาดใน CSS 2 ลบคุณลักษณะที่ได้รับการสนับสนุนไม่ดีหรือไม่สามารถทำงานร่วมกันได้อย่างสมบูรณ์ และเพิ่มส่วนขยายเบราว์เซอร์ที่ใช้งานแล้วลงในข้อกำหนด เพื่อให้สอดคล้องกับกระบวนการ W3C สำหรับการกำหนดมาตรฐานข้อกำหนดทางเทคนิค CSS 2.1 ได้สลับไปมาระหว่างสถานะ Working Draft และสถานะ Candidate Recommendation เป็นเวลาหลายปี CSS 2.1 กลายเป็นข้อแนะนำสำหรับผู้สมัครครั้งแรกเมื่อวันที่ 25 กุมภาพันธ์ พ.ศ. 2547 แต่ได้เปลี่ยนกลับไปเป็นแบบร่างการทำงานเมื่อวันที่ 13 มิถุนายน พ.ศ. 2548 เพื่อตรวจสอบเพิ่มเติม เอกสารนี้กลับมาที่ Candidate Recommendation เมื่อวันที่ 19 กรกฎาคม 2550 และอัปเดตสองครั้งในปี 2552 อย่างไรก็ตาม เนื่องจากมีการเปลี่ยนแปลงและการชี้แจง จึงกลับไปใช้ Last Call Working Draft อีกครั้งในวันที่ 7 ธันวาคม 2553

CSS 2.1 ไปที่ Proposed Recommendation เมื่อวันที่ 12 เมษายน 2011 ^[46]หลังจากได้รับการตรวจสอบโดยคณะกรรมการที่ปรึกษา W3C ในที่สุดก็ได้รับการตีพิมพ์เป็นคำแนะนำของ W3C เมื่อวันที่ 7 มิถุนายน 2554 ^[47]

CSS 2.1 ได้รับการวางแผนให้เป็นการแก้ไขครั้งแรกและครั้งสุดท้ายของระดับ 2—แต่งานที่มีลำดับความสำคัญต่ำใน CSS 2.2 เริ่มขึ้นในปี 2558

CSS3

ต่างจาก CSS 2 ซึ่งเป็นข้อกำหนดเดียวขนาดใหญ่ที่กำหนดคุณลักษณะต่างๆ CSS 3 ถูกแบ่งออกเป็นเอกสารหลายฉบับที่เรียกว่า "โมดูล" แต่ละโมดูลเพิ่มความสามารถใหม่หรือขยายคุณสมบัติที่กำหนดไว้ใน CSS 2 เพื่อรักษาความเข้ากันได้แบบย้อนหลัง งานเกี่ยวกับ CSS ระดับ 3 เริ่มต้นขึ้นในช่วงเวลาของการเผยแพร่คำแนะนำ CSS 2 ดั้งเดิม ฉบับร่าง CSS 3 แรกสุดถูกตีพิมพ์ในเดือนมิถุนายน พ.ศ. 2542 ^[48]

เนื่องจากโมดูลาร์ไดเซชั่น โมดูลต่างๆ จึงมีเสถียรภาพและสถานะต่างกัน ^[49]

โมดูลบางโมดูลมีสถานะการแนะนำผู้สมัคร ( CR ) และถือว่ามีเสถียรภาพปานกลาง ที่ขั้นตอนCRแนะนำให้ทำการปรับใช้เพื่อลบคำนำหน้าผู้ขาย ^[50]

CSS 4

เล่นสื่อ

Jen Simmonsพูดคุยเกี่ยวกับสถานะของ CSS ในปี 2019 เนื่องจาก โมดูลCSS 4 หลายโมดูลกำลังอยู่ในขั้นสูง

ไม่มีข้อกำหนด CSS4 แบบบูรณาการเดียว^[52]เนื่องจากข้อกำหนดนี้ถูกแบ่งออกเป็นโมดูลที่แยกจากกันจำนวนมากซึ่งมีระดับอย่างอิสระ

โมดูลที่สร้างในสิ่งที่จาก CSS ระดับที่ 2 เริ่มต้นที่ระดับ 3 บางส่วนของพวกเขาได้มาถึงแล้วระดับ 4 หรือที่มีอยู่แล้วใกล้ระดับ 5 โมดูลอื่น ๆ ที่กำหนดฟังก์ชันการทำงานใหม่ทั้งหมดเช่นflexbox , ^[53]ได้รับการกำหนดให้เป็นระดับ 1 และบางส่วนก็ใกล้จะถึงระดับ 2 แล้ว

บางครั้ง คณะทำงาน CSS จะเผยแพร่ "Snapshots" ซึ่งเป็นชุดของโมดูลทั้งหมดและบางส่วนของแบบร่างอื่นๆ ที่ถือว่าเสถียรพอที่จะนำไปใช้โดยนักพัฒนาเบราว์เซอร์ จนถึงตอนนี้ เอกสาร "แนวทางปฏิบัติที่ดีที่สุดในปัจจุบัน" ห้าฉบับได้รับการเผยแพร่เป็น Notes ในปี 2550, ^[54] 2010, ^[55] 2015, ^[56] 2017, ^[57]และ 2018 ^[58]

เนื่องจากสแนปชอตข้อมูลจำเพาะเหล่านี้มีไว้สำหรับนักพัฒนาเป็นหลัก จึงมีความต้องการเพิ่มขึ้นสำหรับเอกสารอ้างอิงเวอร์ชันที่คล้ายกันซึ่งกำหนดเป้าหมายไปที่ผู้เขียน ซึ่งจะนำเสนอสถานะของการใช้งานที่ทำงานร่วมกันได้ในขณะที่จัดทำเอกสารโดยไซต์เช่น Can I Use… ^[59]และ Mozilla Developer เครือข่าย. ^[60]กลุ่มชุมชน W3C ได้รับการจัดตั้งขึ้นในต้นปี 2563 เพื่อหารือและกำหนดทรัพยากรดังกล่าว ^[61]ประเภทของการกำหนดเวอร์ชันที่แท้จริงนั้นขึ้นอยู่กับการถกเถียง ซึ่งหมายความว่าเอกสารที่สร้างขึ้นอาจไม่ถูกเรียกว่า "CSS4"

รองรับเบราว์เซอร์

เว็บเบราว์เซอร์แต่ละตัวใช้เอ็นจินการจัดวางเพื่อแสดงหน้าเว็บ และการรองรับฟังก์ชัน CSS นั้นไม่สอดคล้องกัน เนื่องจากเบราว์เซอร์ไม่ได้แยกวิเคราะห์ CSS อย่างสมบูรณ์ จึงมีการพัฒนาเทคนิคการเข้ารหัสหลายแบบเพื่อกำหนดเป้าหมายเบราว์เซอร์เฉพาะด้วยวิธีแก้ปัญหา (ที่รู้จักกันทั่วไปว่าCSS hacksหรือตัวกรอง CSS) การนำฟังก์ชันใหม่ใน CSS มาใช้อาจถูกขัดขวางโดยการขาดการสนับสนุนในเบราว์เซอร์หลัก ตัวอย่างเช่น Internet Explorer ได้เพิ่มการรองรับคุณลักษณะ CSS 3 จำนวนมากได้ช้า ซึ่งทำให้การนำคุณลักษณะเหล่านั้นไปใช้ช้าลงและทำให้นักพัฒนาซอฟต์แวร์เสียชื่อเสียงของเบราว์เซอร์^[62]เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่สอดคล้องกัน นักพัฒนาเว็บมักจะทดสอบไซต์ของตนในระบบปฏิบัติการ เบราว์เซอร์ และเวอร์ชันของเบราว์เซอร์ที่หลากหลาย ช่วยเพิ่มเวลาในการพัฒนาและความซับซ้อน เครื่องมือเช่นBrowserStackได้รับการสร้างขึ้นเพื่อลดความซับซ้อนของการรักษาสภาพแวดล้อมเหล่านี้

นอกจากนี้เพื่อเป็นเครื่องมือในการทดสอบเหล่านี้เว็บไซต์จำนวนมากรักษารายการของการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติเฉพาะ CSS, รวมทั้งCanIUseและMozilla พัฒนาเครือข่ายนอกจากนี้ CSS 3 ยังกำหนดคิวรี่คุณลักษณะ ซึ่งให้@supportsคำสั่งที่จะช่วยให้นักพัฒนากำหนดเป้าหมายเบราว์เซอร์ด้วยการสนับสนุนสำหรับฟังก์ชันการทำงานบางอย่างโดยตรงภายใน CSS ของตน^[63] CSS ที่เบราว์เซอร์รุ่นเก่าไม่รองรับบางครั้งสามารถแก้ไขโดยใช้ JavaScript polyfillsซึ่งเป็นโค้ด JavaScript ที่ออกแบบมาเพื่อให้เบราว์เซอร์ทำงานอย่างสม่ำเสมอ วิธีแก้ปัญหาชั่วคราวเหล่านี้—และความจำเป็นในการสนับสนุนฟังก์ชันทางเลือก—สามารถเพิ่มความซับซ้อนให้กับโครงการพัฒนา และด้วยเหตุนี้ บริษัทต่างๆ จึงมักกำหนดรายการเวอร์ชันของเบราว์เซอร์ที่จะและไม่สนับสนุน

เนื่องจากเว็บไซต์ใช้มาตรฐานโค้ดที่ใหม่กว่าซึ่งเข้ากันไม่ได้กับเบราว์เซอร์รุ่นเก่า เบราว์เซอร์เหล่านี้อาจถูกตัดขาดจากการเข้าถึงทรัพยากรจำนวนมากบนเว็บ (บางครั้งโดยเจตนา) ^[64]ไซต์ที่ได้รับความนิยมสูงสุดหลายแห่งบนอินเทอร์เน็ตไม่เพียงแต่เสื่อมคุณภาพทางสายตาในเบราว์เซอร์รุ่นเก่าเนื่องจากการสนับสนุน CSS ที่ไม่ดี แต่ยังไม่ทำงานเลย ส่วนใหญ่เป็นผลมาจากวิวัฒนาการของ JavaScript และเทคโนโลยีเว็บอื่นๆ

ข้อจำกัด

ข้อจำกัดบางประการของความสามารถในปัจจุบันของ CSS ได้แก่:

ผู้คัดเลือกไม่สามารถขึ้นไปได้

CSS ขณะนี้มีวิธีการที่จะเลือกไม่มีพ่อแม่หรือปู่ย่าตายายขององค์ประกอบที่ตรงกับเงื่อนไขบางอย่าง ^[65]ตัวเลือก CSS ระดับ 4 ซึ่งยังคงอยู่ในสถานะ Working Draft เสนอตัวเลือกดังกล่าว^[66]แต่เป็นส่วนหนึ่งของโปรไฟล์ตัวเลือก "สแนปชอต" ที่สมบูรณ์เท่านั้น ไม่ใช่โปรไฟล์ "ใช้งานจริง" แบบเร็วที่ใช้ในการจัดรูปแบบ CSS แบบไดนามิก ^[67]รูปแบบตัวเลือกขั้นสูง (เช่นXPath ) จะเปิดใช้งานสไตล์ชีตที่ซับซ้อนมากขึ้น สาเหตุหลักที่คณะทำงาน CSS ก่อนหน้านี้ปฏิเสธข้อเสนอสำหรับตัวเลือกหลักนั้นเกี่ยวข้องกับประสิทธิภาพของเบราว์เซอร์และปัญหาการแสดงผลที่เพิ่มขึ้น ^[68]

ไม่สามารถประกาศขอบเขตใหม่อย่างชัดเจนโดยไม่ขึ้นกับตำแหน่ง

กฎการกำหนดขอบเขตสำหรับคุณสมบัติ เช่น ดัชนี z จะค้นหาองค์ประกอบหลักที่ใกล้เคียงที่สุดด้วยแอตทริบิวต์ position:absolute หรือ position:relative การมีเพศสัมพันธ์แบบแปลก ๆ นี้มีผลที่ไม่พึงประสงค์ ตัวอย่างเช่น เป็นไปไม่ได้ที่จะหลีกเลี่ยงการประกาศขอบเขตใหม่เมื่อถูกบังคับให้ปรับตำแหน่งขององค์ประกอบ ป้องกันไม่ให้ใช้ขอบเขตที่ต้องการขององค์ประกอบหลัก

พฤติกรรมไดนามิกคลาสหลอกไม่สามารถควบคุมได้

CSS ใช้คลาสหลอกที่อนุญาตให้ผู้ใช้แสดงความคิดเห็นในระดับหนึ่งโดยการใช้สไตล์ทางเลือกแบบมีเงื่อนไข CSS pseudo-class หนึ่งคลาส " " เป็นไดนามิก (เทียบเท่ากับ JavaScript "onmouseover") และมีโอกาสนำไปใช้ในทางที่ผิด (เช่น การใช้ป๊อปอัปที่ใกล้เคียงเคอร์เซอร์) ^[69]แต่ CSS ไม่มีความสามารถสำหรับไคลเอ็นต์ในการปิดใช้งาน (ไม่มี "ปิดใช้งาน" คุณสมบัติเหมือน) หรือจำกัดเอฟเฟกต์ของมัน (ไม่มีค่าที่เหมือน "nochange" สำหรับแต่ละคุณสมบัติ):hover

ตั้งชื่อกฎไม่ได้

ไม่มีทางตั้งชื่อกฎ CSS ได้ ซึ่งจะทำให้ (เช่น) สคริปต์ฝั่งไคลเอ็นต์อ้างอิงถึงกฎได้ แม้ว่าตัวเลือกจะเปลี่ยนไปก็ตาม

ไม่สามารถรวมสไตล์จากกฎลงในกฎอื่นได้

สไตล์ CSS มักจะต้องทำซ้ำในหลายกฎเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ ทำให้เกิดการบำรุงรักษาเพิ่มเติมและต้องมีการทดสอบอย่างละเอียดถี่ถ้วนมากขึ้น มีการเสนอคุณลักษณะ CSS ใหม่บางส่วนเพื่อแก้ปัญหานี้ แต่ถูกยกเลิกในภายหลัง ^{[70] [71]}แต่ผู้เขียนอาจจะได้รับความสามารถนี้โดยใช้ภาษาสไตล์ชีตที่มีความซับซ้อนมากขึ้นซึ่งจะรวบรวม CSS เช่นSass , หักหรือสไตลัส

ไม่สามารถกำหนดเป้าหมายข้อความเฉพาะโดยไม่แก้ไขมาร์กอัป

นอกจากองค์ประกอบหลอกแล้ว เราไม่สามารถกำหนดเป้าหมายช่วงข้อความที่เฉพาะเจาะจงได้โดยไม่ต้องใช้องค์ประกอบตัวยึดตำแหน่ง:first-letter

เรื่องที่แล้ว

นอกจากนี้ ยังมีปัญหาอื่นๆ อีกหลายประการในมาตรฐาน CSS เวอร์ชันก่อนหน้า แต่ได้รับการบรรเทาแล้ว:

ข้อจำกัดในการควบคุมแนวตั้ง

แม้ว่าการจัดวางองค์ประกอบในแนวนอนโดยทั่วไปจะควบคุมได้ง่ายเสมอ แต่การจัดวางในแนวตั้งมักไม่เป็นธรรมชาติ ซับซ้อน หรือเป็นไปไม่ได้เลย งานง่ายๆ เช่น การจัดองค์ประกอบให้อยู่ตรงกลางในแนวตั้งหรือการวางส่วนท้ายไม่สูงกว่าด้านล่างของวิวพอร์ต จำเป็นต้องมีกฎรูปแบบที่ซับซ้อนและไม่เป็นธรรมชาติ หรือกฎธรรมดาแต่ไม่ได้รับการสนับสนุนอย่างกว้างขวาง ^[65]โมดูลกล่องแบบยืดหยุ่นได้ปรับปรุงสถานการณ์อย่างมาก และการควบคุมแนวตั้งนั้นตรงไปตรงมามากกว่ามาก และรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ^[72]เบราว์เซอร์รุ่นเก่ายังคงมีปัญหาเหล่านั้น แต่ส่วนใหญ่ (ส่วนใหญ่คือ Internet Explorer 9 และต่ำกว่า) ไม่ได้รับการสนับสนุนจากผู้จำหน่ายอีกต่อไป ^[73]

ไม่มีนิพจน์

ไม่มีความสามารถมาตรฐานในการระบุค่าคุณสมบัติเป็นนิพจน์ทั่วไป (เช่น) ซึ่งจะเป็นประโยชน์ในหลายกรณี เช่น การคำนวณขนาดของคอลัมน์ภายใต้ข้อจำกัดของผลรวมของคอลัมน์ทั้งหมด Internet Explorer เวอร์ชัน 5 ถึง 7 รองรับคำสั่ง expression() ที่เป็นกรรมสิทธิ์^{[74] ที่}มีฟังก์ชันการทำงานที่คล้ายคลึงกัน คำสั่ง expression() ที่เป็นกรรมสิทธิ์นี้ไม่ได้รับการสนับสนุนจาก Internet Explorer 8 เป็นต้นไป ยกเว้นในโหมดความเข้ากันได้ การตัดสินใจนี้เกิดขึ้นเนื่องจาก "การปฏิบัติตามมาตรฐาน ประสิทธิภาพของเบราว์เซอร์ และเหตุผลด้านความปลอดภัย" ^[74]อย่างไรก็ตามคำแนะนำผู้สมัครที่มีค่า calc() เพื่อแก้ไขข้อจำกัดนี้ได้รับการเผยแพร่โดย CSS WG ^[75]margin-left: 10% – 3em + 4px;และได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด ^[76]

ขาดการประกาศคอลัมน์

แม้ว่าจะเป็นไปได้ใน CSS 3 ปัจจุบัน (โดยใช้column-countโมดูล) เลย์เอาต์^{[77] ที่}มีหลายคอลัมน์อาจมีความซับซ้อนในการใช้งานใน CSS 2.1 ด้วย CSS 2.1 กระบวนการมักจะทำโดยใช้องค์ประกอบแบบลอย ซึ่งมักจะแสดงผลแตกต่างกันไปตามเบราว์เซอร์ต่างๆ รูปร่างหน้าจอคอมพิวเตอร์ที่แตกต่างกัน และอัตราส่วนหน้าจอต่างๆ ที่ตั้งค่าไว้บนจอภาพมาตรฐาน เบราว์เซอร์สมัยใหม่ทั้งหมดสนับสนุนคุณลักษณะ CSS 3 นี้ในรูปแบบใดรูปแบบหนึ่ง ^[78]

ข้อดี

การแยกเนื้อหาออกจากการนำเสนอ

CSS อำนวยความสะดวกในการเผยแพร่เนื้อหาในรูปแบบการนำเสนอที่หลากหลายตามพารามิเตอร์ที่ระบุ พารามิเตอร์ที่กำหนดรวมถึงการตั้งค่าที่ชัดเจนของผู้ใช้ เว็บเบราว์เซอร์ต่างๆ ประเภทของอุปกรณ์ที่ใช้เพื่อดูเนื้อหา (คอมพิวเตอร์เดสก์ท็อปหรืออุปกรณ์เคลื่อนที่) ตำแหน่งทางภูมิศาสตร์ของผู้ใช้ และตัวแปรอื่นๆ อีกมากมาย

ความสม่ำเสมอทั่วทั้งไซต์

เมื่อใช้ CSS อย่างมีประสิทธิภาพ ในแง่ของการสืบทอดและ "การเรียงซ้อน" คุณสามารถใช้สไตล์ชีตส่วนกลางเพื่อสร้างผลกระทบและจัดรูปแบบองค์ประกอบทั่วทั้งไซต์ หากเกิดสถานการณ์ขึ้นว่าการจัดสไตล์ขององค์ประกอบควรเปลี่ยนแปลงหรือปรับเปลี่ยน การเปลี่ยนแปลงเหล่านี้สามารถทำได้โดยการแก้ไขกฎในสไตล์ชีตส่วนกลาง ก่อนหน้า CSS การบำรุงรักษาประเภทนี้ยากกว่า มีราคาแพง และใช้เวลานานกว่า

แบนด์วิดธ์

สไตล์ชีต ทั้งภายในและภายนอก ระบุสไตล์หนึ่งครั้งสำหรับช่วงขององค์ประกอบ HTML ที่เลือกโดยclassประเภท หรือความสัมพันธ์กับผู้อื่น สิ่งนี้มีประสิทธิภาพมากกว่าการทำซ้ำข้อมูลสไตล์แบบอินไลน์สำหรับองค์ประกอบแต่ละรายการ โดยปกติ สไตล์ชีตภายนอกจะถูกจัดเก็บไว้ในแคชของเบราว์เซอร์ดังนั้นจึงสามารถใช้ได้หลายหน้าโดยไม่ต้องโหลดซ้ำ ซึ่งจะช่วยลดการถ่ายโอนข้อมูลผ่านเครือข่ายได้อีก

การจัดรูปแบบหน้าใหม่

ด้วยการเปลี่ยนแปลงง่ายๆ เพียงบรรทัดเดียว คุณสามารถใช้สไตล์ชีตที่แตกต่างกันสำหรับหน้าเดียวกันได้ มีข้อดีสำหรับการเข้าถึง ตลอดจนความสามารถในการปรับแต่งเพจหรือไซต์ให้เข้ากับอุปกรณ์เป้าหมายต่างๆ นอกจากนี้ อุปกรณ์ที่ไม่เข้าใจสไตล์ยังคงแสดงเนื้อหา

การเข้าถึง

หากไม่มี CSS นักออกแบบเว็บไซต์มักจะต้องจัดวางหน้าเว็บด้วยเทคนิคต่างๆ เช่น ตาราง HTML ที่ขัดขวางการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น (ดูTableless web design#Accessibility )

การทำให้เป็นมาตรฐาน

กรอบงาน

เฟรมเวิร์ก CSSเป็นไลบรารีที่จัดเตรียมไว้ล่วงหน้าเพื่อให้จัดรูปแบบหน้าเว็บที่เป็นไปตามมาตรฐานได้ง่ายขึ้นโดยใช้ภาษา Cascading Style Sheets เฟรมเวิร์ก CSS ได้แก่Blueprint , Bootstrap , Foundationและ Materialize เช่นเดียวกับไลบรารีภาษาการเขียนโปรแกรมและสคริปต์ เฟรมเวิร์ก CSS มักจะรวมเป็นชีต .css ภายนอกที่อ้างอิงใน HTML<head>. พวกเขามีตัวเลือกสำเร็จรูปมากมายสำหรับการออกแบบและจัดวางหน้าเว็บ แม้ว่าเฟรมเวิร์กเหล่านี้จำนวนมากได้รับการเผยแพร่แล้ว แต่ผู้เขียนบางคนใช้เฟรมเวิร์กเหล่านี้สำหรับการสร้างต้นแบบอย่างรวดเร็ว หรือเพื่อการเรียนรู้จาก และชอบ 'งานฝีมือ' CSS ที่เหมาะสมกับไซต์ที่เผยแพร่แต่ละแห่งโดยไม่มีค่าใช้จ่ายในการออกแบบ บำรุงรักษา และดาวน์โหลดจากการมีคุณสมบัติที่ไม่ได้ใช้มากมาย ในการออกแบบเว็บไซต์ ^[79]

วิธีการออกแบบ

เนื่องจากขนาดของทรัพยากร CSS ที่ใช้ในโปรเจ็กต์เพิ่มขึ้น ทีมพัฒนามักจะต้องตัดสินใจเกี่ยวกับวิธีการออกแบบทั่วไปเพื่อจัดระเบียบ เป้าหมายคือความง่ายในการพัฒนา ความง่ายในการทำงานร่วมกันระหว่างการพัฒนา และประสิทธิภาพของสไตล์ชีตที่ปรับใช้ในเบราว์เซอร์ วิธีการยอดนิยม ได้แก่ OOCSS ( CSS เชิงวัตถุ), ACSS (atomic CSS), oCSS (สไตล์ชีต Cascade อินทรีย์), SMACSS (สถาปัตยกรรมที่ปรับขนาดได้และโมดูลาร์สำหรับ CSS) และ BEM (บล็อก องค์ประกอบ ตัวดัดแปลง) ^[80]

อ้างอิง