การใช้คุณสมบัติกำหนดเอง CSS เพื่อ UX ที่ดีขึ้น

ปรับปรุงล่าสุด - 8 กรกฎาคม 2021

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

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

ขจัดความยุ่งเหยิงด้วยตัวแปร CSS

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

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

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

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

เบราว์เซอร์รองรับตัวแปร CSS อย่างไร

นี่เป็นคำถามที่พบบ่อยที่สุดที่เกิดขึ้นเมื่อนำตัวแปร CSS มาสู่การอภิปราย ตาม Caniuse การสนับสนุนเบราว์เซอร์สำหรับตัวแปร CSS อยู่ที่ 93.16% รองรับในเบราว์เซอร์ที่ทันสมัยทั้งหมด (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ และ Edge 16+) และเช่นเคย IE หายไปจากการแสดงและมี ส่วนแบ่งการตลาด ที่น่าประหลาดใจ 6.47% สำหรับนักพัฒนาที่ยากจนซึ่งต้องสนับสนุนเบราว์เซอร์รุ่นเก่า ไม่ต้องกังวล Polyfills หรือมากกว่าที่ถูกต้อง ponyfills อยู่ที่นี่เพื่อช่วยวันนี้

การแนะนำตัวแปร CSS อย่างเป็นทางการ

หากคุณคุ้นเคยกับตัวแปร CSS คุณจะไม่มีปัญหากับตัวแปร CSS

ตัวแปร SASS ถูกประกาศดังนี้:

<pre>

$facebook-สีน้ำเงิน: #4267B2;

</pre>

ในขณะที่ประกาศตัวแปร CSS แตกต่างกันเล็กน้อย:

<pre>

:รูท {

–ยี่ห้อ-สี: #4267B2;

}

.brand-navbar {

พื้นหลัง: var(- -brand-color);

}

</pre>

สังเกตความแตกต่างเล็กน้อยระหว่างสองไวยากรณ์:

• ตัวแปร CSS ต้องนำหน้าด้วยเครื่องหมายขีดกลาง 2 ตัว
• โดยปกติ ตัวแปร CSS จะถูกประกาศใน ':root' แต่สามารถประกาศใหม่ได้ทุกเมื่อ
• คุณสมบัติ CSS ถูกดึงออกมาโดยใช้ฟังก์ชัน 'var()'

ตัวแปร CSS ยังให้การเข้าถึงคุณลักษณะเพิ่มเติมหลายอย่าง

ค่า Cascading

คุณสมบัติ CSS เรียงต่อกันตามกฎการเรียงซ้อนปกติ กล่าวอีกนัยหนึ่ง การประกาศซ้ำด้านล่างไม่ส่งผลกระทบต่อสิ่งที่กล่าวมาข้างต้น

<pre>

:root { –color: สีเหลือง; }

div { –color: สีน้ำเงิน; }

#great { –color: สีเขียว; }

* { สี: var (–สี); }

<p>ตัวจะเหลือง สืบทอดมาจากรูท!</p>

<div>ฉันเป็นสีฟ้า!</div>

<div id="ยอดเยี่ยม">

มันได้ผล! ฉันเขียว!

<p>ฉันเป็นสีเขียวด้วย! สืบทอดมาจากเบื้องบน!</p>

</div>

</pre>

ค่าทางเลือก

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

ลายเซ็นดูเหมือน 'var(<custom-property-name> [, <declaration-value> ]?)' และสามารถใช้ได้ในลักษณะต่อไปนี้

<pre>

.brand-navbar {

พื้นหลัง: var(–brand-color, “#4267B2”);

}

</pre>

หากไม่ได้กำหนด '–brand-color' ระบบจะใช้ “#4267B2” แทน

เข้าถึงผ่าน JavaScript

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

พิจารณาแดชบอร์ดที่อนุญาตให้ผู้ใช้เลือกสีที่กำหนดเองผ่านป๊อปอัปหรือสิ่งที่คล้ายกัน

<pre>

.brand-navbar {

พื้นหลัง: var(–brand-color, “#4267B2”);

}

// เพื่อรับค่าปัจจุบัน

getComputedStyle(document.documentElement).getPropertyValue('–brand-color');

//เพื่อตั้งค่า

document.documentElement.style.setProperty('–brand-color', 'red');

//คุณยังสามารถกำหนดคุณสมบัติ CSS หนึ่งให้กับอีกคุณสมบัติหนึ่งได้

document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');

</pre>

การกำหนดขอบเขตทั่วโลกและระดับท้องถิ่น

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

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

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

การใช้คุณสมบัติแบบกำหนดเองกับแบบสอบถามสื่อ

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

<pre>

@media (ความกว้างต่ำสุด: var (–เบรกพอยต์)){

ช่องว่างภายใน: 1rem;

}

</pre>

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

แอปพลิเคชั่นที่ใช้งานได้จริงของคุณสมบัติ CSS ที่กำหนดเองมีอะไรบ้าง

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

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

เพิ่มโหมดมืด

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

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

การเพิ่มโหมดมืดบน WordPress

ตัวแปร CSS นั้นมีอิทธิพลมากจนเข้าถึงโลกของ WordPress วันนี้ การสร้างโหมดมืด (หรือโดยทั่วไปแล้ว ธีม) แอป WordPress นั้นค่อนข้างไม่สำคัญ

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

“หากแอปดังกล่าวเข้าถึงผู้บริโภคได้ คุณอาจได้รับการร้องเรียนมากมาย หากคุณไม่มีไฟล์ CSS เฉพาะสำหรับตัวแปรใดก็ตามที่คุณต้องการเปลี่ยนแปลง สิ่งต่างๆ จะยิ่งแย่ลงไปอีก” เฮเลนา นิวแมน นักพัฒนาอาวุโสของ Papersowl Review และผู้จัดพิมพ์สำหรับ บริการเขียนเรซูเม่ พิจารณาว่าเป็นส่วนเสริมที่จำเป็นในข้อกำหนด CSS

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

การเพิ่มการออกแบบที่ตอบสนองต่อเว็บไซต์

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

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

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

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

บทสรุป

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