การแนะนำคุณสมบัติที่กำหนดเอง CSS

Jan 30, 2026

วิธีการ

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

5 คุณสมบัติ CSS ใหม่สุดฮอตและวิธีการใช้งาน

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

สำหรับเครื่องมือเพิ่มเติมที่จะทำให้ชีวิตของคุณง่ายขึ้นดูสิ่งเหล่านี้ เว็บโฮสติ้ง บริการและ การจัดเก็บเมฆ ตัวเลือก. หรืออ่านต่อแล้วเราจะเริ่มต้นด้วยตัวอย่างง่ายๆ

: ราก {
      - สีแดง: # FC4752;
    }
    
    .site-navigation {
      พื้นหลังสี: var (- สีแดง);
    }
    
    .site-footer {
      สี: var (- สี - สีแดง);
    }

ที่ :ราก ตัวเลือก Pseudo ตั้งเป้าหมายองค์ประกอบหลักระดับสูงสุดใน DOM ให้องค์ประกอบทั้งหมดสามารถเข้าถึงได้ - สีแดง . ใช่คำนิยามตัวแปร CSS ควรเริ่มต้นด้วย - และคุณสามารถเข้าถึงได้ทุกที่ด้วย var () . ทุกที่ที่มีการเรียงซ้อนภายใต้ของเรา :ราก ตัวเลือก

color-red image — ด้วย var () คุณยังสามารถกำหนดค่าทางลบได้ซึ่งจะใช้หากตัวแปรที่กำหนดไม่สามารถเข้าถึงได้หรือไม่มีอยู่จริง

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

. สถานที่นำทาง {
      พื้นหลังสี: var (- สี - แดง, แดง);
    }

ค่าจะได้รับการสืบทอดจาก DOM ซึ่งหมายความว่าคุณสามารถทำให้เฉพาะเจาะจงมากขึ้น

: ราก {
      - สี: สีแดง;
    }
       
    .site-navigation {
      - สี: สีเขียว;
      
      พื้นหลังสี: var (- สี);
    }
        
    .site-footer {
      สี: var (- สี);
    }

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

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

: ราก {
      - สีแดง: # FC4752;
      - Flex-Layout: แถว;
    }
    
    @Media (ความกว้างสูงสุด: 640px) {
      : ราก {
        - เฟล็กซ์เค้าโครง: คอลัมน์;
      }
    }
    
    .site-navigation {
      จอแสดงผล: Flex;
      Flex-Direction: Var (- Flex-Layout, Row);
      
      พื้นหลังสี: var (- สี - แดง, แดง);
    }
    
    .site-footer {
      สี: var (- สี - สีแดง);
    }

ภายใต้ 640px ทริกเกอร์แบบสอบถามสื่อการเปลี่ยนทิศทางแบบยืดหยุ่นเป็นคอลัมน์ในคลาสการนำทางไซต์ทำให้เนื้อหาแนวตั้ง (คอลัมน์) แทนที่จะเป็นแนวนอนที่เป็นค่าเริ่มต้น (แถว) ในตัวอย่างนี้เนื่องจากตัวแปรเริ่มต้นที่กำหนดไปยังไซต์การนำทางคุณไม่จำเป็นต้องมีการเริ่มต้น :ราก ความหมายของ - เลย์เอาต์; แต่จริง ๆ แล้วมันจะตรงไปที่แถว

amedia written in a green bubble — ภายใต้ 640PX ทริกเกอร์แบบสอบถามสื่อการเปลี่ยนทิศทางแบบยืดหยุ่นเป็นคอลัมน์และสร้างเนื้อหาแนวตั้งแทนแนวนอน

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

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

โดยพื้นฐานแล้วคิดว่ามันอยู่ตามแนวโหมดกลางคืนของ Twitter แต่ไม่มีคุณเปลี่ยน CSS (ฉันเห็นคุณ)

 & lt; หลัก & gt;
      & lt; nav class = "ไซต์ - นำทาง" & gt;
        & lt; div & gt; ฉันรัก interwebs & lt; / div & gt;
      & lt; / nav & gt;
      & lt; div class = "footer เว็บไซต์" & gt;
        & lt; ฉลากสำหรับ = "color-picker" & gt; เปลี่ยนสี & lt; / label & gt;
        & lt; input type = "color" id = "color-picker" & gt;
      & lt; / div & gt;
      & lt; สไตล์ & gt;
        : ราก {
          - สี: # FC4752;
        }
        
        ร่างกาย {margin: 0; padding: 0; }
        
        หลัก {
          จอแสดงผล: Flex;
          Flex-Direction: คอลัมน์;
          เหตุผล - เนื้อหา: ช่องว่างระหว่าง;
          ความสูง: 100vh;
        }
        
        . สถานที่นำทาง
        .site-footer {
          padding: 12px;
        }
        
        .site-navigation {
          พื้นหลังสี: var (- สี, สีแดง);
        }
        
        .site-footer {
          สี: var (- สี);
        }
      & lt; / style & gt;
      & lt; สคริปต์ & gt;
        var colorpicker = document.queryselector ("# color-picker");
        colorpicker.addeventristener ("เปลี่ยน", ฟังก์ชั่น () {
          document.documentelement.style.setproperty ("- สี", นี้. วาล.);
      })
      & lt; / สคริปต์ & gt;
& lt; / main & gt;

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

white text saying - - dark on a dark background — คุณสามารถสร้างเว็บไซต์ของคุณรอบ ๆ ธีมฐานและเพียงแค่ปิดมันด้วยเบราว์เซอร์ที่ใช้การยกอย่างหนัก

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

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

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

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 306 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา สมัครสมาชิก NET ที่นี่ .

บทความที่เกี่ยวข้อง:

5 เคล็ดลับสำหรับ CSS ที่รวดเร็วสุด ๆ
ทำความเข้าใจกับ CSS Display Property
เทคนิค CSS เพื่อปฏิวัติรูปแบบเว็บของคุณ

การแนะนำคุณสมบัติที่กำหนดเอง CSS

วิธีการ - บทความยอดนิยม

วิธีการวาดหัว: คู่มือฉบับสมบูรณ์

สร้างต้นแบบด้วย Adobe XD

เริ่มต้นด้วย Express.js

วิธีการสร้างเอฟเฟกต์การพิมพ์ภาพเคลื่อนไหว

ทาสีกระต่ายซุกซนในสีน้ำ

ทาสีลงบนตาข่าย 3 มิติที่มีเครื่องมือโพลีไลท์ของ zbrushcore

การควบคุมสีและราบรื่นด้วยการสเก็ตช์

เคล็ดลับยอดนิยมในการปรับแต่งเทคนิคภาพประกอบที่วาดด้วยมือของคุณ

หมวดหมู่