เรานำเสนอการแปลบทความ “เหตุใด CSS Grid จึงดีกว่า Bootstrap สำหรับการสร้างเลย์เอาต์” โดย Per Harald Borgen ซึ่งเผยแพร่บนเว็บไซต์ ru.hexlet.io

CSS Grid เป็นวิธีใหม่ในการสร้างเลย์เอาต์บนเว็บ เป็นครั้งแรกที่ระบบเค้าโครงเต็มรูปแบบพร้อมใช้งานโดยตรงในเบราว์เซอร์ซึ่งมีข้อดีมากมาย

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

มาดูเหตุผลสามอันดับแรกว่าทำไมฉันถึงคิดว่า CSS Grid เหนือกว่า Bootstrap

มาร์กอัปจะง่ายขึ้น

การแทนที่ Bootstrap ด้วย CSS Grid จะทำให้ HTML สะอาดขึ้น แม้ว่านี่จะไม่ใช่ประโยชน์ที่สำคัญที่สุด แต่ก็อาจเป็นประโยชน์อย่างแรกที่คุณจะสังเกตเห็น

เพื่อความชัดเจน ฉันได้สร้างเลย์เอาต์เว็บไซต์จำลองเพื่อเปรียบเทียบโค้ดที่จำเป็นสำหรับทั้งสองเวอร์ชัน ที่นี่:

บูทสแตรป

ก่อนอื่นเรามาดูมาร์กอัปที่จำเป็นในการสร้างไซต์นี้ใน Bootstrap กันก่อน

ที่นี่ฉันอยากให้คุณใส่ใจกับสิ่งนี้:

1. แต่ละบรรทัดต้องมีแท็กแยกกัน
   .
2. ต้องใช้ชื่อคลาส (col-xs-2) เพื่อแสดงโครงร่าง
3. เมื่อรูปแบบนี้ซับซ้อน HTML ก็ซับซ้อนเช่นกัน

หากนี่คือไซต์ที่ตอบสนอง แท็กมักจะดูแย่ลงไปอีก:

CSS กริด

ตอนนี้เรามาดูวิธีการใช้งานแบบเดียวกันใน CSS Grid นี่คือ HTML:

ฉันสามารถใช้องค์ประกอบเชิงความหมายได้ แต่ตัดสินใจที่จะยึดติดกับ div เพื่อให้การเปรียบเทียบกับ Bootstrap ชัดเจนยิ่งขึ้น

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

และแตกต่างจาก Bootstrap ตรงที่มาร์กอัปนี้จะไม่ซับซ้อนเกินไปเนื่องจากความซับซ้อนของเค้าโครงหน้าเพิ่มขึ้น

ในตัวอย่าง Bootstrap คุณไม่จำเป็นต้องเพิ่ม CSS ใด ๆ ใน CSS Grid คุณจำเป็นต้องเพิ่มอย่างแน่นอน โดยเฉพาะอย่างยิ่ง คุณต้องเพิ่มสิ่งนี้:

สำหรับบางคน นี่อาจเป็นจุดขายสำหรับ Bootstrap: คุณไม่ต้องกังวลกับ CSS ในการสร้างกริดแบบง่าย - คุณเพียงแค่สร้างเลย์เอาต์ใน HTML

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

มีความยืดหยุ่นมากขึ้น

สมมติว่าคุณต้องการเปลี่ยนเค้าโครงตามขนาดหน้าจอ เช่น ยกเมนูขึ้นแถวบนสุดเพื่อดูจากอุปกรณ์เคลื่อนที่

กล่าวอีกนัยหนึ่ง เปลี่ยนเค้าโครงจากสิ่งนี้:

สำหรับสิ่งนี้:

CSS กริด

การทำสิ่งนี้ด้วย CSS Grid นั้นง่ายมาก เราเพิ่มคิวรีสื่อและผสมบล็อกต่างๆ ตามที่เราต้องการ:

ความสามารถในการสร้างเค้าโครงด้วยวิธีนี้ โดยไม่ต้องกังวลเกี่ยวกับวิธีการเขียน HTML เรียกว่าความเป็นอิสระในการเรียงลำดับแหล่งที่มา และถือเป็นชัยชนะครั้งใหญ่สำหรับนักพัฒนาและนักออกแบบ

CSS Grid ช่วยให้คุณเปลี่ยน HTML ให้เป็นอย่างที่มันควรจะเป็น เป็นการมาร์กอัปเนื้อหา ไม่ใช่การมองเห็น ซึ่งเป็นสิ่งที่ CSS ตั้งใจจะทำ

บูทสแตรป

หากเราต้องการทำเช่นเดียวกันใน Bootstrap เราจะต้องเปลี่ยน HTML เราจะต้องย้ายแท็กเมนูไปที่แถวบนสุด นอกเหนือจากส่วนหัว เนื่องจากเมนูในแถวที่สองถูกจับเป็นตัวประกัน

การทำสิ่งนี้ด้วยการสืบค้นสื่อไม่ใช่งานที่ไม่สำคัญ ซึ่งสามารถทำได้ด้วย HTML และ CSS เท่านั้น และคุณจะต้องเล่นกับ JavaScript

ตัวอย่างนี้แสดงให้เห็นถึงประโยชน์อย่างมากของ CSS Grid ที่ฉันได้พบด้วยตัวเอง

ไม่มีการจำกัดคอลัมน์อีก 12 คอลัมน์

มันไม่ใช่ปัญหาใหญ่ที่สุด แต่ก็น่ารำคาญอยู่หลายครั้ง เนื่องจากตาราง Bootstrap แบ่งออกเป็น 12 คอลัมน์ คุณจะประสบปัญหาหากคุณต้องการเค้าโครงแบบห้าคอลัมน์ หรือเจ็ด. หรือเก้า. หรือจากจำนวนที่ไม่เป็นสิบสอง

ไม่เช่นนั้นกับ CSS Grid คุณสามารถสร้างเลย์เอาต์ของคุณเองโดยมีจำนวนคอลัมน์มากเท่าที่คุณต้องการ นี่คือเค้าโครงเจ็ดคอลัมน์

ทำได้โดยการตั้งค่า grid-template-columns ให้ทำซ้ำ (7, 1fr) ดังนี้:

อาจมีการแฮ็กในการทำเช่นนี้ใน Bootstrap... และฉันรู้ว่า Bootstrap 4 ใช้ Flexbox ซึ่งช่วยให้มีความยืดหยุ่น แต่ก็ยังไม่อยู่ในรุ่นเบต้า

ก่อนที่จะสรุปบทความนี้ เราต้องพูดถึงการสนับสนุนเบราว์เซอร์ก่อน ในขณะที่เขียนบทความนี้ 75% ของการเข้าชมเว็บทั่วโลกรองรับ CSS Grid

แต่ก่อนที่คุณจะเลิกใช้ CSS Grid โดยสิ้นเชิง ฉันขอแนะนำให้คุณฟังสิ่งที่ Morten Rand-Hendriksen พูดถึงเกี่ยวกับเรื่องนี้ เขาให้เหตุผลว่า CSS Grid เป็นโอกาสในการคิดใหม่ว่าเราคิดอย่างไรเกี่ยวกับความเข้ากันได้แบบย้อนหลัง:

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

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

บทสรุป

“ยิ่งฉันใช้ CSS Grid มากเท่าไหร่ ฉันก็ยิ่งมั่นใจว่าการเพิ่มเลเยอร์นามธรรมลงไปนั้นไม่มีประโยชน์ CSS Grid เป็นเฟรมเวิร์กเค้าโครงที่สร้างขึ้นในเบราว์เซอร์โดยตรง"

• บทช่วยสอน

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

1. เครื่องมือตรวจสอบ W3C

ขอแนะนำให้ตรวจสอบ HTML และ CSS ของเว็บไซต์ผ่านบริการ validator.w3.org บริการนี้จะสแกนโค้ดและแสดงข้อผิดพลาด เช่น

• แท็กไม่ปิด
• ไม่แนะนำอักขระในลิงก์
• มีการใช้แท็กที่ไม่แนะนำ
• ไม่ได้ระบุแอตทริบิวต์ที่ต้องการ
• และอื่น ๆ.

2. เค้าโครงในรูปแบบ UTF-8

เมื่อจัดวางหน้า คุณต้องตรวจสอบให้แน่ใจว่าได้ตั้งค่าการเข้ารหัสไฟล์ไว้แล้ว UTF-8 (ไม่มี BOM)- โปรแกรมแก้ไขข้อความแต่ละตัวจะตั้งค่าการเข้ารหัสที่แตกต่างกัน

ไฟล์ในรูปแบบ UTF-8 ให้คุณใช้อักขระที่ไม่เป็นมาตรฐานได้ (เช่น สัญลักษณ์ของภาษาต่างๆ สัญลักษณ์สกุลเงิน และอื่นๆ)

คุณต้องบอกเบราว์เซอร์ด้วยว่าหน้านั้นเปิดด้วยการเข้ารหัส UTF-8 ทำได้ผ่านแท็กด้านล่าง:

3. หลายองค์ประกอบมีรหัสเดียวกัน

ค่าของแอตทริบิวต์ id ในโค้ด HTML ไม่ควรซ้ำกัน

4. สไปรท์

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

ปัจจุบันยังนิยมใช้แบบอักษรที่มีไอคอนแทนสไปรท์ เหล่านั้น. แทนที่จะแสดงตัวอักษร ไอคอนรูปเฟือง หน้ายิ้ม และไอคอนอื่นๆ จะปรากฏขึ้น ตัวอย่างคือไอคอนสัญลักษณ์ที่ใช้ใน Twitter Bootstrap

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

5. ตัวเลือกมากมาย

ไม่แนะนำให้ใช้ตัวเลือกมากกว่าสามตัวเพราะว่า สิ่งนี้ส่งผลต่อประสิทธิภาพของไซต์

/* ไม่แนะนำ การซ้อนขนาดใหญ่ */ .page .item .title a () /* สามารถย่อให้สั้นลงได้ */ .page .item a ()
เบราว์เซอร์อ่าน CSS จากขวาไปซ้าย เหล่านั้น. ในโค้ดด้านบน ขั้นแรกลิงก์ทั้งหมดที่อยู่ในหน้าจะถูกเลือก จากนั้นลิงก์เหล่านั้นที่อยู่ภายในองค์ประกอบ .item จะถูกเลือก

6. สไตล์ HTML

HTML มีไว้สำหรับการแสดงข้อมูล (ข้อความ รูปภาพ) การออกแบบเนื้อหา (เปลี่ยนขนาด สี แบบอักษร) เกิดขึ้นใน CSS

เกิดข้อผิดพลาดในรหัส

เกิดข้อผิดพลาดในรหัส

7. ชื่อชั้นเรียนไม่ถูกต้อง

เมื่อนักออกแบบเลย์เอาต์หลายคนต้องการให้ข้อความเป็นสีเขียว ให้แนบคลาส .green ไปด้วย

ข้อความ

มันผิดเพราะว่า... เมื่อเปลี่ยนดีไซน์อาจมีหลายสีเปลี่ยนไป เช่น ข้อความอาจปรากฏเป็นสีน้ำเงินแทนที่จะเป็นสีเขียว จากนั้นคุณจะต้องค้นหาแท็กทั้งหมดที่มีคลาส .green และแทนที่ด้วย .blue

ข้อความ

ข้อความ

8. พิกเซลในค่าเศษส่วน

เบราว์เซอร์บางตัวอนุญาตให้คุณระบุพิกเซลเป็นค่าเศษส่วน เช่น "1.5px" แต่มันผิดเพราะว่า... พิกเซลเป็นหน่วยที่แบ่งแยกไม่ได้ แทนที่จะเป็น "1.5px" ควรใช้ "1.5em" จะดีกว่า

P ( /* ไม่ถูกต้อง */ การเว้นวรรคตัวอักษร: 1.5px; /* ถูกต้อง */ การเว้นวรรคตัวอักษร: .005em; )

9. การใช้คลาสแทนรหัส

แนะนำให้เลือกตามคลาสแทน id เพราะ ตัวเลือกที่มี id จะมีน้ำหนักมากกว่าตัวเลือกของคลาส และเป็นการยากที่จะแทนที่ตัวเลือกเหล่านั้น

#modal a ( color: blue; ) /* สีด้านล่างไม่สามารถแทนที่ได้เนื่องจาก #modal มีน้ำหนักมากกว่าคลาส */ .modal-header a ( color: #333; ) /* ในกรณีนี้คุณจะต้องเพิ่ม #modal */ #modal .modal-header a ( color: #333; )
ยังไม่แนะนำให้ใช้!สำคัญเพราะว่า น้ำหนักของมันสูงกว่าแอตทริบิวต์ id และจะลบล้างได้ยากเช่นกัน

10. เมนู

เมนูควรจัดรูปแบบเป็นรายการ

หน้าแรก ข่าวสาร เกี่ยวกับบริษัท

• บ้าน
• ข่าว
• เกี่ยวกับบริษัท

11. ไม่มี Alt สำหรับรูปภาพ

ต้องระบุแอตทริบิวต์ alt ในแท็ก (สามารถเว้นว่างได้)

12. แท็ก

ควรมีเพียงหนึ่งชื่อต่อแท็กต่อหน้า

- โดยพื้นฐานแล้ว แท็กนี้ประกอบด้วยชื่อของเพจ

13. การถอดความ

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

/* ไม่ถูกต้อง */ .tovar () .stranica () .zapros () /* ถูกต้อง */ .product () .page () .query ()

14. เคลียร์ฟิกซ์

เป็นการยากที่จะเขียนเกี่ยวกับ clearfix โดยสรุป แต่ฉันจะชี้ให้เห็นว่าในความคิดของฉัน นักออกแบบเลย์เอาต์หลายคนทำผิดพลาด

ควรระบุ class.clearfix ในแท็กพาเรนต์ และอย่าวางไว้ข้างๆ

15. HTML - ภาษาการเขียนโปรแกรม

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

ข้อมูล: ทำไมคุณถึงต้องการ CSS?

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

การมีสไตล์ชีตภายนอกมีประโยชน์มากมาย แยกสไตล์ออกจากเนื้อหา HTML:

• ช่วยหลีกเลี่ยงการทำซ้ำ
• ทำให้การบำรุงรักษาง่ายขึ้น
• ช่วยให้คุณทำการเปลี่ยนแปลงทั้งไซต์ได้ในที่เดียว

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

เมื่อผู้ใช้เปิดหน้าเว็บ เบราว์เซอร์จะดาวน์โหลดข้อมูลรูปแบบพร้อมกับเนื้อหาของหน้า

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

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

รายละเอียดเพิ่มเติม

ภาษามาร์กอัป เช่น HTML ยังมีวิธีการระบุสไตล์อีกด้วย

ตัวอย่างเช่น ใน HTML คุณสามารถใช้แท็กได้ เพื่อทำให้ข้อความเป็นตัวหนา หรือระบุสีพื้นหลังของหน้าในแท็ก .

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

การดำเนินการ: สร้างสไตล์ชีต

1. สร้างไฟล์ข้อความใหม่ในไดเร็กทอรีเดียวกันกับ doc1.html ที่สร้างในบทความแรก
2. บันทึกเป็น style1.css ไฟล์นี้จะเป็นสไตล์ชีตของคุณ
3. คัดลอกและวางบรรทัดต่อไปนี้ลงในไฟล์ CSS จากนั้นบันทึกไฟล์: strong (สี: red;)

การเชื่อมโยงสไตล์ชีตเข้ากับเอกสาร

1. หากต้องการเชื่อมโยงเอกสารของคุณกับสไตล์ชีต คุณต้องทำการเปลี่ยนแปลงบางอย่างในไฟล์ HTML เพิ่มบรรทัดด้านล่าง:

   คจากน้อยไปมาก สสไตล์ สฮีตส์

2. บันทึกไฟล์และเปิดในเบราว์เซอร์ของคุณ สไตล์ชีตจะทำให้ตัวพิมพ์ใหญ่เป็นสีแดง:

นอกจากสีแดงแล้ว ยังมีชื่อสีอื่นๆ ใน CSS

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

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

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

แยกการนำเสนอไซต์ออกจากเนื้อหา

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

เพิ่มความเร็วในการโหลดไซต์

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

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

ความเข้ากันได้กับ CSS กับเบราว์เซอร์สมัยใหม่

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

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

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

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

ลิงก์ (href) จะต้องเขียนไว้ในแท็กลิงก์เดียว เนื้อหาของลิงก์ใน HTML5 ควรมีลักษณะดังนี้: href=”style.css” rel=”stylesheet” อย่าลืมว่าแท็กลิงก์นั้นอยู่ระหว่างแท็กคีย์ส่วนหัวที่จับคู่กัน

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

ไวยากรณ์ซีเอสเอส

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

ขั้นแรก ให้ตรวจสอบตัวเลือก ตัวเลือกจะต้องตรงกับสิ่งที่คุณเขียนในไฟล์ html นั่นคือหากเลือก class = “container” ใน html ดังนั้น “.container” จะถูกเขียนด้วย CSS แทนที่ตัวเลือก สังเกตจุดก่อนชื่อ ระยะเวลาจะวางไว้ก่อนชั้นเรียนเท่านั้น หากคุณกำลังระบุสไตล์สำหรับส่วนหัว h1 ก็ไม่จำเป็นต้องมีจุด

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

เบราว์เซอร์

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

ใช้เบราว์เซอร์ที่แตกต่างกันสำหรับการทดสอบ: Opera, Google Chrome, Firefox ไม่แนะนำให้ใช้ Internet Explorer เนื่องจากไม่ใช่จุดสนใจหลักของ Microsoft ซึ่งทำให้ "ไม่สอดคล้อง" กับ CSS3

เบราว์เซอร์เวอร์ชันใหม่สำหรับการดีบักโค้ดมีโมดูลพิเศษที่ให้คุณแก้ไขโค้ดได้โดยตรงในเบราว์เซอร์ ในการดำเนินการนี้คลิก "แสดงซอร์สโค้ด" ในเมนูบริบทของหน้าต่าง

มรดก

สิ่งที่เข้าใจยากที่สุดใน CSS คือการสืบทอด ในขณะที่ส่วนใหญ่มักเป็นพื้นฐานของโค้ดที่ไม่ทำงาน

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

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

เมื่อคุณพบคอนเทนเนอร์หรือองค์ประกอบอื่นๆ ที่ใช้สไตล์ที่ไม่ได้ผล ให้ตรวจดูอย่างละเอียดว่าองค์ประกอบนั้น "ซ้อนกัน" อยู่ในอะไร

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