CSS และ UI
สำรวจ API เบราว์เซอร์ เครื่องมือ และเทคนิคล่าสุดเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่มีประสิทธิภาพและน่าสนใจ
ข้อมูลล่าสุดเกี่ยวกับ 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 ทั่วไปอย่างไร
เครื่องมือในการสร้างคอมโพเนนต์สมัยใหม่
เครื่องมือตำแหน่งโฆษณา Anchor
ใช้เครื่องมือนี้เพื่อวางองค์ประกอบให้สัมพันธ์กันโดยใช้ API การวางตำแหน่งจุดยึด
ตัวกําหนดค่าภาพสไลด์
ประสบการณ์การใช้งานที่คล้ายกับเครื่องมือสร้างเพื่อช่วยแสดงภาพความสามารถของภาพสไลด์ที่ใช้ CSS เท่านั้น เช่น ปุ่ม เครื่องหมาย การแบ่งหน้า และภาวะเฉื่อย
กรณีศึกษาเกี่ยวกับ 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 และคุณจะได้เรียนรู้เกี่ยวกับฟังก์ชัน คุณสมบัติเชิงตรรกะ และอื่นๆ เพื่อเติมเต็มทักษะของนักพัฒนาซอฟต์แวร์ส่วนหน้า