วิธีการเรียนรู้ CSS

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

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

พื้นฐานภาษา

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

Selectors เป็นมากกว่าคลาส

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

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

ตัวเลือกบางตัวทำราวกับว่าคุณได้ใช้คลาสกับบางสิ่งในเอกสาร ตัวอย่างเช่น p:first-child ทำงานราวกับว่าคุณเพิ่มคลาสให้กับองค์ประกอบ p แรก สิ่งเหล่านี้เรียกว่า pseudo-class selectors ตัวเลือก องค์ประกอบหลอก ทำหน้าที่เสมือนว่าองค์ประกอบถูกแทรกแบบไดนามิก ตัวอย่างเช่น ::first-line จะทำหน้าที่คล้ายกับคุณตัด span รอบข้อความบรรทัดแรกของข้อความ อย่างไรก็ตาม มันจะนำมาใช้ใหม่หากความยาวของบรรทัดนั้นเปลี่ยนไป ซึ่งจะไม่เป็นเช่นนั้นหากคุณแทรกองค์ประกอบ คุณสามารถใช้ตัวเลือกเหล่านี้ค่อนข้างซับซ้อน ใน CodePen ด้านล่างเป็นตัวอย่างขององค์ประกอบหลอกที่เชื่อมโยงกับคลาสหลอก เรากำหนดเป้าหมายองค์ประกอบ p แรกด้วย :first-child psuedo-class จากนั้น ::first-line selector จะเลือกบรรทัดแรกขององค์ประกอบนั้น ทำหน้าที่เสมือนว่าเพิ่มช่วงรอบบรรทัดแรกนั้นเพื่อให้เป็นตัวหนาและ เปลี่ยนสี

มรดกและน้ำตก

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

หมายเหตุ : เพื่อให้เข้าใจสิ่งเหล่านี้ทั้งหมด ขอแนะนำให้อ่าน The Cascade and Inheritance ใน MDN Introduction to CSS

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

The Box Model

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

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

ในการสาธิตด้านล่าง ฉันมีสองกล่อง ทั้งสองมีความกว้าง 200 พิกเซล โดยมีเส้นขอบ 5 พิกเซลและช่องว่างภายใน 20 พิกเซล กล่องแรกใช้รุ่นกล่องมาตรฐาน ดังนั้นจึงใช้ความกว้างรวม 250 พิกเซล อย่างที่สองใช้โมเดลกล่องสำรอง ดังนั้นจริง ๆ แล้วกว้าง 200 พิกเซล

เบราว์เซอร์ DevTools สามารถช่วยให้คุณเข้าใจรูปแบบกล่องที่ใช้งานอีกครั้ง ในภาพด้านล่าง ฉันใช้ Firefox DevTools เพื่อตรวจสอบกล่องโดยใช้รูปแบบกล่อง content-box เริ่มต้น เครื่องมือบอกฉันว่านี่คือ Box Model ที่ใช้งานอยู่ และฉันสามารถเห็นขนาดและวิธีที่ขอบและช่องว่างภายในถูกเพิ่มในความกว้างที่ฉันกำหนด

หมายเหตุ : ก่อนหน้า IE6 Internet Explorer ใช้ Box Model ทางเลือก โดยมีช่องว่างภายในและเนื้อหาที่แทรกขอบห่างจากความกว้างที่กำหนด ดังนั้นในขณะที่เบราว์เซอร์ใช้ Box Models ที่แตกต่างกัน! เมื่อหงุดหงิดกับปัญหาด้านการทำงานร่วมกันในปัจจุบัน จงดีใจที่สิ่งต่างๆ ดีขึ้น ดังนั้นเราจึงไม่จัดการกับเบราว์เซอร์ที่คำนวณความกว้างของสิ่งต่างๆ ต่างกัน

มีคำอธิบายที่ดีเกี่ยวกับ Box Model และ Box Sizing ใน CSS Tricks รวมถึงคำอธิบายวิธีที่ดีที่สุดในการใช้โมเดลกล่องอื่นในไซต์ของคุณทั่วโลก

การไหลปกติ

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

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

การจัดรูปแบบบริบท

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

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

หมายเหตุ : เวอร์ชันล่าสุดของข้อกำหนดการแสดงผลจะเปลี่ยนค่าของการ display เพื่อประกาศค่าภายในและภายนอกอย่างชัดเจน ดังนั้น ในอนาคต คุณอาจพูดว่า display: block flex; ( block เป็นชั้นนอกและ flex เป็นชั้นใน)

อ่านเพิ่มเติมเกี่ยวกับ display ได้ที่ MDN

อยู่ในหรือออกจากกระแส

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

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

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

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

เค้าโครง

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

อย่าจินตนาการว่าวิธีการต่างๆ เช่น grid และ flexbox มีการแข่งขันกัน เพื่อที่จะใช้ Layout ได้ดี บางครั้งคุณจะพบว่า component ที่ดีที่สุดคือ flex component และในบางครั้งเป็น Grid ในบางครั้ง คุณจะต้องการพฤติกรรมการไหลของคอลัมน์ของ multicol ทั้งหมดนี้เป็นทางเลือกที่ถูกต้อง หากคุณรู้สึกว่ากำลังต่อสู้กับพฤติกรรมบางอย่าง โดยทั่วไปแล้วจะเป็นสัญญาณที่ดีว่าอาจคุ้มค่าที่จะถอยออกมาและลองใช้แนวทางอื่น เราคุ้นเคยกับการแฮ็กที่ CSS เพื่อให้ทำในสิ่งที่เราต้องการจนเราลืมไปว่าเรามีตัวเลือกอื่นๆ ให้ลองอีกหลายอย่าง

เลย์เอาต์เป็นความเชี่ยวชาญหลักของฉัน และฉันได้เขียนบทความจำนวนหนึ่งที่นี่ใน Smashing Magazine และที่อื่นๆ เพื่อพยายามและช่วยควบคุมแนวเค้าโครงใหม่ นอกจากบทความเลย์เอาต์ที่กล่าวถึงข้างต้นแล้ว ฉันมีทั้งชุดใน Flexbox — เริ่มต้นด้วย What Happens When You Create a Flexbox Flex Container ใน Grid By Example ฉันมีตัวอย่างเล็กๆ น้อยๆ ของ CSS Grid — บวกกับบทช่วยสอน screencast แบบวิดีโอ

นอกจากนี้ — และโดยเฉพาะอย่างยิ่งสำหรับนักออกแบบ — ลองดูวิดีโอชุด Jen Simmons และ Layout Land ของเธอ

การจัดตำแหน่ง

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

บน MDN คุณสามารถเจาะลึกลงไปใน Box Alignment และวิธีนำไปใช้กับ Grid, Flexbox, Multicol และ Block Layout ที่นี่ใน Smashing Magazine ฉันมีบทความเกี่ยวกับการจัดตำแหน่งใน Flexbox โดยเฉพาะ: ทุกสิ่งที่คุณต้องการทราบเกี่ยวกับการจัดตำแหน่งใน Flexbox

ขนาด

ฉันใช้เวลาส่วนใหญ่ในปี 2018 ในการพูดคุยเกี่ยวกับข้อกำหนดการปรับขนาดภายในและภายนอก และความเกี่ยวข้องกับ Grid และ Flexbox โดยเฉพาะอย่างไร บนเว็บ เราคุ้นเคยกับการกำหนดขนาดในความยาวหรือเปอร์เซ็นต์ เนื่องจากเป็นวิธีการที่เราสามารถสร้างเลย์เอาต์ประเภทกริดโดยใช้การลอยได้ อย่างไรก็ตาม วิธีการจัดวางที่ทันสมัยสามารถแบ่งพื้นที่ให้กับเราได้มาก หากเราปล่อยให้เป็นเช่นนั้น การทำความเข้าใจว่า Flexbox กำหนดพื้นที่อย่างไร (หรือหน่วย Grid fr ทำงาน) นั้นคุ้มค่ากับเวลาของคุณ

ที่นี่ใน Smashing Magazine ฉันได้เขียนเกี่ยวกับ Sizing in Layout โดยทั่วไปและสำหรับ Flexbox ในเรื่อง How Big Is That Flexible Box?

การออกแบบที่ตอบสนอง

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

ต่อไปนี้คือคำแนะนำง่ายๆ บางประการเกี่ยวกับการออกแบบที่ตอบสนอง และสำหรับการสืบค้นสื่อ โดยทั่วไปแล้ว ให้อ่านบทความของฉันเรื่องการใช้ Media Queries for Responsive Design ในปี 2018 ฉันจะดูว่า Media Queries มีประโยชน์สำหรับอะไร และยังแสดงคุณสมบัติใหม่ๆ Media Queries ในระดับ 4 ของข้อมูลจำเพาะ

แบบอักษรและการพิมพ์

นอกจาก Layout แล้ว การใช้ฟอนต์บนเว็บก็เปลี่ยนแปลงไปอย่างมากในปีที่แล้ว ฟอนต์แบบปรับได้ ซึ่งช่วยให้ไฟล์ฟอนต์เดียวมีรูปแบบไม่จำกัดอยู่ที่นี่ หากต้องการทราบภาพรวมว่ามันคืออะไรและทำงานอย่างไร ให้ชมการบรรยายสั้นๆ ที่ยอดเยี่ยมจาก Mandy Michael: Variable Fonts and the Future of Web Design นอกจากนี้ ฉันยังขอแนะนำ Dynamic Typography ด้วย Modern CSS และ Variable Fonts โดย Jason Pamental

ในการสำรวจฟอนต์แบบปรับได้และความสามารถ มีตัวอย่างสนุกๆ จาก Microsoft พร้อม Playground จำนวนมากให้ลองใช้ Variable Fonts — Axis Praxis เป็นที่รู้จักมากที่สุด (ผมชอบ Font Playground ด้วย)

เมื่อคุณเริ่มทำงานกับ Variable Fonts แล้ว คู่มือนี้เกี่ยวกับ MDN จะพิสูจน์ได้ว่ามีประโยชน์อย่างเหลือเชื่อ หากต้องการเรียนรู้วิธีใช้โซลูชันทางเลือกสำหรับเบราว์เซอร์ที่ไม่สนับสนุนแบบอักษรตัวแปร โปรดอ่านการใช้แบบอักษรตัวแปรด้วยแบบอักษรเว็บทางเลือกโดย Oliver Schondorfer Firefox DevTools Font Editor ยังรองรับการทำงานกับ Variable Fonts

แปลงร่างและแอนิเมชั่น

การแปลง CSS และแอนิเมชั่นเป็นสิ่งที่ฉันต้องการทราบอย่างแน่นอน ฉันไม่จำเป็นต้องใช้มันบ่อยนัก และไวยากรณ์ก็ดูเหมือนจะกระโดดออกจากหัวของฉันระหว่างการใช้งาน โชคดีที่ข้อมูลอ้างอิงบน MDN ช่วยฉันได้ และฉันขอแนะนำให้เริ่มต้นด้วยคำแนะนำเกี่ยวกับการใช้ CSS Transforms และการใช้ CSS Animations Zell Liew ยังมีบทความดีๆ ที่ให้คำอธิบายที่ดีเกี่ยวกับการเปลี่ยน CSS

หากต้องการค้นพบบางสิ่งที่เป็นไปได้ ให้ดูที่ไซต์ Animista

สิ่งหนึ่งที่อาจสร้างความสับสนเกี่ยวกับแอนิเมชันได้คือต้องใช้แนวทางใด นอกเหนือจากสิ่งที่ได้รับการสนับสนุนใน CSS คุณอาจต้องเกี่ยวข้องกับ JavaScript, SVG หรือ Web Animation API และสิ่งเหล่านี้มักจะรวมกันเป็นก้อน ในการพูดคุยของเธอ เลือกการผจญภัยแอนิเมชั่นของคุณที่บันทึกที่ An Event Apart Val Head อธิบายตัวเลือกต่างๆ

ใช้ Cheatsheets เป็นเครื่องเตือนใจ ไม่ใช่เครื่องมือการเรียนรู้

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

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

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