CSS

เบราว์เซอร์จะพิจารณาว่าสไตล์ใดที่จะแสดงบนองค์ประกอบขึ้นอยู่กับความจำเพาะของกฎ CSS เราถือว่าเบราว์เซอร์ได้พิจารณากฎที่ตรงกับองค์ประกอบเฉพาะแล้ว ในบรรดากฎที่ตรงกัน ความจำเพาะ ซึ่งประกอบด้วยค่าสี่ค่าที่คั่นด้วยเครื่องหมายจุลภาค a, b, c, d จะถูกคำนวณสำหรับแต่ละกฎโดยอิงตามสิ่งต่อไปนี้:

1. a คือการใช้อินไลน์สไตล์หรือไม่ ถ้าการประกาศคุณสมบัติเป็นอินไลน์สไตล์บนองค์ประกอบ a คือ 1 มิฉะนั้นจะเป็น 0
2. b คือจำนวน ID selector
3. c คือจำนวนคลาส แอตทริบิวต์ และ pseudo-classes selector
4. d คือจำนวนแท็กและ pseudo-elements selector

ความจำเพาะที่ได้ไม่ใช่คะแนน แต่เป็นเมทริกซ์ของค่าที่สามารถเปรียบเทียบทีละคอลัมน์ได้ เมื่อเปรียบเทียบ selector เพื่อพิจารณาว่าอันไหนมีความจำเพาะสูงสุด ให้ดูจากซ้ายไปขวา และเปรียบเทียบค่าสูงสุดในแต่ละคอลัมน์ ดังนั้นค่าในคอลัมน์ b จะแทนที่ค่าในคอลัมน์ c และ d ไม่ว่าจะเป็นค่าใดก็ตาม ด้วยเหตุนี้ ความจำเพาะของ 0,1,0,0 จะมากกว่า 0,0,10,10

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

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

• Resetting - Resetting มีจุดประสงค์เพื่อลบการจัดรูปแบบเริ่มต้นทั้งหมดของเบราว์เซอร์บนองค์ประกอบต่างๆ เช่น margins, paddings, font-sizes ขององค์ประกอบทั้งหมดจะถูกรีเซ็ตให้เหมือนกัน คุณจะต้องประกาศการจัดรูปแบบใหม่สำหรับองค์ประกอบการพิมพ์ทั่วไป
• Normalizing - Normalizing จะรักษาสไตล์เริ่มต้นที่มีประโยชน์ไว้แทนที่จะ "ไม่จัดรูปแบบ" ทุกอย่าง นอกจากนี้ยังแก้ไขข้อบกพร่องสำหรับเบราว์เซอร์ทั่วไป

ฉันจะเลือก resetting เมื่อฉันมีการออกแบบเว็บไซต์ที่ปรับแต่งสูงหรือไม่เป็นไปตามแบบแผน ทำให้ฉันต้องจัดรูปแบบของตัวเองมาก และไม่จำเป็นต้องรักษาสไตล์เริ่มต้นใดๆ ไว้

Float เป็นคุณสมบัติการวางตำแหน่ง CSS องค์ประกอบที่ลอยอยู่ยังคงเป็นส่วนหนึ่งของ flow ของหน้า และจะส่งผลต่อการวางตำแหน่งขององค์ประกอบอื่นๆ (เช่น ข้อความจะไหลรอบองค์ประกอบที่ลอยอยู่) ซึ่งแตกต่างจากองค์ประกอบ position: absolute ที่ถูกลบออกจาก flow ของหน้า

คุณสมบัติ CSS clear สามารถใช้เพื่อวางตำแหน่งด้านล่างองค์ประกอบที่ลอยอยู่ left/right/both

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

แฮก .clearfix ใช้ CSS pseudo selector ที่ชาญฉลาด (::after) เพื่อเคลียร์ floats แทนที่จะตั้งค่า overflow บนองค์ประกอบแม่ คุณใช้คลาสเพิ่มเติม clearfix กับมัน จากนั้นใช้ CSS นี้:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

อีกทางเลือกหนึ่งคือการกำหนดคุณสมบัติ overflow: auto หรือ overflow: hidden ให้กับองค์ประกอบแม่ ซึ่งจะสร้างบริบทการจัดรูปแบบบล็อกใหม่ภายในองค์ประกอบลูก และมันจะขยายเพื่อบรรจุองค์ประกอบลูก

คุณสมบัติ z-index ใน CSS ควบคุมลำดับการเรียงซ้อนในแนวตั้งขององค์ประกอบที่ทับซ้อนกัน z-index มีผลเฉพาะกับองค์ประกอบที่มีค่า position ที่ไม่ใช่ static

หากไม่มีค่า z-index องค์ประกอบจะเรียงซ้อนกันตามลำดับที่ปรากฏใน DOM (องค์ประกอบที่อยู่ต่ำสุดในระดับลำดับชั้นเดียวกันจะปรากฏอยู่ด้านบน) องค์ประกอบที่มีตำแหน่งที่ไม่ใช่ static (และองค์ประกอบลูก) จะปรากฏอยู่เหนือองค์ประกอบที่มีตำแหน่ง static เริ่มต้นเสมอ โดยไม่คำนึงถึงลำดับชั้นของ HTML

Stacking context คือองค์ประกอบที่ประกอบด้วยชุดของเลเยอร์ ภายใน stacking context ท้องถิ่น ค่า z-index ขององค์ประกอบลูกจะถูกตั้งค่าสัมพันธ์กับองค์ประกอบนั้น แทนที่จะสัมพันธ์กับรากเอกสาร เลเยอร์ภายนอกบริบทนั้น – เช่น องค์ประกอบพี่น้องของ stacking context ท้องถิ่น – ไม่สามารถอยู่ระหว่างเลเยอร์ภายในนั้นได้ หากองค์ประกอบ B อยู่เหนือองค์ประกอบ A องค์ประกอบลูกขององค์ประกอบ A คือองค์ประกอบ C จะไม่สามารถอยู่สูงกว่าองค์ประกอบ B ได้ แม้ว่าองค์ประกอบ C จะมี z-index สูงกว่าองค์ประกอบ B ก็ตาม

Stacking context แต่ละอันเป็นอิสระ – หลังจากเนื้อหาขององค์ประกอบถูกเรียงซ้อนกัน องค์ประกอบทั้งหมดจะถูกพิจารณาในลำดับการเรียงซ้อนของ stacking context แม่ คุณสมบัติ CSS จำนวนหนึ่งจะกระตุ้น stacking context ใหม่ เช่น opacity น้อยกว่า 1, filter ที่ไม่ใช่ none, และ transform ที่ไม่ใช่ none

_หมายเหตุ: สิ่งที่ทำให้องค์ประกอบสร้าง stacking context ได้อย่างแท้จริงนั้นระบุไว้ในชุดของ [กฎ] ที่ยาวนี้

Block Formatting Context (BFC) เป็นส่วนหนึ่งของการเรนเดอร์ CSS แบบภาพของหน้าเว็บที่กล่องบล็อกถูกจัดวาง Floats, องค์ประกอบที่จัดตำแหน่งแบบ absolute, inline-blocks, table-cells, table-captions และองค์ประกอบที่มี overflow อื่นๆ นอกเหนือจาก visible (ยกเว้นเมื่อค่านั้นถูกเผยแพร่ไปยัง viewport) จะสร้าง block formatting context ใหม่

การรู้วิธีการสร้าง block formatting context เป็นสิ่งสำคัญ เพราะหากไม่ทำเช่นนั้น กล่องบรรจุจะไม่ [มีลูกที่ลอยอยู่] นี่คล้ายกับการยุบขอบ แต่ร้ายกาจกว่าเพราะคุณจะพบว่ากล่องทั้งหมดยุบลงในลักษณะที่แปลกประหลาด

BFC เป็นกล่อง HTML ที่ตรงตามเงื่อนไขอย่างน้อยหนึ่งข้อต่อไปนี้:

• ค่าของ float ไม่ใช่ none
• ค่าของ position ไม่ใช่ทั้ง static หรือ relative
• ค่าของ display คือ table-cell, table-caption, inline-block, flex, หรือ inline-flex, grid, หรือ inline-grid
• ค่าของ overflow ไม่ใช่ visible

ใน BFC ขอบด้านนอกซ้ายของแต่ละกล่องจะสัมผัสกับขอบด้านซ้ายของบล็อกที่บรรจุอยู่ (สำหรับการจัดรูปแบบจากขวาไปซ้าย ขอบด้านขวาจะสัมผัส)

ระยะขอบแนวตั้งระหว่างกล่องระดับบล็อกที่อยู่ติดกันใน BFC จะยุบ อ่านเพิ่มเติมที่ [collapsing margins]

• วิธี div ว่างเปล่า - <div style="clear:both;"></div>
• วิธี Clearfix - อ้างถึงคลาส .clearfix ด้านบน
• วิธี overflow: auto หรือ overflow: hidden - องค์ประกอบแม่จะสร้างบริบทการจัดรูปแบบบล็อกใหม่และขยายเพื่อบรรจุองค์ประกอบลูกที่ลอยอยู่

ในโปรเจกต์ขนาดใหญ่ ฉันจะเขียนคลาส .clearfix สำหรับใช้ประโยชน์และใช้ในที่ที่ต้องการ overflow: hidden อาจตัดองค์ประกอบลูกออกหากองค์ประกอบลูกสูงกว่าองค์ประกอบแม่และไม่ค่อยเหมาะ

CSS sprites รวมหลายภาพเข้าเป็นภาพเดียวที่ใหญ่ขึ้น เป็นเทคนิคที่นิยมใช้สำหรับไอคอน (Gmail ก็ใช้) วิธีการนำไปใช้:

1. ใช้เครื่องมือสร้าง sprite ที่รวมหลายภาพเข้าด้วยกันและสร้าง CSS ที่เหมาะสมสำหรับมัน
2. แต่ละภาพจะมีคลาส CSS ที่สอดคล้องกันพร้อมคุณสมบัติ background-image, background-position และ background-size ที่กำหนดไว้
3. หากต้องการใช้ภาพนั้น ให้เพิ่มคลาสที่สอดคล้องกันลงในองค์ประกอบของคุณ

ข้อดี:

• ลดจำนวนคำขอ HTTP สำหรับหลายภาพ (ต้องการเพียงคำขอเดียวต่อ spritesheet) แต่ด้วย HTTP2 การโหลดหลายภาพไม่เป็นปัญหาใหญ่อีกต่อไป
• ดาวน์โหลดเนื้อหาล่วงหน้าที่จะไม่ถูกดาวน์โหลดจนกว่าจะจำเป็น เช่น ภาพที่ปรากฏเมื่อ :hover เท่านั้น การกะพริบจะไม่ถูกมองเห็น

• หลังจากระบุปัญหาและเบราว์เซอร์ที่เป็นต้นเหตุ ให้ใช้สไตล์ชีทแยกต่างหากที่โหลดเฉพาะเมื่อมีการใช้เบราว์เซอร์นั้นๆ เทคนิคนี้ต้องใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์
• ใช้ไลบรารีเช่น Bootstrap ที่จัดการปัญหาการจัดรูปแบบเหล่านี้ให้คุณแล้ว
• ใช้ autoprefixer เพื่อเพิ่ม vendor prefixes ลงในโค้ดของคุณโดยอัตโนมัติ
• ใช้ Reset CSS หรือ Normalize.css
• หากคุณใช้ Postcss (หรือไลบรารีการแปลงรหัสที่คล้ายกัน) อาจมีปลั๊กอินที่ช่วยให้คุณเลือกใช้ไวยากรณ์ CSS สมัยใหม่ (และแม้แต่ข้อเสนอของ W3C) ซึ่งจะแปลงส่วนเหล่านั้นของโค้ดของคุณให้เป็นโค้ดที่ปลอดภัยที่สอดคล้องกันซึ่งจะทำงานในเป้าหมายที่คุณใช้

• Graceful degradation - แนวปฏิบัติในการสร้างแอปพลิเคชันสำหรับเบราว์เซอร์สมัยใหม่ ในขณะที่ยังคงรับประกันการทำงานในเบราว์เซอร์รุ่นเก่า
• Progressive enhancement - แนวปฏิบัติในการสร้างแอปพลิเคชันสำหรับระดับประสบการณ์ผู้ใช้พื้นฐาน แต่เพิ่มการปรับปรุงการทำงานเมื่อเบราว์เซอร์รองรับ
• ใช้ [caniuse.com] เพื่อตรวจสอบการรองรับคุณสมบัติ
• Autoprefixer สำหรับการแทรก vendor prefix โดยอัตโนมัติ
• การตรวจจับคุณสมบัติโดยใช้ [Modernizr]
• ใช้ CSS Feature queries [@support]

เทคนิคเหล่านี้เกี่ยวข้องกับการเข้าถึง (a11y)

• width: 0; height: 0 ทำให้องค์ประกอบไม่ใช้พื้นที่บนหน้าจอเลย ซึ่งส่งผลให้ไม่แสดง
• position: absolute; left: -99999px จัดตำแหน่งไว้นอกหน้าจอ
• text-indent: -9999px ใช้ได้กับข้อความภายในองค์ประกอบ block เท่านั้น นี่เป็นกลเม็ดที่ใช้กันอย่างแพร่หลายและมีชื่อเสียง แต่มี [ข้อเสียบางประการ] เช่น ทำให้เกิดปัญหาด้านประสิทธิภาพ ดังนั้นคุณอาจพิจารณาใช้ text-indent: 100% แทน
• Meta tags เช่น การใช้ Schema.org, RDF และ JSON-LD
• WAI-ARIA ข้อกำหนดทางเทคนิคของ W3C ที่ระบุวิธีการเพิ่มการเข้าถึงของหน้าเว็บ

แม้ว่า WAI-ARIA จะเป็นทางออกที่ดีที่สุด แต่ฉันจะเลือกใช้วิธีการจัดตำแหน่ง absolute เนื่องจากมีข้อจำกัดน้อยที่สุด ใช้งานได้กับองค์ประกอบส่วนใหญ่ และเป็นเทคนิคที่ง่าย

ก่อนที่ Flex จะเป็นที่นิยม (ประมาณปี 2014) ระบบกริดแบบ float เป็นระบบที่น่าเชื่อถือที่สุด เพราะยังคงมีการรองรับเบราว์เซอร์มากที่สุดในบรรดาระบบทางเลือกที่มีอยู่ (flex, grid) Bootstrap ใช้แนวทาง float จนกระทั่ง Bootstrap 4 ที่เปลี่ยนมาใช้แนวทาง flex ณ เวลาที่เขียน (2020) flex เป็นแนวทางที่แนะนำสำหรับการสร้างระบบกริดและมีการรองรับ [เบราว์เซอร์ที่ดี]

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

ใช่ ตัวอย่างคือการแปลงการนำทางแบบ stacked pill เป็นการนำทางแบบแท็บที่ติดอยู่ด้านล่างเมื่อถึงจุดพักที่กำหนด

ใช่ มีหลายวิธีในการลงสีรูปร่าง (รวมถึงการระบุแอตทริบิวต์บนวัตถุ) โดยใช้ CSS แบบอินไลน์, ส่วน CSS แบบฝังตัว, หรือไฟล์ CSS ภายนอก SVG ส่วนใหญ่ที่คุณพบในเว็บจะใช้ CSS แบบอินไลน์ แต่มีข้อดีและข้อเสียที่เกี่ยวข้องกับแต่ละประเภท

การลงสีพื้นฐานสามารถทำได้โดยการตั้งค่าสองแอตทริบิวต์บนโหนด: fill และ stroke fill ตั้งค่าสีภายในวัตถุ และ stroke ตั้งค่าสีของเส้นที่วาดรอบวัตถุ คุณสามารถใช้รูปแบบการตั้งชื่อสี CSS เดียวกันกับที่คุณใช้ใน HTML ไม่ว่าจะเป็นชื่อสี (เช่น red), ค่า RGB (เช่น rgb(255,0,0)), ค่า Hex, ค่า RGBA, ฯลฯ

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

fill="purple" ด้านบนเป็นตัวอย่างของ presentational attribute ที่น่าสนใจคือ และไม่เหมือนกับอินไลน์สไตล์เช่น style="fill: purple" ซึ่งเป็นแอตทริบิวต์ด้วย presentational attribute สามารถ [ถูกแทนที่ด้วย CSS] ที่กำหนดไว้ในสไตล์ชีทได้ ดังนั้น หากคุณทำอะไรบางอย่างเช่น svg { fill: blue; } มันจะแทนที่สีม่วงที่เรากำหนดไว้

ใช่ มีคุณสมบัติ @media สี่ประเภท (รวมถึง screen):

• all - สำหรับอุปกรณ์สื่อทุกประเภท
• print - สำหรับเครื่องพิมพ์
• speech - สำหรับโปรแกรมอ่านหน้าจอที่ "อ่าน" หน้าออกเสียง
• screen - สำหรับหน้าจอคอมพิวเตอร์ แท็บเล็ต สมาร์ทโฟน ฯลฯ

นี่คือตัวอย่างการใช้งานประเภทสื่อ print:

@media print {
  body {
    color: black;
  }
}

ประการแรก โปรดเข้าใจว่าเบราว์เซอร์จับคู่ selector จากขวาไปซ้าย (key selector) เบราว์เซอร์จะกรององค์ประกอบใน DOM ตาม key selector และสำรวจขึ้นไปตามองค์ประกอบแม่เพื่อพิจารณาการจับคู่ ยิ่งความยาวของ selector chain สั้นลงเท่าใด เบราว์เซอร์ก็ยิ่งสามารถระบุได้เร็วขึ้นว่าองค์ประกอบนั้นตรงกับ selector หรือไม่ ดังนั้นควรหลีกเลี่ยง key selector ที่เป็น tag และ universal selector ซึ่งจะจับคู่กับองค์ประกอบจำนวนมาก และเบราว์เซอร์จะต้องทำงานมากขึ้นในการพิจารณาว่าองค์ประกอบแม่จับคู่หรือไม่

ระเบียบวิธี [BEM (Block Element Modifier)] แนะนำให้ทุกอย่างมีคลาสเดียว และในกรณีที่คุณต้องการลำดับชั้น สิ่งนั้นจะถูกนำไปรวมอยู่ในชื่อของคลาสด้วย ซึ่งโดยธรรมชาติแล้วจะทำให้ selector มีประสิทธิภาพและง่ายต่อการแทนที่

โปรดทราบว่าคุณสมบัติ CSS ใดที่ [กระตุ้น] reflow, repaint และ compositing หลีกเลี่ยงการเขียนสไตล์ที่เปลี่ยนแปลงเค้าโครง (กระตุ้น reflow) หากเป็นไปได้

ข้อดี:

• CSS สามารถบำรุงรักษาได้ง่ายขึ้น
• เขียน nested selectors ได้ง่าย
• ตัวแปรสำหรับการสร้างธีมที่สอดคล้องกัน สามารถแชร์ไฟล์ธีมข้ามโปรเจกต์ต่างๆ ได้
• Mixins เพื่อสร้าง CSS ซ้ำๆ
• คุณสมบัติ Sass เช่น loops, lists และ maps สามารถทำให้การกำหนดค่าทำได้ง่ายขึ้นและกระชับขึ้น
• แยกโค้ดของคุณออกเป็นหลายไฟล์ ไฟล์ CSS ก็สามารถแยกได้เช่นกัน แต่การทำเช่นนั้นจะต้องใช้คำขอ HTTP เพื่อดาวน์โหลดไฟล์ CSS แต่ละไฟล์

ข้อเสีย:

• ต้องใช้เครื่องมือสำหรับการประมวลผลล่วงหน้า เวลาคอมไพล์ซ้ำอาจช้า
• ไม่ได้เขียน CSS ที่ใช้งานได้ในปัจจุบันและอาจใช้งานได้ในอนาคต ตัวอย่างเช่น การใช้สิ่งต่างๆ เช่น [postcss-loader] กับ [webpack] คุณสามารถเขียน CSS ที่อาจเข้ากันได้ในอนาคต ทำให้คุณสามารถใช้สิ่งต่างๆ เช่น CSS variables แทน Sass variables ดังนั้น คุณกำลังเรียนรู้ทักษะใหม่ๆ ที่อาจคุ้มค่าหาก/เมื่อพวกเขากลายเป็นมาตรฐาน

สิ่งที่ชอบ:

• ส่วนใหญ่เป็นข้อดีที่กล่าวมาข้างต้น
• เขียนใน JavaScript น้อยลง ซึ่งทำงานได้ดีกับ Node

สิ่งที่ไม่ชอบ:

• ฉันใช้ Sass ผ่าน node-sass ซึ่งเป็น binding สำหรับ LibSass ที่เขียนด้วย C++ ฉันต้องคอมไพล์ใหม่บ่อยๆ เมื่อสลับเวอร์ชัน Node
• ใน Less ชื่อตัวแปรจะนำหน้าด้วย @ ซึ่งอาจสับสนกับคีย์เวิร์ด CSS ดั้งเดิม เช่น @media, @import และกฎ @font-face

ใช้ @font-face และกำหนด font-family สำหรับ font-weights ที่แตกต่างกัน

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

ตัวอย่างเช่น สำหรับ selector p span เบราว์เซอร์จะค้นหาองค์ประกอบ <span> ทั้งหมดก่อน และสำรวจขึ้นไปตามองค์ประกอบแม่จนถึงรากเพื่อค้นหาองค์ประกอบ <p> สำหรับ <span> เฉพาะ เมื่อพบ <p> ก็จะรู้ว่า <span> ตรงกันและสามารถหยุดการจับคู่ได้

CSS pseudo-element เป็นคีย์เวิร์ดที่เพิ่มเข้ากับ selector ที่ช่วยให้คุณจัดรูปแบบส่วนเฉพาะขององค์ประกอบที่เลือก สามารถใช้เพื่อการตกแต่ง (:first-line, :first-letter) หรือการเพิ่มองค์ประกอบไปยังมาร์กอัป (รวมกับ content: ...) โดยไม่ต้องแก้ไขมาร์กอัป (:before, :after)

• :first-line และ :first-letter สามารถใช้ตกแต่งข้อความได้
• ใช้ในแฮก .clearfix ดังที่แสดงข้างต้นเพื่อเพิ่มองค์ประกอบที่มีพื้นที่ว่างเป็นศูนย์พร้อม clear: both
• ลูกศรสามเหลี่ยมใน tooltips ใช้ :before และ :after ส่งเสริมการแยกส่วนความรับผิดชอบเพราะสามเหลี่ยมถือว่าเป็นส่วนหนึ่งของการจัดรูปแบบและไม่ใช่ DOM จริงๆ

CSS box model อธิบายกล่องสี่เหลี่ยมที่สร้างขึ้นสำหรับองค์ประกอบใน document tree และจัดวางตาม visual formatting model กล่องแต่ละกล่องมีพื้นที่เนื้อหา (เช่น ข้อความ รูปภาพ เป็นต้น) และพื้นที่ padding, border และ margin โดยรอบที่เป็นทางเลือก

CSS box model มีหน้าที่ในการคำนวณ:

• องค์ประกอบบล็อกใช้พื้นที่เท่าใด
• ขอบและ/หรือระยะขอบทับซ้อนกันหรือยุบตัวหรือไม่
• มิติของกล่อง

box model มีกฎดังต่อไปนี้:

• มิติขององค์ประกอบบล็อกคำนวณจาก width, height, padding, borders และ margins
• หากไม่ได้ระบุ height องค์ประกอบบล็อกจะสูงเท่ากับเนื้อหาที่บรรจุอยู่ บวกกับ padding (เว้นแต่จะมี floats ซึ่งดูรายละเอียดด้านล่าง)
• หากไม่ได้ระบุ width องค์ประกอบบล็อกที่ไม่ลอยจะขยายออกไปเพื่อให้พอดีกับความกว้างขององค์ประกอบแม่ ลบด้วย padding
• height ขององค์ประกอบคำนวณจาก height ของเนื้อหา
• width ขององค์ประกอบคำนวณจาก width ของเนื้อหา
• โดยค่าเริ่มต้น paddings และ borders ไม่ใช่ส่วนหนึ่งของ width และ height ขององค์ประกอบ

• โดยค่าเริ่มต้น องค์ประกอบต่างๆ จะมี box-sizing: content-box ถูกนำไปใช้ และจะนับเฉพาะขนาดเนื้อหาเท่านั้น
• box-sizing: border-box เปลี่ยนวิธีการคำนวณ width และ height ขององค์ประกอบ โดย border และ padding จะถูกรวมอยู่ในการคำนวณด้วย
• height ขององค์ประกอบจะถูกคำนวณโดย height ของเนื้อหา + padding แนวตั้ง + ความกว้างของ border แนวตั้ง
• width ขององค์ประกอบจะถูกคำนวณโดย width ของเนื้อหา + padding แนวนอน + ความกว้างของ border แนวนอน
• การคำนึงถึง paddings และ borders เป็นส่วนหนึ่งของ box model ของเรานั้นสอดคล้องกับวิธีที่นักออกแบบจินตนาการเนื้อหาในกริดได้ดียิ่งขึ้น

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item

| display | คำอธิบาย | | :-- | :-- | | none | ไม่แสดงองค์ประกอบ (องค์ประกอบไม่มีผลต่อเค้าโครงของเอกสารอีกต่อไป) องค์ประกอบลูกทั้งหมดจะไม่แสดงอีกต่อไป เอกสารจะถูกเรนเดอร์ราวกับว่าองค์ประกอบไม่มีอยู่ใน document tree | | block | องค์ประกอบจะใช้พื้นที่ทั้งบรรทัดในทิศทางบล็อก (ซึ่งโดยปกติคือแนวนอน) | | inline | องค์ประกอบสามารถจัดวางเคียงข้างกันได้ | | inline-block | คล้ายกับ inline แต่มีคุณสมบัติ block บางอย่าง เช่น การตั้งค่า width และ height | | table | ทำงานเหมือนกับองค์ประกอบ <table> | | table-row | ทำงานเหมือนกับองค์ประกอบ <tr> | | table-cell | ทำงานเหมือนกับองค์ประกอบ <td> | | list-item | ทำงานเหมือนกับองค์ประกอบ <li> ซึ่งช่วยให้สามารถกำหนด list-style-type และ list-style-position ได้ |

ฉันจะเปรียบเทียบกับ block ด้วยเพื่อความเข้าใจที่ดียิ่งขึ้น

| | block | inline-block | inline | | --- | --- | --- | --- | | ขนาด | เต็มความกว้างของคอนเทนเนอร์แม่ | ขึ้นอยู่กับเนื้อหา | ขึ้นอยู่กับเนื้อหา | | การจัดตำแหน่ง | เริ่มต้นบรรทัดใหม่และไม่ยอมให้มีองค์ประกอบ HTML อยู่ข้างๆ (ยกเว้นเมื่อคุณเพิ่ม float) | ไหลไปพร้อมกับเนื้อหาอื่นๆ และยอมให้มีองค์ประกอบอื่นๆ อยู่ข้างๆ | ไหลไปพร้อมกับเนื้อหาอื่นๆ และยอมให้มีองค์ประกอบอื่นๆ อยู่ข้างๆ | | สามารถระบุ width และ height ได้ | ได้ | ได้ | ไม่ได้ จะถูกละเว้นหากตั้งค่า | | สามารถจัดแนวด้วย vertical-align ได้ | ไม่ได้ | ได้ | ได้ | | ระยะขอบและระยะห่างภายใน | ทุกด้านจะถูกพิจารณา | ทุกด้านจะถูกพิจารณา | เฉพาะด้านแนวนอนเท่านั้นที่ถูกพิจารณา ด้านแนวตั้ง หากระบุ จะไม่มีผลต่อเค้าโครง พื้นที่แนวตั้งที่ใช้ขึ้นอยู่กับ line-height แม้ว่า border และ padding จะปรากฏให้เห็นรอบเนื้อหาก็ตาม | | Float | - | - | กลายเป็นเหมือนองค์ประกอบ block ที่คุณสามารถกำหนดระยะขอบและระยะห่างภายในแนวตั้งได้ |

องค์ประกอบที่ถูกจัดตำแหน่งคือองค์ประกอบที่มีคุณสมบัติ position ที่คำนวณได้เป็น relative, absolute, fixed หรือ sticky

• static - ตำแหน่งเริ่มต้น; องค์ประกอบจะไหลไปในหน้าตามปกติ คุณสมบัติ top, right, bottom, left และ z-index ไม่มีผล
• relative - ตำแหน่งขององค์ประกอบถูกปรับเทียบกับตัวมันเอง โดยไม่เปลี่ยนแปลงเค้าโครง (และทิ้งช่องว่างสำหรับองค์ประกอบไว้ในที่ที่ควรจะเป็นหากไม่ได้ถูกจัดตำแหน่ง)
• absolute - องค์ประกอบถูกลบออกจาก flow ของหน้าและถูกจัดตำแหน่งที่ตำแหน่งที่ระบุสัมพันธ์กับองค์ประกอบแม่ที่ถูกจัดตำแหน่งที่ใกล้ที่สุด (ถ้ามี) มิฉะนั้นจะสัมพันธ์กับ initial containing block กล่องที่จัดตำแหน่งแบบ absolute สามารถมีระยะขอบได้ และจะไม่ยุบรวมกับระยะขอบอื่นๆ องค์ประกอบเหล่านี้ไม่มีผลต่อตำแหน่งขององค์ประกอบอื่นๆ
• fixed - องค์ประกอบถูกลบออกจาก flow ของหน้าและถูกจัดตำแหน่งที่ตำแหน่งที่ระบุสัมพันธ์กับ viewport และไม่เคลื่อนที่เมื่อเลื่อนหน้าจอ
• sticky - การจัดตำแหน่งแบบ sticky เป็นการผสมผสานระหว่างการจัดตำแหน่งแบบ relative และ fixed องค์ประกอบจะถูกพิจารณาว่ามีการจัดตำแหน่งแบบ relative จนกว่าจะข้ามเกณฑ์ที่ระบุ ณ จุดนั้นจะถูกพิจารณาว่ามีการจัดตำแหน่งแบบ fixed

• Bootstrap - รอบการเปิดตัวช้า Bootstrap 4 อยู่ในสถานะ alpha มาเกือบ 2 ปีแล้ว เพิ่มคอมโพเนนต์ปุ่มหมุน (spinner button) เนื่องจากมีการใช้งานอย่างแพร่หลาย
• Semantic UI - โครงสร้างโค้ดต้นฉบับทำให้การปรับแต่งธีมทำความเข้าใจได้ยากมาก ระบบธีมที่ไม่เป็นไปตามแบบแผนเป็นเรื่องยากในการปรับแต่ง เส้นทาง config ถูกฮาร์ดโค้ดในไลบรารีของผู้ขาย ไม่ได้ออกแบบมาอย่างดีสำหรับการแทนที่ตัวแปรเหมือนใน Bootstrap
• Bulma - ต้องใช้คลาสและมาร์กอัปที่ไม่เป็นไปตามหลักการและซ้ำซ้อนมาก ไม่สามารถเข้ากันได้กับเวอร์ชันก่อนหน้า การอัปเกรดเวอร์ชันทำให้แอปเสียในลักษณะที่ละเอียดอ่อน

ใช่ Flexbox ส่วนใหญ่มีไว้สำหรับเค้าโครงแบบ 1 มิติ ในขณะที่ Grid มีไว้สำหรับเค้าโครงแบบ 2 มิติ

Flexbox แก้ปัญหาทั่วไปหลายอย่างใน CSS เช่น การจัดองค์ประกอบกึ่งกลางแนวตั้งภายในคอนเทนเนอร์, sticky footer เป็นต้น Bootstrap และ Bulma สร้างขึ้นบนพื้นฐานของ Flexbox และน่าจะเป็นวิธีที่แนะนำในการสร้างเค้าโครงในปัจจุบัน ฉันเคยลองใช้ Flexbox มาก่อน แต่พบปัญหาความเข้ากันได้กับเบราว์เซอร์บางอย่าง (Safari) ในการใช้ flex-grow และฉันต้องเขียนโค้ดใหม่โดยใช้ inline-blocks และคณิตศาสตร์เพื่อคำนวณความกว้างเป็นเปอร์เซ็นต์ ซึ่งไม่ใช่ประสบการณ์ที่ดีเลย

Grid เป็นแนวทางที่เข้าใจง่ายที่สุดสำหรับการสร้างเค้าโครงแบบกริด (และควรจะเป็น!) แต่การรองรับเบราว์เซอร์ยังไม่แพร่หลายในขณะนี้

โปรดทราบว่าสองแนวทางนี้ไม่ได้แยกออกจากกัน

การทำให้เว็บไซต์ตอบสนองหมายถึงองค์ประกอบบางอย่างจะตอบสนองโดยการปรับขนาดหรือฟังก์ชันการทำงานอื่นๆ ตามขนาดหน้าจอของอุปกรณ์ โดยทั่วไปคือความกว้างของ viewport ผ่าน CSS media queries เช่น การทำให้ขนาดตัวอักษรเล็กลงบนอุปกรณ์ขนาดเล็ก

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

กลยุทธ์ mobile-first ก็ตอบสนองเช่นกัน อย่างไรก็ตาม มันเห็นด้วยว่าเราควรตั้งค่าเริ่มต้นและกำหนดสไตล์ทั้งหมดสำหรับอุปกรณ์มือถือ และค่อยเพิ่มกฎ responsive ที่เฉพาะเจาะจงสำหรับอุปกรณ์อื่นในภายหลัง จากตัวอย่างก่อนหน้า:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

กลยุทธ์ mobile-first มีข้อดีหลัก 2 ประการ:

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

ทั้งการออกแบบ responsive และ adaptive พยายามที่จะปรับปรุงประสบการณ์ผู้ใช้ในอุปกรณ์ต่างๆ โดยปรับตามขนาด viewport ที่แตกต่างกัน ความละเอียด บริบทการใช้งาน กลไกการควบคุม และอื่นๆ

การออกแบบ responsive ทำงานบนหลักการของความยืดหยุ่น - เว็บไซต์ fluid เดียวที่สามารถดูดีในอุปกรณ์ใดๆ เว็บไซต์ responsive ใช้ media queries, flexible grids และ responsive images เพื่อสร้างประสบการณ์ผู้ใช้ที่ยืดหยุ่นและเปลี่ยนแปลงตามปัจจัยหลายอย่าง เหมือนลูกบอลลูกเดียวที่ขยายหรือหดตัวเพื่อให้พอดีกับห่วงหลายขนาดที่แตกต่างกัน

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

ทั้งสองวิธีนี้มีปัญหาบางอย่างที่ต้องพิจารณา:

• การออกแบบ responsive อาจมีความท้าทายมาก เนื่องจากคุณกำลังใช้เค้าโครงเดียวที่ตอบสนองได้เพื่อรองรับทุกสถานการณ์ วิธีการตั้งค่าจุดพักของ media query เป็นหนึ่งในความท้าทายดังกล่าว คุณใช้ค่าจุดพักที่เป็นมาตรฐานหรือไม่? หรือคุณใช้จุดพักที่เหมาะสมกับเค้าโครงเฉพาะของคุณ? จะเกิดอะไรขึ้นถ้าเค้าโครงนั้นเปลี่ยนแปลง?
• การออกแบบ adaptive โดยทั่วไปต้องใช้การตรวจจับ user agent หรือการตรวจจับ DPI ฯลฯ ซึ่งทั้งหมดนี้อาจไม่น่าเชื่อถือ

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

เบราว์เซอร์โดยค่าเริ่มต้นจะเรนเดอร์องค์ประกอบ DOM ตามความละเอียดของอุปกรณ์ ยกเว้นรูปภาพ

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

เพื่อแก้ไขปัญหานี้ เราสามารถใช้ responsive images ตามที่ระบุใน HTML5 มันกำหนดให้มีไฟล์ความละเอียดต่างๆ ของภาพเดียวกันให้เบราว์เซอร์เลือกและให้เบราว์เซอร์ตัดสินใจว่าภาพใดดีที่สุด โดยใช้แอตทริบิวต์ HTML srcset และ sizes ที่เป็นทางเลือก เช่น:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

สิ่งสำคัญคือต้องทราบว่าเบราว์เซอร์ที่ไม่รองรับ srcset ของ HTML5 (เช่น IE11) จะละเว้นและใช้ src แทน หากเราต้องการรองรับ IE11 จริงๆ และเราต้องการให้คุณสมบัตินี้ด้วยเหตุผลด้านประสิทธิภาพ เราสามารถใช้ JavaScript polyfill ได้ เช่น:

สำหรับไอคอน ฉันจะเลือกใช้ SVGs และ icon fonts หากเป็นไปได้ เนื่องจากมันจะแสดงผลได้คมชัดมากไม่ว่าจะมีความละเอียดเท่าใดก็ตาม

translate() เป็นค่าของ CSS transform การเปลี่ยน transform หรือ opacity ไม่ได้กระตุ้นการ reflow หรือ repaint ของเบราว์เซอร์ แต่กระตุ้น compositions ในขณะที่การเปลี่ยน absolute positioning กระตุ้น reflow transform ทำให้เบราว์เซอร์สร้างเลเยอร์ GPU สำหรับองค์ประกอบ แต่การเปลี่ยนคุณสมบัติ absolute positioning จะใช้ CPU ดังนั้น translate() จึงมีประสิทธิภาพมากกว่าและจะส่งผลให้เวลาในการแสดงผลสั้นลงสำหรับการเคลื่อนไหวที่ราบรื่นยิ่งขึ้น

เมื่อใช้ translate() องค์ประกอบยังคงครอบครองพื้นที่เดิม (คล้ายกับ position: relative) ซึ่งแตกต่างจากการเปลี่ยน absolute positioning