CSS และ UI
ค้นพบเครื่องมือและเทคนิคจาก Chrome เพื่อปรับปรุงการออกแบบ CSS และอินเทอร์เฟซผู้ใช้ของเว็บไซต์
พัฒนาทักษะการพัฒนา UI ของคุณ
การวางตำแหน่งแท็ก Anchor
จัดตำแหน่งองค์ประกอบให้สัมพันธ์กันโดยใช้ API การกำหนดตำแหน่งจุดยึด
เคลื่อนไหวไปยัง height: auto; (และคีย์เวิร์ดที่ปรับขนาดที่แท้จริงอื่นๆ)
แสดงคีย์เวิร์ดการปรับขนาดตามเนื้อหาแบบเคลื่อนไหวด้วย
interpolate-size และ calc-size()
การจัดรูปแบบแถบเลื่อน
ใช้คุณสมบัติ
scrollbar-width และ scrollbar-color เพื่อจัดรูปแบบแถบเลื่อน
ความสมดุลของการตัดข้อความ CSS
CSS เป็นเทคนิคการพิมพ์แบบคลาสสิกสำหรับการเขียนขึ้นบรรทัดใหม่ด้วยมือสำหรับบล็อกข้อความที่สมดุล
คู่มือสี CSS ความละเอียดสูง
CSS Color 4 นำเครื่องมือสีขอบเขตกว้างและความสามารถต่างๆ มาสู่เว็บ ซึ่งประกอบด้วยสีที่มากขึ้น ฟังก์ชันการกำหนดเอง และการไล่ระดับสีที่ดีกว่าเดิม
โมเดลออบเจ็กต์ที่มีประเภท CSS
CSS Typed Object Model (Typed OM) นำประเภท เมธอด และโมเดลออบเจ็กต์ที่ยืดหยุ่นมาทำงานกับค่า CSS
เริ่มต้นใช้งานการค้นหาสไตล์
ค้นหาค่ารูปแบบขององค์ประกอบระดับบนสุดโดยใช้กฎ @container
การฝัง CSS
ฟีเจอร์หนึ่งของ CSS Preprocessor ที่เราโปรดปรานได้รวมอยู่ในภาษาแล้ว ซึ่งก็คือการซ้อนกฎสไตล์
ขอบเขต CSS ของ CSS
ดูวิธีสร้างสไตล์ที่กำหนดขอบเขตซึ่งเลือกองค์ประกอบภายในทรีย่อยของ DOM
การผสมสี CSS()
ผสมสีในพื้นที่สีที่รองรับได้จาก CSS ของคุณ
ควบคุมการเลือกที่ nth-child() ได้มากขึ้น
กรองชุดองค์ประกอบย่อยล่วงหน้าก่อนที่จะใช้ตรรกะ An+B
แอคคอร์เดียนพิเศษ
สร้างแอคคอร์เดียนพิเศษที่มีองค์ประกอบ
<details> หลายรายการที่มี name เดียวกัน
ขอแนะนำ Inert
พร็อพเพอร์ตี้ Inert คือแอตทริบิวต์ HTML ร่วมที่ช่วยลดความยุ่งยากในการนำออกและกู้คืนเหตุการณ์อินพุตของผู้ใช้สำหรับองค์ประกอบ ซึ่งรวมถึงเหตุการณ์โฟกัสและเหตุการณ์จากเทคโนโลยีความช่วยเหลือพิเศษ
CSS text-wrap อย่างสวยงาม
เลือกใช้การตัดข้อความให้เหมาะสมเพื่อความสวยงามด้วยความเร็ว
ตารางกริด CSS ในเครื่องมือสำหรับนักพัฒนาเว็บ
วิธีที่เราออกแบบและนำการรองรับเครื่องมือ CSS Grid ในเครื่องมือสำหรับนักพัฒนาเว็บ
การรองรับ CSS-in-JS ในเครื่องมือสำหรับนักพัฒนาเว็บ
เรารองรับ CSS-in-JS ในเครื่องมือสำหรับนักพัฒนาเว็บอย่างไร และแตกต่างจาก CSS ทั่วไปอย่างไร
Shadow DOM
Shadow DOM แบบประกาศ
วิธีใหม่ในการปรับใช้และใช้ Shadow DOM ใน HTML โดยตรง
ชื่อ CSS และ Shadow DOM ที่ผู้เขียนกำหนด
สถานะความสามารถในการทำงานร่วมกันปัจจุบันของชื่อที่ผู้เขียนกำหนดและ Shadow DOM
เลย์เอาต์
วิธีใช้ calc()
ระบุขนาดใน CSS โดยใช้หน่วยวัดขนาดปนกัน
เหตุการณ์สำหรับตำแหน่ง CSS แบบคงที่
บันทึกข้อความและเรียกใช้ JavaScript
ทำให้เข้าถึงเนื้อหาที่ยุบได้
Discover hide=until-found สามารถใช้ค่าแอตทริบิวต์ที่ช่วยให้มั่นใจได้ว่าเนื้อหาภายในส่วนของแอคคอร์เดียนจะค้นพบและลิงก์ไปยังเนื้อหา
กรณีศึกษาเกี่ยวกับ CSS และ UI
ทำไมความสามารถของ UI บนเว็บจึงสำคัญต่อเว็บไซต์ของคุณ
ความสามารถของ UI ในเว็บคืออะไรกันแน่ และจะปรับปรุง Conversion Funnel ได้อย่างไร การนำฟีเจอร์เหล่านี้ไปใช้มีข้อดีอย่างไร
กรณีศึกษาเกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
ดูประโยชน์ของภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนด้วย Policybazaar, redBus และ Tokopedia
ดูกรณีศึกษาการเปลี่ยนรุ่น
ทั้ง redBus, Policybazaar และ Tokopedia ก็ใช้ View Transitions API เพื่อประสิทธิภาพที่ดีขึ้นและ UI ที่ราบรื่น
กรณีศึกษาของ Popover API
Tokopedia ใช้ Popover API เพื่อลดปริมาณโค้ดในแอปพลิเคชัน
ภาพเคลื่อนไหวในเว็บ
Web Animations API
Web Animations API ให้ข้อมูลพื้นฐานที่มีประสิทธิภาพในการอธิบายภาพเคลื่อนไหวที่จำเป็นจาก JavaScript
เอฟเฟกต์ภาพเคลื่อนไหวหลายรายการ
คุณสมบัติการคอมโพเนนต์ภาพเคลื่อนไหวช่วยให้ควบคุมสิ่งที่ควรเกิดขึ้นเมื่อภาพเคลื่อนไหวหลายรายการส่งผลต่อพร็อพเพอร์ตี้เดียวกันพร้อมกัน
เส้นโค้งภาพเคลื่อนไหวที่ซับซ้อนพร้อม linear()
linear() เป็นฟังก์ชันการค่อยๆ เปลี่ยนของ CSS ที่จะแทรกสลับเป็นเส้นตรงระหว่างจุดของจุดต่างๆ เพื่อสร้างเอฟเฟกต์การตีกลับและสปริงขึ้นใหม่
ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
ใช้ไทม์ไลน์การเลื่อนและดูไทม์ไลน์เพื่อสร้างภาพเคลื่อนไหวแบบเลื่อนในลักษณะประกาศ
หลักสูตร
เรียนรู้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
อ่านประวัติของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และดูข้อมูลพื้นฐานเกี่ยวกับเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ คุณจะได้เรียนรู้เกี่ยวกับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ แบบอักษร การช่วยเหลือพิเศษ และอีกมากมาย
หลักสูตร
เรียนรู้เกี่ยวกับ CSS
คุณจะได้ศึกษาข้อมูลพื้นฐานเกี่ยวกับ CSS เช่น โมเดล Box, Cascade และความเฉพาะเจาะจง, Flexbox, ตารางกริด และดัชนีลำดับ z และคุณจะได้เรียนรู้เกี่ยวกับฟังก์ชัน คุณสมบัติเชิงตรรกะ และอื่นๆ เพื่อเติมเต็มทักษะของนักพัฒนาซอฟต์แวร์ส่วนหน้า