Category: CSS HTML

เนื้อหาเกี่ยวกับ CSS และ HTML

วิธีการใช้งาน css clamp()
เมื่อเราพูดถึงการทำเว็บแบบ Responsive การใช้งาน clamp() เป็นเครื่องมือที่น่าสนใจในการจัดการขนาดตามขนาดของอุปกรณ์ที่แสดงผล แล้ว clamp() คืออะไร เราสามารถใช้งานมันได้อย่างไร
Table of Contents
เริ่มต้นการใช้งาน css clamp()
ตัวอย่างการใช้งาน clamp()
Browser ที่รองรับ clamp()
เริ่มต้นการใช้งาน css clamp()

ในการพัฒนาเว็บไซต์แบบ Responsive ที่ตอบสนองตามขนาดของหน้าจอ ตัว clamp() มีความสามารถในการกำหนดค่าที่ปรับเปลี่ยนโดยอยู่ระหว่างค่าต่ำสุด และค่าสูงสุด

รูปแบบของ clamp() คือ
```
property: clamp(min, val, max);
```
- min : ค่าต่ำสุดที่คุณต้องการ
- val : ค่าที่ปรับเปลี่ยน
- max : ค่าสูงสุดที่คุณต้องการ
โดย property ที่ใช้งาน clamp() เรามักเจอกับ width, height, margin, padding, border-width, font-size และ text-shadow

ตัวอย่างการใช้งาน clamp()

ตัวอย่างง่าย ๆ ในการใช้งานคือ การกำหนดขนาดตัวอักษรโดยปรับตามขนาดหน้าจอ
```
font-size: clamp(2rem, 1.0625rem + 3.125vw, 3rem);
```
โดยผมใช้งานเว็บ https://clamp.font-size.app/ ในการคำนวนค่าที่นำมาใช้ใน clamp() ซึ่งในตัวอย่างคือ
- ถ้าหน้าจอไม่ถึง 480px จะมีขนาดตัวอักษรที่ 32px
- ถ้าหน้าจอมากกว่า 992px จะมีขนาดตัวอักษรที่ 48px
- หน้าจอขนาดระหว่าง 480px กับ 992px จะมีขนาดตัวอักษรที่ปรับตามขนาดหน้าจอ ( 1.0625rem + 3.125vw )
Browser ที่รองรับ clamp()

ในปัจจุบัน Browser ที่คนใช้งานกัน สนับสนุนการใช้งาน clamp() แล้ว แต่ถ้าหากยังต้องสนับสนุน IE กันอยู่ คงต้องมีการใช้ fallback style ไว้

การใช้งาน clamp() เป็นทางเลือกที่ดีในการปรับเปลี่ยนขนาดตามขนาดของหน้าจอเพื่อตอบสนองการทำเว็บไซต์แบบ Responsive หากยังไม่เคยใช้งาน ถึงเวลาต้องเรียนรู้การใช้งาน clamp() ได้แล้วละครับ
October 16, 2023
ทำความเข้าใจ CSS Flexbox – 1
แต่ก่อนเวลาเราต้องการจัด Layout ของเว็บไซต์ เราใช้ <table> ในการทำ หลังจากนั้นมีการพัฒนามาใช้งาน float หรือ position และในปัจจุบันที่เขียนบทความนี้อยู่ เรามี flex และ grid ที่ใช้ในการจัด Layout ของเว็บไซต์

สิ่งที่ flex และ grid ดีกว่า <table>, float และ position ตรงที่สามารถจัดการการจัดเรียงเนื้อหา จัดเรียง element ได้ด้วย attribute ที่ใช้ร่วมกับ flex และ grid

โดย Flexbox เป็นสิ่งที่มาช่วยในการจัด Layout ในมิติเดียว ( แนวตั้ง หรือแนวนอน ) ยกตัวอย่างให้เห็นภาพ คือเวลาทำเว็บไซต์แล้วอยากให้กล่องเนื้อหาเราอยู่ด้านซ้าย และกล่อง sidebar อยู่ด้านขวา

CodePen Embed Fallback

เราสามารถใช้ CSS Flexbox ทำอะไรได้บ้าง

ในการจัด Layout ด้วย CSS Flex นั้น สามารถตัดสินใจเพื่อจะใช้งานด้วยสิ่งต่าง ๆ เหล่านี้ได้
- จัดรูปแบบการแสดงผลมิติเดียวในแนวตั้ง หรือแนวนอน ( a column or a row )
- สนับสนุนการทำงานกับ writing mode ( อ่านเพื่อทำความเข้าใจเกี่ยวกับ writing mode : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode )
- สามารถจัดลำดับการแสดงผลได้ เช่น ในหน้าจอ tablet อยากให้เรียง block-2, block-1, block-3 แต่บนหน้าจอ desktop อยากให้เรียง block-3, block-2, block-1 ได้
- ระยะห่างสำหรับ element ที่อยู่ภายใน สามารถยืดหยุ่นตาม element ที่ครอบคลุมไว้อยู่ได้
- สามารถจัดตำแหน่งการแสดงผล element ด้านในได้ง่าย เช่น จัดให้ทุก element ด้านในให้อยู่กลาง element ที่ครอบคลุมอยู่
- สามารถจัดการตำแหน่งการแสดงผล เฉพาะ element ด้านในที่เลือกได้
วิธีการใช้งาน CSS Flexbox เบื้องต้น

สำหรับค่ามาตรฐานของในการประกาศ display: flex; ให้กับ element นั้น คือ
- element ด้านในแสดงผลเรียงในแนวนอน flex-direction: row;
- element ด้านในเรียงเป็นแถวเดียว flex-wrap: noswap;
- element ด้านใน ไม่ขยายเพื่อให้เต็ม element ที่ครอบคลุมอยู่ flex-grow: 0;
- element ด้านในเรียงกันโดยเริ่มจากที่จุดเริ่มต้น justify-content: normal; และ align-items: normal;
การควบคุมทิศทางของ element ด้านในด้วย flex-direction

ถ้าเราไม่ได้กำหนด flex-direction ไว้ อย่างที่บอกไว้ด้านบนค่ามาตรฐานจะเป็น row โดยค่าต่าง ๆ ที่ใช้กับ flex-direction นั้น มีดังนี้
- row แสดงผล element ด้านในเป็นแนวนอน
- row-reverse แสดงผล element ด้านในเป็นแนวนอน โดยเริ่มจากจุดสุดท้ายของ element นี้
- column แสดงผล element ด้านในเป็นแนวตั้ง
- column-reverse แสดงผล element ด้านในเป็นแนวตั้ง โดยเริ่มจากจุดสุดท้ายของ element นี้
สามารถทำความเข้าใจเพิ่มเติม โดยทดลองเปลี่ยนค่าในกล่อง dropdown ด้านล่าง

CodePen Embed Fallback

สำหรับบทความนี้ ขอจบไว้ตรงนี้ก่อน แล้วเราจะมาต่อกันในบทความหน้า ที่จะมาอธิบายเกี่ยวกับ CSS Flexbox เพิ่มเติม
February 28, 2022
วิธีสร้าง accordion โดยไม่ต้องใช้ javascript
ในความคิดของหลาย ๆ คนคิดว่า ถ้าจะสร้าง accordion สำหรับใช้ในเว็บไซต์ เราต้องใช้ javascript ประกอบ แต่ที่จริงแล้ว ตัว html มี tag ที่สามารถใช้งานในลักษณะคล้ายกับ accordion ไว้ให้อยู่แล้ว tag นั้นก็คือ <details>

โดย <details> นั้น จะใช้งานร่วมกับ <summary> และมีสถานะที่จะแสดงผลข้อมูล คือ open

รูปแบบมาตรฐานของ <details> จะแสดงผลนำหน้าด้วยสามเหลี่ยมขนาดเล็ก และหมุนเป็นสามเหลี่ยมคว่ำ เพื่อแสดงสถานะการเปิด ปิด

ส่วนข้อความหลังสามเหลี่ยมนั้น เป็นข้อความใน <summary>

ตัวอย่างรูปแบบมาตรฐานของ <details>
```
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```
ผลลัพธ์

Details
Something small enough to escape casual notice.

ซึ่งถ้าเราต้องการให้มีสถานะเปิดแสดงผลตั้งแต่แรก ให้ใส่ open ลงไปใน <details> เลย
```
<details open>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```
ผลลัพธ์

Details
Something small enough to escape casual notice.

และเรายังสามารถเขียน css เพื่อมาตกแต่งหน้าตาของมันให้ดูสวยงามขึ้นได้อีกด้วย

ตัวอย่าง accordion โดยไม่ต้องใช้ javascript

CodePen Embed Fallback

เข้าใจได้ว่า สามารถใช้งานในระดับพื้นฐานได้ละ แต่ถ้าต้องการจะประยุกต์ใช้งานอะไรเพิ่มเติม คงต้องให้ javascript มาช่วยเหลืออยู่ดี
February 25, 2022
อะไรคือ Empty Element
สำหรับคำถามว่า อะไรคือ Empty Element เราสามารถบอกได้คร่าว ๆ คือ element ที่จะไม่มีอะไรอยู่ด้านใน

ตัวอย่าง element ที่มีอะไรอยู่ด้านใน เช่น
```
<div>div มีอะไรอยู่ด้านใน</div>
<p>p มีอะไรอยู่ด้านใน</p>
<a href="#">a มีอะไรอยู่ด้านใน</a>
```
แล้วอะไรเป็น empty element ยกตัวอย่างง่ายที่สุด ที่คิดว่าทุกคนเคยใช้งานมันอยู่แล้วคือ
```
<img src="pic.jpg" alt="รูปภาพ">
```
ใช่แล้ว <img> นั้นเป็น empty element และที่สำคัญ empty element นั้น เราจะไม่มี closing tag
```
<img src="pic.jpg" alt="รูปภาพ"></img> // แบบนี้ผิด ห้ามใช้
```
แล้วมี element ไหนที่เป็น empty element บ้างละ ตามรายการนี้เลยครับ
- <area>
- <base>
- <br>
- <col>
- <embed>
- <hr>
- <img>
- <input>
- <link>
- <meta>
- <param>
- <source>
- <track>
- <wbr>
ส่วนแต่ละ element ใช้งานยังไง ลองค้น ๆ ดูในเว็บเราดูละกัน น่าจะมีเขียนถึงอยู่บ้างละ
February 23, 2022
ข้อแตกต่างของ target แต่ละแบบ
ข้อแตกต่างของ target แต่ละแบบนั้น ถ้าเราอ่านเพียงแค่คำอธิบาย โดย
- _self แสดงผลในหน้าปัจจุบัน ปรกติทุก element จะมี target="_self" เป็นมาตรฐาน
- _parent แสดงผลในระดับบนถัดไปของหน้าปัจจุบัน
- _top แสดงผลในระดับบนสุดของหน้าปัจจุบัน
- _blank แสดงผลในหน้าใหม่
ก็ยังไม่ค่อยเข้าใจแน่ชัดเท่าไหร่ ผมเลยลองทำมาเป็นตัวอย่างให้ดูว่า ข้อแตกต่างของ target แต่ละแบบนั้น มันมีอะไรที่ต่างกันบ้าง โดยที่ผมสร้างไฟล์ขึ้นมา 4 ไฟล์ ประกอบด้วย
- index.html
- iframe-1.html
- iframe-2.html
- iframe-3.html
โดยที่ index.html นั้น จะมี <body> ดังนี้
```
<ul>
  <li>
    <a href="https://rabbitinblack.com" target="_self">_self Click</a>
  </li>
  <li>
    <a href="https://rabbitinblack.com" target="_parent">_parent Click</a>
  </li>
  <li>
    <a href="https://rabbitinblack.com" target="_top">_top Click</a>
  </li>
  <li>
    <a href="https://rabbitinblack.com" target="_blank">_blank Click</a>
  </li>
</ul>
```
หลังจากนั้นใน iframe-1.html จะมี iframe ที่เรียกใช้ index.html อยู่ ส่วน iframe-2.html จะเรียก iframe ที่มี iframe-1.html อยู่

และ iframe-3.html นั้นก็จะเรียก iframe ที่มี iframe-2.html อยู่ ซึ่งผลลัพธ์จะออกมาประมาณนี้

โดยผมใส่กรอบสีไว้ ให้แยกดูง่ายขึ้น

จากรูปนั้น ถ้าเราคลิกที่ _self Click ตัว iframe ใน Frame 1 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

ถ้าเราคลิกที่ _parent Click ตัว iframe ใน Frame 2 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

ถ้าเราคลิกที่ _top Click ตัวหน้าเพจนั้น จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

และถ้าเราคลิกที่ _blank Click จะมีการเปิดหน้าใหม่ตาม URL ที่เรากำหนดไว้ในลิงก์

หรือสามารถเปิดดูตัวอย่าง และลองคลิกลิงก์ได้เองที่

ตัวอย่างข้อแตกต่างของ target แต่ละแบบ

https://rabbitinblack.com/html/target/iframe-3.html

หวังว่าทุกคนจะเข้าใจวิธีการใช้งาน target ได้มากขึ้นนะครับ
February 21, 2022
วิธีไล่สีตัวอักษรด้วย CSS
ในการสร้างคอนเท้นต์ในเว็บไซต์นั้น บางทีเราต้องการไล่สีให้ตัวอักษรเพื่อความสวยงาม โดยตัวเอกของเราในครั้งนี้จะเป็น
```
background-clip: text;
-webkit-background-clip: text;
```
และสิ่งที่เราใช้ประกอบด้วยคือ การใช้พื้นหลังแบบไล่สี รวมถึงให้ตัวอักษรเราโปร่งใส
```
background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
color: transparent;
```
ตัวอย่างการไล่สีตัวอักษรด้วย CSS

CodePen Embed Fallback
February 18, 2022