เริ่มต้นรู้จักกับ Dynamic CSS

Style Sheet หรือ CSS เป็นส่วนที่ทำการตกแต่งให้หน้าเว็บของเราดูสวยงาม แต่ในการทำงานจริง Style Sheet จะมีความวุ่นวายเยอะมาก ซึ่งทำให้การจะแก้ไข Style Sheet ต้องใช้เวลาเป็นอย่างมาก

ดังนั้นจึงมีแนวคิดที่จะสร้าง Framework ขึ้นมาเพื่อที่จะทำการ generate Style Sheet ออกมาให้เรา โดยใช้วิธีการเขียนที่เรียบง่ายกว่า Style Sheet จริงๆมาก โดยในปัจจุบันจะมีอยู่ 2 ค่ายหลักๆ คือ

  • LESS
  • Sass

ทั้ง LESS และ Sass เป็น Dynamic Style Sheet ทั้งคู่ แต่ LESS จะมีข้อดีกว่าตรงที่ จะสามารถ render ในฝั่ง Client ด้วย JavaScript ได้ด้วย ส่วน Sass นั้นจะต้องทำการ render ที่ฝั่งของ server เพียงอย่างเดียว

ทั้ง LESS และ Sass นั้นถูกหยิบเอาไปใช้ใน Framework ต่างๆอย่างมากมาย เช่น Bootstrap หรือ JavaScript Framework อย่าง ExtJs

ข้อดีของการใช้ Dynamic Stylesheet คือเราสามารถเขียน Style Sheet ได้เหมือนกับการเขียนโปรแกรม มีการประกาศตัวแปร มีการใส่วงเล็บซ้อนกันได้ (Nested) โดยที่เราสามารถอ่านและทำความเข้าใจ LESS และ Sass ได้ไม่ยากนัก

 

การกำหนดขนาดของ Font ด้วย %

การกำหนดค่าของ font-size นอกจากจะสามารถกำหนดขนาดเป็น

  • px (Pixel)
  • pt  (Point)
  • pc  (Pica)
  • em
  • ex

แล้วยังสามารถกำหนดหน่วยให้เป็น % ได้ด้วย ยกตัวอย่างเช่น

ความหมายคือ header ที่กำหนดด้วย <h3></h3> จะมีขนาดเป็น 80% ของ default font

ซึ่งสิ่งที่ต้องระวังไว้คือ แต่ละ browser ก็จะทำการกำหนดค่าไว้แตกต่างกันดังนั้นเราต้องกำหนด font ที่ต้องการให้เป็น default ให้กับ body

ใน element ต่างๆ ที่อยู่ใน body จะกำหนดค่าเป็น % เพื่อที่จะให้แสดงผลสัมพันธ์กับขนาดของ font ใน body ได้

การกำหนดขนาดของ font ด้วยหน่วยต่างๆ

การกำหนดขนาดของ font ทำได้โดยการกำหนด font-size ว่าให้มีค่าเป็นเท่าไหร่และใช้หน่วยอะไร ตามตัวอย่าง

โดยก่อนหน้านี้เราได้พูดถึงหน่วยที่สามารถใช้งานได้ภายใน CSS ซึ่งสามารถตามไปอ่านย้อนหลังได้ที่ การเลือกใช้หน่วยใน CSS โดยในบทความนี้จะพูดถึงลักษณะของหน่วยต่างๆกับ font-size เท่านั้น

เริ่มจากในตัวอย่างจะเป็นการกำหนดขนาดของ font ที่เป็น default ไว้ที่ 10 pixel จะเป็นค่าที่คงที่เสมอไม่ว่าจะแสดงผลทางหน้าจอ หรือ print ออกกระดาษ และไม่ว่าขนาดของกระดาษจะเป็นเท่าไหร่ก็ตาม font ก็จะมีขนาดที่คงที่เสมอ

ถ้าเราต้องการให้หน้าจอของเราปรับขนาดของตัวอักษรได้ Small, Medium หรือ Large เราจะต้องเลือกหน่วยเป็น em โดยถ้าเรากำหนดขนาดของ font ไว้ที่ 1 em

สิ่งที่เราจะได้คือการกำหนดขนาดของตัวอักษรใน Setting  (Small, Medium, Large) จะมีผลทำให้ขนาดของตัวอักษรเปลี่ยนตาม

ใน Chrome เราสามารถเข้าไปที่ Setting หลังจากนั้นเลือก Advance Setting แล้วก็เปลี่ยน font size ใน Web Content ขนาดของ font ที่กำหนด font-size โดยใช้หน่วย em จะเปลี่ยนตาม

การเลือกใช้หน่วยใน CSS

ใน CSS เรามักจะมีปัญหากับการเลือกใช้หน่วย ไม่ว่าจะเป็นการกำหนดขนาดของ font หรือ ขนาดของ div

เริ่มจากหน่วยต่างๆที่สามารถใช้ได้ภายใน CSS

  • pt (Point)
  • pc (Pica)
  • px (Pixel)
  • em (em)
  • ex (ex)
  • % (Percentage)

เริ่มจากการใช้หน่วย point และ pica

เราไม่ควรใช้หน่วย points และ picas ในการกำหนด style ของตัวอักษรสำหรับแสดงผลในหน้าจอบน Browser เนื่องจากค่าของ  1 point มีค่าเท่ากับ 1/72 นิ้ว ส่วน 1 pica มีค่าเท่ากับ 1/6 นิ้ว เหมาะสำหรับการกำหนดขนาดของเอกสารที่ต้องการทำการ print เพราะขนาดของ font จะคงที่ไม่ว่าจะ print ออก A4 หรือออกป้ายโฆษณาขนาดใหญ่

หน่วย pixel

เป็นหน่วยที่ใช้กันเยอะที่สุดทั้งการกำหนดขนาด font หรือ ขนาดของ layout แต่จริงๆแล้วการกำหนดขนาดของ font เป็น pixel คือสิ่งที่ผิดที่สุด เพราะ การกำหนดขนาดเป็น pixel นั้นจะไม่สามารถปรับเพิ่มหรือขยายขนาดได้ โชคดีที่ส่วนใหญ่ผู้ใช้งานไม่ได้ปรับขนาดของ font แต่ใช้การ Zoom ใน Browser แทนดังนั้นการ Zoom จะทำการขยายขนาดของ pixel ขึ้นเลยทำให้ทุกอย่างที่แสดงผลอยู่ใหญ่ขึ้น ดังนั้นการใช้หน่วย pixel จะไม่สามารถนำไปใช้กับการ print ที่ไม่ได้จำกัดอยู่แค่ A4 เพราะตอนแสดงผลบนกระดาษทุกขนาด ไม่ว่าจะเป็น A3 หรือ A4 ก็จะมี font ที่มีขนาดเท่ากันเสมอ

หน่วยem และ ex

หน่วย em อ่านว่า m เป็นขนาดที่ไม่คงที่ หรือ relative ไม่สามารถระบุขนาดที่แน่นอนได้ โดยขนาดของ 1 em มีค่าเท่ากับความสูงของตัวอักษร M(ตัวอักษรใหญ่) ส่วน 1 ex ก็จะมีขนาดเท่ากับขนาดความสูงของตัว x(ตัวอักษรเล็ก)  ขึ้นอยู่กับว่าใน element นั้นมีการกำหนด font เป็นอะไร มีขนาดเท่าไหร่ ข้อดีของการใช้หน่วยนี้คือ ถ้าเราเปลี่ยนขนาดของตัวอักษร(Smallest, Smaller, Medium, Large, Largest) element ที่ทำการระบุขนาดด้วยหน่วย em ก็จะปรับเปลี่ยนตามขนาดของตัวอักษรที่เลือก

แต่ที่เราไม่ค่อยเห็น ex ในการใช้งานเท่าไหร่เนื่องจากการคำนวนความสูงของ x ยังไม่ค่อยแม่นยำเท่าไหร่นัก

หน่วย percentage (%)

การใช้หน่วยเป็น % นี่จะเห็นได้ทั่วไป เป็นลักษณะของการเทียบเป็นสัดส่วน

หวังว่าบทความนี้จะทำให้ท่านรู้ว่าไหนทำงานอย่างไร แล้วเลือกหน่วยให้ตรงกับสิ่งที่ต้องการจริงๆ ตอนต่อไปจะเป็นการกำหนดขนาดของFont ด้วยหน่วยต่างๆ

 

 

 

 

Posted in CSS
Tagged with

การทำ CSS Image Sprite เพื่อทำให้ load หน้า web เร็วขึ้น

การทำ CSS Image Sprite
วันนี้มาพูดถึงเรื่องของ CSS กันบ้างซึ่งเป็นเทคนิคเล็กๆ น้อยๆที่น่าสนใจที่เดียวนั่นคือการทำ CSS Image Sprite เนื่องจากปัญหาในการทำ web ในปัจจุบันคือรูปเยอะมากดังนั้นการ load รูปมาทีละรูปทำให้ต้อง request กลับไปยัง server หลายครั้ง เพราะทุกครั้งที่เจอ tag <img alt=”” /> หรือ url(…) ใน Style Sheet browser จะทำการส่ง request กลับไปยัง server เพื่อขอ content ซึ่งในกรณีนี้คือ image(ยกเว้นว่า load รูปเดิม) ดังนั้นเลยมีคนคิดขึ้นมาว่าทำไมไม่ load รูปภาพมาซะทีเดียวเลย แล้วค่อยเอา CSS มาระบุ พื้นที่ในการแสดงผล หลักการของการทำ Image Sprite ก็มีแค่กำหนด position ในการแสดงผลเท่านั้น
โดยในส่วนแรกจะเป็นการกำหนดขนาดของรูปที่ต้องการแสดง ดังนั้นตอนแสดงผลจะแสดงแค่ 44×46 pixel เท่านั้น ส่วนอื่นจะไม่แสดง

1
2
3
4
5
img
{
width : 46px;
height : 44px;
}

ต่อมาก็เป็นการเลื่อนตำแหน่งของการแสดงผลโดยกำหนดค่า x กับ y ที่สำคัญต้องระวังว่าค่าที่ใส่จะเป็นลบ เพื่อให้รูปนั้นเลื่อนไปทางขวา และอย่าลืมว่าใน CSS คั่น x กับ y ด้วย space

1
2
3
4
5
6
7
8
9
10
11
12
13
14
img
{
width : 46px;
height : 44px;
}
img.home{
background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
img.prev{
background:url(http://www.w3schools.com/css/img_navsprites.gif) -47px 0;
}
img.next{
background:url(http://www.w3schools.com/css/img_navsprites.gif) -90px 0;
}

class prev จะ load รูปเดิมขึ้นมาแสดงผล แต่เลื่อนไปทางขวา 47 pixel class next ก็จะทำแบบนี้เช่นเดียวกัน

ถ้าใช้วิธีการนี้จะลดปัญหาของการ load image ไปได้เยอะ และที่สำคัญเป็นการบังคับให้ให้ css load รูปภาพแทนการใช้ tag <img alt=”” />