CSS Unit 7 ตัวที่คุณไม่น่าจะรู้มาก่อน

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

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

เมื่อเว็บนั้นเติบโตอย่างต่อเนื่อง เวลาเดียวกันความต้องการวิธีแก้ปัญหาใหม่ๆ ก็มีมากขึ้นตามไปด้วย ดังนั้นในฐานะนักออกแบบเว็บหรือ Front End Developer เราไม่มีทางเลือกที่จะต้องเรียนรู้เครื่องมือใหม่ๆ และต้องรู้จักมันอย่างดีด้วย

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

และวันนี้ ทางเราพร้อมเสนอเกี่ยวกับ CSS Tool บางอันที่คุณไม่น่าจะรู้จักมาก่อน เครื่องมือเหล่านี้คือหน่วยวัดของ CSS เช่น pixel หรือ em แต่มันค่อนข้างที่คุณจะไม่เคยได้ยินเกี่ยวกับมันเลย มาดูกัน

rem

เราจะเริ่มด้วยอันที่คุณน่าจะเคยคุ้นเคยกับมันดี หน่วย em นั้นถูกนิยามสำหรับ font-size ตัวที่ถูกระบุนั้น ดังนั้นถ้าคุณเซ็ตขนาด font size บนอิลิเมนต์ body ค่าของ em ของอิลิเมนต์ลูกใดๆ ก็ตามภายใต้ body จะเท่ากับขนาด font size นั้น

<body>
    <div class="test">Test</div>
</body>

body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

และนี่ เราบอกว่า div นั้นจะมี font-size ขนาด 1.2em นั่นคือ 1.2 เท่าของอะไรก็ตามที่ font-size นั้น inherit มา ในกรณีนี้คือ 14px ฉะนั้นผลลัพธ์คือ 16.8px

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

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

ขณะที่วิธีนี้จะเหมาะในบางกรณี แต่บ่อยครั้งมันก็ไม่ใช่ค่าที่เราต้องการ ในกรณีนี้ เราจะใช้ rem แทน ตัว "r" ใน rem หมายถึง "root" ในที่นี้จะเท่ากับ font-size ของ root อิลิเมนต์ ส่วนมากมันก็คือ html อิลิเมนต์นั่นเอง

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

จากตัวอย่างที่แล้ว ถ้าใช้แบบนี้ div ที่ซ้อนกันลงมาจะมีค่าเท่ากับ 16.8px ทุกอัน

ดีสำหรับ Grid

rem นั้นไม่ได้เหมาะแค่การเซ็ต font size เท่านั้น จากตัวอย่างต่อไปนี้ เราจะใช้มันเซ็ตระบบ grid (entire grid system หรือ UI style) บน root ของ HTML โดยใช้ rem และ ใช้ em ในตำแหน่งที่เจาะจงลงไป นั่นจะช่วยให้เรากำหนดขนาด font size และ scale ต่างๆ ให้แน่นอนได้

.container {
    width: 70rem; // 70 * 14px = 980px
}

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

ใช้มันได้ไหม

ดูที่ Feature: rem (root em) units บน caniuse.com

vh และ vw

เทคนิคการทำ Responsive Web Design นั้นใช้เรื่องเปอร์เซ็นต์เข้ามาเกี่ยวข้องอย่างมาก อย่างไรก็ตาม การใช้ CSS percent ไม่ใช่ทางออกสำหรับทุกปัญหา ค่า width ใน CSS นั้น relative กับอิลิเมนต์ parent container ที่ใกล้ที่สุด แล้วถ้าคุณต้องการใช้ width หรือ height ของ viewport แทนที่จะใช้ width ของ parent element หล่ะ นี่แหละคือที่ๆ vh และ vw นั้นช่วยเราได้

อิลิเมนต์ที่ใช้ค่า vh นั้นจะเท่ากับ 1/100 ของ height ของ viewport ยกตัวอย่าง ถ้าค่า height ของ browswer คือ 900px แล้วค่า 1vh จะเท่ากับ 9px เช่นเดียวกัน ถ้า width ของ viewport คือ 750px แล้ว 1vw นั้นจะมีค่าเท่ากับ 7.5px

มันดูเหมือนกับว่าเราสามารถใช้กฎเหล่านี้ได้อย่างไม่จำกัด ยกตัวอย่าง วิธีการง่ายๆ ของการใช้ส่วนสูงแบบเต็ม (full height) หรือใกล้เต็ม (near full height) สามารถทำได้ด้วย CSS เพียงบรรทัดเดียว

.slide {
    height: 100vh;
}

ลองจินตนาการว่าคุณต้องการหัวข้อที่ถูกเซ็ตด้วย width ขนาดเต็มของจอภาพทั้งหมด เพื่อที่จะทำสิ่งนี้ได้ คุณควรเซ็ต font-size ด้วยค่า vw size นี้จะถูกปรับขนาดด้วย width ของ browser

ใช้มันได้ไหม

ดูที่ Feature: Viewport units: vw, vh บน caniuse.com

vmin และ vmax

ขณะที่ vh และ vm จะเกี่ยวกับ height และ width ของ viewport ในทำนองเดียวกัน vmin และ vmax นั้นคือ ค่าสูงสุด หรือ ค่าต่ำสุด ของ viewport นั้นส่วน width และ height ขึ้นกับว่าอันไหนขนาดสั้นกว่าหรือยาวกว่ากัน ยกตัวอย่าง ถ้าบราวเซอร์ตั้งค่าความกว้างไว้ที่ 1100px และความสูงไว้ที่ 700px 1vmin จะท่ากับ 7px และ 1vmax จะเท่ากับ 11px อย่างไรก็ตาม ถ้าเซ็ตค่าความกว้างไว้ที่ 800px และ ค่าความสูงไว้ที่ 1080px vmin นั้นจะเท่ากับ 8px ขณะที่ vmax จะเท่ากับ 10.8px

แล้ว... เมื่อไหร่หล่ะที่เราจะได้ใช้ค่าเหล่านี้

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

.box {
    height: 100vmin;
    width: 100vmin;
}

ถ้าคุณต้องการสี่เหลี่ยมที่ ครอบคลุมพื้นที่ ที่ต้องการมองเห็นได้เสมอๆ (แตะทั้งสี่ด้านของจอทุกเวลา) ให้ใช้กฎแบบเดียวกันด้วย vmax แทน

.box {
    height: 100vmax;
    width: 100vmax;
}

การรวมกันของกฎเหล่านี้ จะช่วยให้มีวิธีที่ยืดหยุ่นหลากหลายในการจัดการกับ viewport แบบใหม่ๆ และน่าสนใจ

ใช้มันได้ไหม

ดูที่ Feature: Viewport units: vmin, vmax บน caniuse.com

ex และ ch

หน่วย ex และ ch จะเหมือนกับ em และ rem แต่จะใช้กับ font หรือ font size ปัจจุบัน อย่างไรก็ตามกรณีที่ไม่เหมือน em และ rem คือหน่วยเหล่านี้จะขึ้นกับ font-family ในที่ๆ มันจะขึ้นกับหน่วยวัดเฉพาะของ font ของตัวมันเองนั้น

หน่วย ch หรือ character unit นี้ ถูกนิยามเป็น "หน่วยวัดชั้นสูง" ของขนาด 0 character เกี่ยวกับการถกเถียงที่น่าสนใจว่าสิ่งนี้หมายถึงอะไร ลองดูที่ Eric Meyers's blog แต่แนวคิดพื้นฐานคือให้ monospace font กล่องที่มีความกว้าง N character เช่น width: 40ch; นั้นจะประกอบด้วย string ขนาด 40 ตัวอักษรเสมอๆ ใน font ที่ระบุ ขณะที่การใช้งานโดยทั่วไปของกฎนี้ เกี่ยวกับการจัดวางอักษรเบรลล์ ความเป็นไปได้ของความคิดสร้างสรรค์เหล่านี้เหล่านี้จะถูกขยายจากกฎง่ายๆ นี้

หน่วย ex นั้นถูกนิยามเป็น "x-height ของขนาด font ปกติ หรือ 1/2 ของ em" x-height ของ font นั้นคือ height ของ x ที่เป็น lower-case ของ font นั้น หลายครั้งทีเดียวหมายถึงกึ่งกลางของ font นั้น

x-height; ขนาด height ของ x ที่เป็น lower case (อ่านเพิ่มเติมได้ที่ The Anatomy of Web Typography)

มีหลายวิธีในการใช้งานหน่วยชนิดนี้ หลายครั้งใช้เกี่ยวกับ typographic micro-adjustment ยกตัวอย่าง อิลิเมนต์ sup ที่ซึ่งมาจาก superscript สามารถถูกดันขึ้นไปด้านบนของบรรทัดใช้ตำแหน่ง position relative และ ใช้ bottom value คือ 1ex เหมือนกัน คุณสามารถดึงอิลิเมนต์ subscript ลงมา ค่า default ของบราวเซอร์ที่ใช้ utilize superscript และ subscript เจาะจงที่ vertical-align rules แต่ถ้าคุณต้องการควบคุมแต่ละส่วนยิ่งไปกว่านี้ คุณสามารถจัดการมันอย่างชัดเจนไปเลยแบบนี้

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

ใช้มันได้ไหม

หน่วย ex นั้น มีมาตั้งแต่ CSS1 แล้ว แม้ว่าคุณจะไม่ค่อยเห็นการสนับสนุนที่แข็งแกร่งกับเจ้าหน่วย ch นี้ซักเท่าไหร่ สำหรับการสนับสนุนที่เจาะจงไปมากยิ่งขึ้น ลองตรวจดูที่ CSS units and values บน Eric Meyer's blog ดู

โดยสรุป

เราต้องติดตามการพัฒนาอย่างต่อเนื่อง ส่วนขยายต่างๆ ของ CSS นั้นสำคัญมาก มันจำเป็นที่คุณจะต้องรู้เครื่องมือทั้งหมดในชุดเครื่องมือของคุณ บางที คุณอาจเจอกับปัญหาบางอย่างที่ต้องการวิธีการแก้ปัญหาที่ไม่คาดฝันมาก่อน อาจจะต้องใช้หน่วยวัดเหล่านี้มาใช้งานทันทีเลยก็ได้ ลองสละเวลาเพื่ออ่าน specification ใหม่ๆ ดู สมัครสมาชิกเพื่อรับข่าวสารและเนื้อหาใหม่ๆ ได้ที่ cssweekly และอย่าลืม สมัครสมาชิกที่นี่ สำหรับการอัพเดตรายสัปดาห์ คอร์สเรียนต่างๆ บทเรียนฟรีและ resource บน Web Design ของ Tuts+

บทความที่น่าสนใจเพิ่มเติม

เนื้อหาดีๆ เกี่ยวกับหน่วยวัด CSS เพิ่มเติม