Blog

CSS : CSS Shorthand เขียน CSS ให้กระชับ
การเขียน CSS แบบ Shorthand นั้น คือ การเขียน CSS ของเราให้กระชับ เป็นระเบียบกว่าเดิม และทำให้ CSS ของเรามีขนาดที่เล็กลง

CSS : ตัวอย่าง CSS Shorthand

หลายครั้งที่ทำ CSS แก้ไข CSS หรือดู Code CSS คนอื่นนั้น จะพบว่าทำไมถึงเขียนไม่เหมือนกัน แต่ได้ผลลัพธ์ที่เหมือนกันนะ อย่างเช่น

[css]
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
[/css]

กับ

[css]
margin:0 10px;
[/css]

ผลลัพธ์ที่ได้เหมือนกัน แต่จะเห็นว่าตัวอย่างด้านล่าง สั้นและดูง่ายกว่าตัวอย่างด้านบน ตัวอย่างด้านล่างนี่ละ คือการเขียน CSS แบบ Shorthand ที่เราจะทำความเข้าใจกันต่อนะครับ

CSS : มาดูว่าแต่ละตัวใน Code CSS เราเรียกอะไรกัน
- ตัวด้านหน้าปีกกา เราเรียกว่า selector ซึ่งเป็นตัวระบุว่า ค่าที่อยู่ในปีกกานั้นจะไปใช้กับใคร
- ตัวก่อนหน้า : นั้นเราเรียกว่า property เอาไว้บอกว่าจะกำหนดค่าของอะไร
- ตัวด้านหลัง : นั้นเราเรียกว่า value ก็เป็นค่าที่เรากำหนดให้ซึ่งจะสัมพันธ์กับ property
อย่างในตัวอย่าง
- selector : #header h2 คือ element h2 ที่ภายใน element ที่มี id=”header”
- property : color คือ กำหนดค่าของสีตัวอักษร (color)
- value : #FF0000 คือ ให้สีตัวอักษร (color) มีค่าเท่ากับ #FF0000 (สีแดง)
CSS : เราจะเขียนแบบ Shorthand ได้ยังไงบ้าง

ในการเขียนแบบ Shorthand นั้น เท่าที่ผมใช้งานและจำได้มีดังนี้ครับ

ลบ selector ที่ไม่จำเป็น

selector ที่ไม่จำเป็นก็ลบออกได้ อย่างเช่น

[css]
div#wrapper
[/css]

shorthand

[css]
#wrapper
[/css]

Background

สำหรับ background นั้น จะมี property แบบนี้

[css]
background-color : red;
background-image: url("logo.png");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
[/css]

shorthand

[css]
background: red url(logo.png) no-repeat center top fixed;

background: color – image – repeat – position – attachment;
[/css]

font

สำหรับ font นั้น จะมี property ที่เกี่ยวข้องดังนี้

[css]
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Roboto, Thonburi, Arial, Tahoma, sans-serif;
[/css]

shorthand

[css]
font: bold italic small-caps 18px/1.5 Helvetica, Thonburi, Arial, Tahoma, sans-serif;

font: font-weight – font-style – font-variant – font-size/line-height – font-family;
[/css]

Margin, Padding

คือสำหรับตัว margin และ padding นั้นการเขียนแบบ shorthand จะมีรูปแบบที่ทำให้เราเขียนได้แบบนี้
- ในกรณีที่ทุกตัวมีค่าไม่เท่ากันเลย หรือค่าด้านซ้ายกับด้านขวาไม่เท่ากัน ก็จะเป็น margin: top right bottom left;
- ในกรณีที่ด้านซ้ายกับด้านขวาเท่ากัน แต่ด้านบนกับด้านล่างไม่เท่ากัน ก็จะเป็น margin: top [right left] bottom;
- ในกรณีที่ด้านซ้ายกับด้านขวาเท่ากัน และด้านบนกับด้านล่างเท่ากัน ก็จะเป็น margin: [top bottom] [right left];
- ในกรณีที่ทุกตัวมีค่าเท่ากัน ก็จะเป็น margin: [top right bottom left];
ปล. ใน [ ] คือใช้ค่าตัวใดก็ได้ เพราะมีค่าเท่ากันอยู่แล้ว

[css]
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
[/css]

shorthand

[css]
margin:0 10px;
[/css]

Border

สำหรับ border นั่น จะมี property แบบนี้

[css]
border-width:1px;
border-style:solid;
border-color:#000;
[/css]

shorthand

[css]
border:1px solid #000;
[/css]

แต่ยังมีในกรณีที่เรามีความกว้างของกรอบในแต่ละด้านไม่เท่ากัน

[css]
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
[/css]

shorthand

[css]
border-width:1px 2px 3px 4px;

border-width:top – right – bottom – left;
[/css]

ซึ่งตัว border-width เราก็สามารถย่อได้เหมือนกับ margin และ padding

Value มีค่าเท่ากับ 0

ในกรณีที่มีค่า value เท่ากับ 0 เราไม่ต้องใส่หน่วยก็ได้ เช่น

[css]
padding:0px 10px 0px 20px;
[/css]

shorthand
[css]
padding:0 10px 0 20px;
[/css]

ย่อค่าสี

ค่าสีที่เราใช้เป็นรหัสกันอย่างเช่น #FFF000, #223344 หรือ #345677 เป็นต้น เราสามารถย่อค่าของสีได้โดยสังเกตว่า ถ้าค่าสีตัวที่ 1 กับตัวที่ 2 และตัวที่ 3 กับตัวที่ 4 และตัวที่ 5 กับตัวที่ 6 มีค่าเท่ากัน อย่างเช่น #223344 เราสามารถย่อได้เป็น #234 หรือ #FFAABB เราสามารถย่อได้เป็น #FAB เป็นต้น

ตัวอย่างที่เราไม่สามารถย่อได้อย่างเช่น #FFF000 เพราะตัวที่ 3 และตัวที่ 4 ไม่เท่ากัน หรือ #345566 เพราะตัวที่ 1 กับตัวที่ 2 ไม่เท่ากันเป็นต้น
October 23, 2011
CSS : ลำดับความสำคัญของ style ใน CSS
ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

HTML : ID กับ Class ต่างกันยังไง

ถ้าตามที่ผมจำมาตลอดนะครับ ID จะใช้ครั้งเดียวใน 1 หน้าเว็บ ส่วน class จะใช้กี่ครั้งก็ได้ การที่ ID ใช้ครั้งเดียวใน 1 หน้าเว็บนั้นจะมีผลตอนที่เราเขียน script ต่าง ๆ (นี่คือที่ผมเข้าใจมาตลอดนะครับ ถูกผิดยังไง comment ด้านล่างบอกผมด้วยนะครับ >_<) ดังนั้นเวลาผมเขียน Code จะวางแผนว่าอะไรที่จะตั้งอะไรเป็น ID และอะไรเป็น class อย่างเช่นตัวอย่างแบบนี้ [html] <div id="header"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> </div> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </div> [/html] ผมเห็นว่าใน 1 หน้าเว็บของเรานั้น จะมี Header, Main และ Footer ที่เดียวแน่ ๆ เลยตั้งให้เป็น ID และข้อความที่เป็นหัวข้อมีหลายที่เลยตั้งให้เป็น class ชื่อ title-text
CSS : ID กับ Class ต่างกันยังไง

คราวนี้มาดูในกรณีที่เราจะเขียน CSS นะครับ สมมติผมจะเขียน CSS ให้กับ HTML ด้านบนนะครับ

[css]

#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}

[/css]

จะเห็นข้อแตกต่างว่า ถ้าเป็น ID แล้วเวลาใช้งาน CSS เราจะเขียนนำด้วยเครื่องหมาย # และถ้าเป็น class เราจะเขียนนำด้วย . ในการใช้งาน ผลลัพธ์ที่ได้จะออกมาเป็นแบบนี้นะครับ

ผลลัพธ์จาก HTML CSS ที่เราเขียนขึ้นมา

CSS : บนล่างก็มีผลนะ

CSS นั้นจะมองความสำคัญของตัวที่เขียนด้านล่าง มากกว่าด้านบน อย่างเช่น

[css]
.title-text {font-size:18px;}

.title-text {font-size:24px;}
[/css]

แบบนี้ผลลัพธ์ที่เราได้คือ class=”title-text” จะมีขนาดตัวอักษร 24px ตามลำดับที่อยู่ด้านล่่าง

CSS : ID class ใช้คิดค่าความสำคัญ

ผมถือดีตั้งชื่อมันเองว่า ค่าความสำคัญ แต่จริง ๆ แล้วมันเรียกว่า Specificity Value โดยมันแบ่งคะแนนเป็นดังนี้
- inline-style มีค่าความสำคัญ 1,0,0,0 ซึ่งมีค่าความสำคัญสูงสุด โดย inline-style ก็คือการใส่ style เข้าไปใน HTML อย่างเช่น
  [html]
  <div id="header" style="background:#000000;">
  [/html]
- ID ค่าความสำคัญนั้นคือ 0,1,0,0
- class ค่าความสำคัญนั้นคือ 0,0,1,0
- element ต่าง ๆ อย่างเช่น h1,h2,div หรือ p ค่าความสำคัญนั้นคือ 0,0,0,1
การรวมค่านั้น ก็จะดูจากจำนวนแต่ละแบบมารวมกัน ซึ่ง 0,1,0,0 นั้นก็มีค่ามากกว่า 0,1,12,0 นะครับ เหมือนต่อให้มีกี่ class ก็แล้วแต่ แต่ถ้ากำหนด ID มาให้ตัวนึง ก็จะยึด style จาก ID ในทันที ลองมาดูการรวมค่านะครับ

[css]
ul#nav li.active a
[/css]

จะมีค่าเท่ากับ 0,1,1,3 โดย 0,1,0,0 มาจาก ID 0,0,1,0 มาจาก class และ 0,0,0,3 มาจาก ul,li และ a ดังนั้นจึงรวมกันมีค่าเท่ากับ 0,1,1,3

[css]
#header #nav .smalltext
[/css]

จะมีค่าเท่ากับ 0,2,1,0 โดย 0,2,0,0 มาจาก ID header และ nav ส่วน 0,0,1,0 นั้นมาจาก class

[html]
<li style="color:#B23D61">
[/html]

จะมีค่าเท่ากับ 1,0,0,0 โดยมาจาก inline-style

CSS : !important

แต่ก็เหมือนการ์ตูนบางเรื่องที่ตอนแรกก็มีบอส แต่ตอนหลังก็มีบอสที่ใหญ่กว่า เหมือนกันที่ inline-style อาจจะสำคัญที่สุด แต่ถ้าเราใส่ !important ลงไป ก็จะปรากฎว่า style ตัวนั้นจะมีความสำคัญที่สุดแทน โดยให้คิดว่ามันมีค่าเป็น 1,0,0,0,0 อย่างเช่น

[html]
<div id="header" style="background:#000;">
<h2 class="title-text">Header</h2>
<p>Hello World in Header</p>
</div>
<div id="main">
<h3 class="title-text">Main</h3>
<p>Hello World in Main</p>
</div>
<div id="footer">
<h4 class="title-text">Footer</h4>
<p>Hello World in Footer</p>
</div>
[/html]

[css]
#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

จาก Code เราจะรู้ทันทีว่าพื้นหลังต้องเป็นสีดำแน่ ๆ เพราะมี inline-style อยู่ที่ ID header

เป็นพื้นหลังสีดำตามค่าความสำคัญ

แต่ถ้าเราใส่ !important ลงไป

[css]
#header {background:#60A2AA !important;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

!important ไม่สนใจใครสำคัญ ชั้นสำคัญสุด
October 22, 2011
ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress
บางครั้งเราก็ไม่ได้อยากจะ Embed Video จาก youtube มา เราต้องการแค่ thumbnail เพื่อให้มัน link ไปที่วิดีโอใน youtube ดังนั้นเราเลยสร้าง shortcode ขึ้นมาเลย เพื่อจะได้ง่ายในการนำไปใช้ด้วย

WordPress : Shortcode สำหรับดึง youtube thumbnail มาใช้งาน

ผมได้อ่านบทความอันนี้ WordPress Display Youtube Video Thumbnail แล้ว แต่ผมก็ยังไม่ถูกใจทั้งหมด เลยนำ Code ของเค้ามาปรับ ๆ อีกหน่อยให้เหมาะกับที่ผมจะนำไปใช้

[php]
function wp_youtube_video_thumbnail($atts) {
extract(shortcode_atts(array(
‘id’ => ”,
‘img’ => ‘0’,
‘align’=>’left’
), $atts));
$align_class=’align’.$align;
return ‘<a href="https://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="https://img.youtube.com/vi/’.$id.’/’.$img.’.jpg" alt="" class="’.$align_class.’" /></a>’;
}
add_shortcode(‘youtube_thumb’, ‘wp_youtube_video_thumbnail’);
[/php]

ผมใส่ shortcode แบบนี้นะครับ [youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”] จะได้ผลลัพธ์ออกมาดังตัวอย่างด้านล่าง

[youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”]

WordPress : รูปแบบของ shortcode

[youtube_thumb id=”XXX” img=”YYY” align=”ZZZ”]

id นำมาจาก id ของวิดีโอจาก youtube ที่เราต้องการ thumbnail

img สำหรับ img นั้น มีให้เราเลือกอยู่ 6 แบบ ดังนี้
- 0 : เป็น thumbnail ขนาด 480×360 pixels (จาก shortcode ที่เราสร้างขึ้น 0 จะเป็นค่ามาตรฐานของ img ในกรณีที่ไม่ได้ใส่ค่าให้ img)
- 1 หรือ 2 หรือ 3 : เป็น thumbnail ขนาด 120×90 pixels ที่มีรูปแตกต่างกัน
- default : เป็น thumbnail ขนาด 120×90 pixels รูปเดียวกับ 0
- hqdefault : เป็น thumbnail ขนาด 480×360 pixels รูปเดียวกับ 0
align นั้นมีให้เลือก 4 แบบ ดังนี้
- left (จาก shortcode ที่เราสร้างขึ้น left จะเป็นค่ามาตรฐานของ align ในกรณีที่ไม่ได้ใส่ค่าให้ align)
- right
- center
- none
ว่าแล้วก็ฉลองด้วย MV ตัวใหม่แบบไม่เป็น thumbnail เลยแล้วกันครับ >_< https://www.youtube.com/watch?v=6pA_Tou-DPI
October 18, 2011
วิธีใช้ WordPress ตอนที่ 8 – วิธีใช้ Media Library
Media Library นั้นใช้บอกรายละเอียด และจัดการกับรูป เอกสาร ไฟล์เสียง ไฟล์วิดีโอที่เราได้เคยทำการอัพโหลดไว้ รวมถึงยังสามารถอัพโหลดเพิ่มเติมเข้าไปได้อีกด้วย โดยสามารถเข้าไปยัง Media Library ได้จากหัวข้อ Media

เลือกที่หัวข้อ Media เพื่อเข้า Media Library

Media Library : หน้าตาของ Media Library

Media Library นั้นก็มีหน้าตาคล้าย ๆ กับหน้าจัดการ Post Page เพียงแต่เป็นหน้าจัดการรูป เอกสาร ไฟล์เสียง ไฟล์วิดีโอ โดยจะมีการบอกรายละเอียดต่าง ๆ ของไฟล์ที่เราเคยอัพโหลดไว้แล้ว

หน้า Media Library
- File – บอกชื่อของไฟล์และนามสกุล
- Author – บอกชื่อของคนที่อัพโหลดไฟล์นี้
- Attached to – หากไฟล์นี้ถูกใช้งาน จะบอกว่าไฟล์นี้ถูกใช้งานที่ตำแหน่งไหน
- Date – วันที่อัพโหลดไฟล์นี้
Media Library : ชนิดไฟล์ที่เราสามารถอัพโหลดเพื่อใช้งานใน WordPress

สำหรับไฟล์ที่สามารถอัพโหลดเพื่อใช้งานได้นั้น แบ่งออกเป็น 4 ประเภท

รูปภาพ
- .jpg
- .jpeg
- .png
- .gif
เอกสาร
- .pdf
- .doc , .docx
- .ppt, .pptx, .pps, .ppsx
- .xls, .xlsx
- .odt
เสียง
- .mp3
- .m4a
- .ogg
- .wav
วิดีโอ
- .mp4, .m4v
- .mov
- .wmv
- .avi
- .mpg
- .ogv
- .3gp
- .3g2
Media Library : ทดสอบอัพโหลดไฟล์เพิ่ม

คราวนี้เรามาลองอัพโหลดไฟล์ขึ้นไปนะครับ ตอนนี้ผมมีไฟล์ test.pdf ให้เรากดที่ Add New เลยครับ เราจะเข้าสู่หน้าอัพโหลดไฟล์ครับ

หน้าอัพโหลดไฟล์

กดเลือก Select Files แล้วเลือกไฟล์ที่เราต้องการอัพโหลด ในกรณีนี้ผมจะอัพโหลดไฟล์ test.pdf นะครับ เมื่ออัพโหลดเสร็จเราก็กรอกข้อมูลที่เกี่ยวข้องแล้วกด Save all changes เลยครับ

หลังจากอัพโหลดเสร็จแล้ว กรอกข้อมูลเกี่ยวกับไฟล์ให้เรียบร้อย

ไฟล์ที่อัพโหลดไว้จะมาปรากฎที่หน้า Media Library โดยสังเกตที่ Attached to จะเป็นคำว่า (Unattached) นั้นคือ ไฟล์นี้ยังไม่ได้ถูกใช้งานแต่อัพโหลดไว้แล้ว

สังเกตว่าตรง Attached to จะเป็นคำว่า (Unattached)

Media Library : แก้ไขรูปภาพ

รูปภาพที่เราเคยทำการอัพโหลดและใช้งานไปแล้ว เกิดอยากแก้ไขมันขึ้นมาก็ให้เลือกที่ไฟล์รูปที่ต้องการแก้ไขเลยครับ เมื่อคลิ๊กแล้ว จะพบหน้ารายละเอียดของไฟล์ให้เลือกที่ Edit Image

คลิ๊กที่ Edit Image เพื่อแก้ไขรูปภาพ

เราจะสามารถแก้ไขภาพแบบเบื้องต้นได้

หน้าจัดการแก้ไขรูปภาพ

โดยเราสามารถหมุนภาพ หรือกลับด้านของภาพได้

สามารถหมุน และกลับภาพได้ตามที่ต้องการ

หรือลากเม้าส์ที่รูปเพื่อทำการตัดรูปเฉพาะส่วนที่เราต้องการ แล้วกดที่ icon crop ด้านบน

ลากเม้าส์เพื่อเลือกส่วนที่จะตัด

กดที่ Icon ด้านบนเพื่อทำการตัด

ผลลัพธ์ที่ได้ออกมา

ซึ่งเราก็สามารถเลือกได้ว่า รูปที่เราทำเสร็จมาแล้วนั้น จะแก้ไขทุกรูปเลย หรือเฉพาะ thumbnail หรือทุกรูปยกเว้น thumbnail

เลือกว่าจะแก้ไขทุกรูป หรือเฉพาะ thumbnail หรือยกเว้น thumbnail

หลังจากนั้นก็เลือก Save และ Update Media ก็เสร็จเรียบร้อย

ตอนต่อไปครับ วิธีใช้ WordPress ตอนที่ 9 – วิธีติดตั้ง Plugins
October 18, 2011
CSS : ใช้งาน Position กันอย่างไร
ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
```
<div id="wrapper">
  <div id="div-1">div-1</div>
    <div id="div-2">
      <div id="div-a">div-a</div>
      <div id="div-b">div-b</div>
      <div id="div-c">div-c</div>
    </div>
  <div id="div-3">div-3</div>
</div>
```
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
}

#div-c {
  background: #99F;
}
```
ซึ่งจะแสดงผลดังรูป

จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
```
#div-a {
  background: #339;
  position: static;
}
```
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
```
#div-a {
  background: #339;
  position: relative;
}
```
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
```
#div-2 {
  background: #C0C;
  position: relative;
  top: 30px;
  left: -20px
}

#div-a {
  background: #339;
}
```
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
```
#div-2 {
  background: #C0C;
  position: relative;
  bottom: 10px;
  right: 20px;
}
```
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels

Position : absolute

position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
```
#div-2 {
  background: #C0C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
```
#div-2 {
  background: #C0C;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา

ใช้ Position : relative คู่กับ Position : absolute

แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
```
#div-2 {
  background: #C0C;
  position: relative;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
#div-b จะอยู่ด้านบนขวาสุดของ #div-2

Position : fixed

position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น

Absolute
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
  height: 2000px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}

#div-c {
  background: #99F;
}
```
Position : absolute

เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป

#div-b หายไปจากการ scroll ลงมา

Fixed

แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น

#div-b ไม่ขยับไปไหน

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
October 15, 2011
CSS : อะไรคือ CSS Reset
หลายคนอาจจะสงสัยว่า CSS Reset มันมีไว้ทำอะไร มีไว้เพื่ออะไร งั้นเรามาทำความรู้จักกับมันกัน CSS Reset นั้นก็มีไว้สำหรับล้างค่า style ต่าง ๆ ของแต่ละ element ซึ่งก็จะมีคำถามตามมาว่า แล้วเราจะล้างค่ามันทำไม สาเหตุมันก็มาจากว่า แต่ละ Browser ที่เราใช้ ๆ กันอยู่นั้น จะมีค่าเริ่มต้นของแต่ละ element ไม่เหมือนกันครับ ถ้ายังงง ๆ อยู่ มาดูตัวอย่างกันนะครับ

CSS Reset : ความแตกต่างของแต่ละ Browser

ผมเขียนหน้าเพจมาหน้านึงให้มี Code แบบนี้นะครับ

[html]
<div style="background:#FF0;border:2px solid #000;width:500px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
</div>
[/html]

แปลออกมาเป็นภาษาคนหน่อย ก็เราจะได้กล่องที่มีขนาดกว้าง 500 pixels พื้นหลังสีเหลือง และมีกรอบขนาด 2 pixels ในแต่ละด้านเป็นสีดำ ผลลัพธ์ที่ออกมาก็เป็นแบบนี้ครับ

Firefox

Google Chrome

IE 7

IE 8

IE 9

CSS Reset : มาเริ่มต้นการล้างค่า style ของ element

ส่วนใหญ่ 1 ในสิ่งที่แต่ละ Browser มักจะมีค่าไม่เท่ากัน ก็คือ margin กับ padding ดังนั้นเรามาลองมาล้างค่า margin และ padding ของทุกตัวกันครับ

[css]
* {
margin: 0;
padding: 0;
}
[/css]

เราจะได้ผลลัพธ์ของแต่ละ Browser ออกมาเป็นแบบนี้ครับ

การแสดงผลของแต่ละ Browser ที่ออกมาเหมือนกัน หลังจากเราทำการล้างค่าแล้ว (คลิ๊กที่รูปเพื่อขยาย)

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

CSS Reset : มีใครทำไว้ให้เราใช้งานบ้างนะ
ก็ลองเลือกเอาไปใช้งานตามแต่ละคนชอบเลยครับ แต่ผมเชื่อว่า ยังไงเราก็มีต้องปรับ Reset CSS ที่เรานำมาใช้ เพื่อให้เข้ากับการทำงานของเราอยู่ดีครับ แล้วพอทำบ่อย ๆ เราจะมี CSS Reset ของเราเอง

CSS Reset : แนะนำเกี่ยวกับ CSS Reset

แยก CSS Reset ไว้ ไม่นำไปรวมกับ CSS อื่น ๆ

อย่างเช่น เรามี style.css ก็ไม่ควรนำการ reset ค่าต่าง ๆ ไปใส่ style.css ส่วนใหญ่จะตั้งชื่อเป็น reset.css ต่างหากเลย และเรายังสามารถนำ reset.css อันนี้ไปใช้งานกับเว็บอื่น ๆ ของเราได้ด้วย

ควรเรียก CSS Reset ก่อน CSS อื่น ๆ

ยกตัวอย่างเช่น

[html]
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
[/html]

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

อย่านำค่าเฉพาะเว็บมาใส่ใน CSS Reset

ยกตัวอย่างเช่น

[css]
body {
background: #FF00FF;
color: #FFFFFF;
}
[/css]

การกำหนดค่าแบบนี้ น่าจะไปอยู่ใน style.css ของเรามากกว่า เพราะว่าทุกเว็บของเราคงไม่ได้มีพื้นหลังเป็นสีชมพู ตัวอักษรสีขาวกันทุกเว็บใช่มั้ยครับ
October 14, 2011