[HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know

[HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

[html]
<script src="js/modernizr.min.js"></script>
[/html]

และกำหนดที่ html ให้มี class เป็นแบบนี้

[html]
<html class="no-js">
[/html]

และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

[html]
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
[/html]

จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ

[HTML5] HTML5 Boilerplate

สำหรับ HTML5 Boilerplate นั้นเปิดตัวในวันที่ 10 สิงหาคม ตอนนี้ก็ถูกพัฒนามาปีกว่าแล้ว

[HTML5] HTML5 Boilerplate

เป็น Template สำหรับทำเว็บ HTML5 ที่มันสนับสนุนไปจนถึง IE6 เลย สาเหตุที่ HTML5 Boilerplate สามารถสนับสนุน IE เวอร์ชั่นเก่า ๆ ได้นั้น ก็เพราะว่ามันจะใช้ Chrome Frame ในการเรนเดอร์ HTML5 ทำให้ IE เวอร์ชั่นเก่า ๆ สามารถใช้งาน HTML5 ได้ ลองดูวิดีโอที่เกี่ยวกับ Template ตัวนี้กันนะครับ

Getting Started with HTML5 Boilerplate

The Build Script of HTML5 Boilerplate: An Introduction

HTML5 Boilerplate Walkthrough

Paul Irish on HTML5 Boilerplate

ลองศึกษาดูนะครับ ผมว่าเป็น Template สำหรับ HTML5 ที่เจ๋งมากเลยละครับ ไปดาวน์โหลดมาลองใช้งานดูที่เว็บของ HTML5 Boilerplate เลยครับ

[CSS] คำสั่งทั่วไปที่ใช้จัดการฟอนต์

หลังจากที่ทำความรู้จักกับคำสั่งที่ใช้จัดการข้อความแล้ว เรามาทำความรู้จักกับคำสั่งที่ใช้จัดการกับตัวอักษรกันนะครับ

CSS : font-family

font-family นั้นใช้สำหรับกำหนดฟอนต์ของตัวอักษร ซึ่งตระกูลฟอนต์ที่เหมาะกับการใช้งานสำหรับเว็บไซต์นั้น ให้ดูที่ Web Safe Font Combinations ตัวอย่างในการใช้ font-family นั้นเป็นแบบนี้ครับ

[css]
font-family:&quot;Times New Roman&quot;, Times, serif;
[/css]

font-family : “Times New Roman”, Times, serif

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

font-family : Georgia, serif

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

font-family : Arial, Helvetica, sans-serif

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

font-family : Impact, Charcoal, sans-serif

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

font-family : “Trebuchet MS”, Helvetica, sans-serif

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

font-family : “Lucida Console”, Monaco, monospace

Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

ลองเลือก font-family ที่ถูกใจแล้วนำไปใช้ดูนะครับ

CSS : font-size

font-size เป็นการกำหนดขนาดของตัวอักษร

[css]
font-size: 15px;
[/css]

อย่างเช่น

ตัวอย่างข้อความ font-size:10px

ตัวอย่างข้อความ font-size:20px

ตัวอย่างข้อความ font-size:30px

ตัวอย่างข้อความ font-size:1em

ตัวอย่างข้อความ font-size:2em

ตัวอย่างข้อความ font-size:100%

ตัวอย่างข้อความ font-size:150%

CSS : font-style

font-style กำหนดลักษณะของตัวอักษร จะเป็นตัวธรรมดา หรือว่าตัวเอียง

  • normal : ตัวธรรมดา
  • italic : ตัวเอียง

ตัวอย่างข้อความ font-style:normal

ตัวอย่างข้อความ font-style:italic

CSS : font-variant

font-variant ทำให้ตัวอักษรที่เป็นตัวพิมพ์เล็ก กลายเป็นตัวพิมพ์ใหญ่ที่มีขนาดเล็ก

[css]
font-variant : small-caps;
[/css]

ตัวอย่างนะครับ

Font-variant:normal

Font-variant:small-caps

CSS : font-weight

font-weight เป็นคำสั่งที่กำหนดความหนาของตัวอักษร ส่วนมากจะใช้อยู่แค่ normal และ bold

[css]
font-weight:bold;
[/css]

ดูตัวอย่างนะครับ

ตัวอย่างข้อความ font-weight:normal

ตัวอย่างข้อความ font-weight:bold

[CSS] คำสั่งทั่วไปที่ใช้จัดการกับข้อความ

ข้อความต่าง ๆ ที่ปรากฎในหน้าเว็บของเรานั้น เราสามารถใช้ CSS กำหนดอะไรได้บ้าง ลองไปดูกันนะครับ

CSS : color

อย่างแรกคงเป็นสีของข้อความ โดยคำสั่งที่ใช้ก็คือ color โดยเราสามารถกำหนดค่าสีได้ 3 แบบหลัก ๆ ก็คือ

  • ใช้ค่า HEX เช่น #ff0000
  • ใช้ค่า RGB เช่น rgb(255,0,0)
  • ใช้ชื่อสี เช่น red โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ

ตัวอย่างการใช้งานก็เช่น

[html]
<p style=”color: #ff0000;”>ทดสอบการใช้ color</p>
<p style=”color: #7d007d;”>ทดสอบการใช้ color</p>
<p style=”color: hotpink;”>ทดสอบการใช้ color</p>
[/html]

ผลลัพธ์ที่ได้จะเป็นลักษณะแบบนี้ครับ

ทดสอบการใช้ color

ทดสอบการใช้ color

ทดสอบการใช้ color

จะถนัดใช้แบบไหนก็เลือกเอาเลยครับ ต่อมาเราจะกำหนดการจัดข้อความ

CSS : text-align

ในการจัดข้อความนั้น เราสามารถจัดข้อความได้ 4 แบบดังนี้

  • left : การจัดข้อความให้ชิดด้านซ้าย ซึ่งค่านี้จะเป็นค่าพื้นฐานของการจัดข้อความ
  • right : การจัดข้อความให้ชิดด้านขวา
  • center : การจัดข้อความให้อยู่ตรงกลาง
  • justify : การจัดข้อความให้ชิดทั้งสองด้าน

ลองมาดูตัวอย่างกันนะครับ

text-align:left

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:right

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:center

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:justify

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

CSS : text-decoration

text-decoration นั้นสำหรับเพิ่มลูกเล่นนิดหน่อยให้กับข้อความ โดยจะมีค่าดังนี้

  • none : ก็ตามชื่อเลยครับ ไม่ทำอะไรกับข้อความ
  • underline : ขีดเส้นใต้ข้อความ
  • overline : ขีดเส้นเหนือข้อความ
  • line-through : ขีดเส้นทับข้อความ
  • blink : ข้อความกระพริบ

ซึ่งส่วนใหญ่เราจะใช้ text-decoration กับตัว tag a เพื่อให้ตัวลิงก์ของเราไม่ขีดเส้นใต้ครับ

ตัวอย่างในแต่ละแบบนะครับ

text-decoration:none

text-decoration:underline

text-decoration:overline

text-decoration:line-through

text-decoration:blink

CSS : text-transform

สำหรับ text-transform นั้น จะทำให้ข้อความเรานั้นเป็นตัวพิมพ์เล็กหมด ตัวพิมพ์ใหญ่หมด หรือเฉพาะตัวแรกเป็นตัวพิมพ์ใหญ่เท่านั้น

  • none : ก็ตามชื่อเลยครับ ไม่ทำอะไรกับข้อความ
  • capitalize : เปลี่ยนตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
  • uppercase : เปลี่ยนข้อความให้เป็นตัวพิมพ์ใหญ่
  • lowercase : เปลี่ยนข้อความให้เป็นตัวพิมพ์เล็ก

มาดูตัวอย่างกันนะครับ โดยข้อความตัวอย่างผมจะใช้แบบนี้นะครับ

Example teXt-transForm

ลองมาดู text-transform ในแต่ละแบบกัน

text-transform:none

Example teXt-transForm

text-transform:capitalize

Example teXt-transForm

text-transform:uppercase

Example teXt-transForm

text-transform:lowercase

Example teXt-transForm

CSS : text-indent

เหมือนเป็นการย่อหน้าให้บทความ โดยเราสามารถใส่ค่าให้ได้ 2 แบบคือ

  • เป็น % อย่างเช่น text-indent:25%; เป็นต้น
  • เป็นค่าตัวเลข อย่างเช่น text-indent:10px; เป็นต้น

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

text-indent:0;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:20px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:50px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:20%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:50%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:-50px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:-10%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

 

CSS : line-height

line-height คือระยะห่างระหว่างแนวตั้ง สำหรับ line-height เราสามารถกำหนดค่าได้

  • เป็นจำนวน เช่น 1.2, 1.5, 3.4 เป็นต้น โดยจะนำค่านี้ไปคูณกับขนาดของตัวอักษร เพื่อให้ได้มาเป็น line-height อย่างเช่น ข้อความมีขนาด 14px แล้วเรากำหนด line-height:1.5 แสดงว่า line-height มีค่าเท่ากับ 14 คูณ 1.5 เท่ากับ 21px
  • เป็นค่าตัวเลขพร้อมหน่วย เช่น 14px, 1.5em เป็นต้น
  • เป็น % เช่น 90%, 120%, 150% โดยจะนำ % ไปคูณกับขนาดของตัวอักษรเหมือนกับการกำหนดค่าเป็นจำนวน

มาดูตัวอย่างกันนะครับ

line-height : normal

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 1

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 1.5

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 3

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 0px

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 14px

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 28px

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 42px

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 50%

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 100%

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 150%

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.

line-height : 200%

Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.