เราจะเรียกใช้ CSS ได้อย่างไร

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

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

เริ่มต้นกันด้วย 3 วิธีที่ว่าไปเมื่อกี้มันมีอะไรกันบ้างก่อน

1. Inline style
2. Embedded style
3. External style

มาเริ่มกันที่วิธีแรกแบบ Inline กันก่อนนะครับ

Inline Style เป็นการเขียนแบบตรงไปตรงมา ระบุเจาจะงไปที่ตัว HTML Element กันเลยแบบว่า เขียนกันในส่วนของ Element เลยนั้นเอง การเขียนแบบนี้ดีต่อการเจาะจง แบบตัวใดตัวหนึ่ง ที่จะไม่ต้องการแสดงค่านั้นบ่อยๆ หรือมีการบังคับมากกว่าตัวอื่นๆ แต่วิธีแบบนี้จะยากต่อการแก้ไข และจะเป็นยากต่อการ Cahed แบบ File Static แต่ก็เป็นวิธีที่นิยมในการเขียนกับ Email อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<h1 style="color: red; font-size: 12em; margin-top: 15px;">
    Why Inline CSS So Bad !!!!!!
</h1>
<div class="content">
    Inline style not attribute but is so cool!! in under 2000
</div>

กับอีกรูปแบบหนึ่งก็คือแบบ Embedded ซึ่งเป็นการฝัง Code CSS ลงไปบน HTML เลย โดยใส่ไว้ในส่วนของ head วิธีนี้ดูแลแก้ไขง่ายขึ้น เพราะมีการนำ Class, id และ element ต่างๆเข้ามาใช้ แต่ก็ยังไม่สะดวกในใช้ซ้ำ และการทำ Cache อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<head>
  <title>Embedded Style</title>
  <style>
    h1 {
      color: red;
      font-size: 12em;
      margin-top: 15px;
    }
  </style>
</head>

ส่วนแบบที่ 3 จะเป็นแบบ External ที่ง่ายต่อการจัดการและแก้ไขมากกว่า โดย Code จะถูกแยกออกเป็นอีกไฟล์นามสกุล .css ไปเลย แล้วค่อยดึงกลับมาใช้ใน html ด้วยคำสั่ง Link แบบด้านล่างนี้ครับ

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ในปัจจุบันเรานิยมเขียนกันในรูปแบบ External เป็นหลัก แต่ก็ยังมีอีกหลายๆครั้งที่มีการผสมผสานกันระหว่างหลายๆรูปแบบ แต่มันจะมีสิ่งหนึ่งที่เกี่ยวข้องหากเรามีการเขียน Code ในแบบต่างๆมากกว่า 1 ก็คือเรื่องของ Order หรือการให้ความสำคัญของมันครับ

ตามปรกติแล้ว CSS มันจะย่อมาจากคำว่า Cascading Style Sheets ซึ่งคำว่า cascade ก็น่าจะเป็นความหมายแบบเดียวกับการ “เรียงซ้อน” ไปเรื่อยๆโดยให้ลำดับความสำคัญตามลักษณะดังนี้

1. Inline Style มาก่อนเสมอ หมายถึงว่าถ้าคุณมี Code CSS ที่กำหนดค่าในจุดนี้ 3 ที่ มันจะแสดงจากจุดที่เป็น inline ก่อนนั้นเอง

2. External และ Embedded อันนี้จะมาเป็นลำดับ 2 โดยมองจากในส่วนของ Head Element ด้วยนะครับ และให้ความสำคัญจากอันบนสุดก่อนเสมอ อย่างที่เราจะเห็นว่า เวลาเรียกใช้ css จาก library หรือ framework นั้นเราต้องเอาตัวสำคัญขึ้นก่อนเช่น bootstrap ขึ้นก่อนนั้นแหละ

3. Browser Default อันนี้พูดถึงไปเมื่อวันก่อน CSS ของ Browser จะถูกกำหนดมาให้แสดงผลเป็นลำดับสุดท้ายเลย ถ้าใครไม่ได้ Reset ไว้มันก็จะยังคงมีผลอยู่นั้นเอง แต่จะออกมาเป็นลำดับสุดท้าย สิ่งที่เราเขียนไว้จะมีผลมากกกว่า

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

Default Browser Styles กับ เรื่องของ CSS

“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ

“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ

เนื่องจากว่า หลังจากที่เราทำหน้า HTML เสร็จปุ๊บ เอ….เรายังไม่ทันได้ทำอะไรกับ CSS เลย ทำไมอยู่ๆมันถึงมีการแสดงผล

ที่มีบางอย่าง เป๊ะ!!! เรากับถูกกำหนดเอาไว้แบบนั้นละเนี่ย นั้นเป็นเพราะว่า เรากำลังถูก style ของ browser แต่ละตัวกำหนดอยู่นั้นเองครับ

งั้นมันก็เป็นเรื่องของ Software ที่เราเอามา Run ตัว Website ของเราแล้ว ไม่เกี่ยวกับเรา เอ… คิดแบบนี้ก็ไม่ถูกซะทีเดียวนะครับ เนื่องจากว่า บางครั้งการ design ของเราก็อาจจะถูกรบกวนโดยเรื่องของ กฏพื้นฐาน ตรงนี้ก็เป็นไปได้

งั้นเราเริ่มต้นจากการดูก่อนว่า browser เค้ากำหนดอะไรของเราบ้าง จริงๆก็มีไม่เยอะเท่าไหร่นะครับ ผมจะลอง List ให้ดูแล้วกัน จะได้เห็นภาพ

List CSS Default

  • Margin
  • Padding
  • Table
  • Font-size
  • Header ( เช่น H1-H6 กลุ่มนี้)
  • File Input
  • Submit button
  • Hyper Link ( a )

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

เพื่อให้เราสามารถใช้พลังแห่งความเป็น CSS ทำอะไรก็ได้ บน Browser ที่แตกต่างกันนั้นเอง โห…รู้สึกมีพลังบวกยังไงไม่รู้ แต่กระนั้น ก็มีหลายๆคนให้ความเห็นว่า CSS Reset เป็นเรื่องล้าหลัง และโคตรจะไม่จำเป็นเอาซะเลย เพระามีอีกหลากหลายวิธีที่เราจะ สามารถจัดการกับเรื่องนี้อย่างง่ายดาย หรือแถมไม่ต้องให้ราคา ให้คุณค่าความสำคัญกับมันไปซะก็จบ แบบนั้นมีคนคิดเยอะจริง แต่ผมว่ามันขัดกับความจริงไปซะหน่อย

งั้นผมว่า ผมพาไปดูวิธีง่ายๆในการจัดการกับเรื่องนี้ก็แล้วกัน นั้นคือ การใช้ code library เล็กๆที่อยู่ในกลุ่ม css reset ซึ่งผมคัดๆมาให้ไว้ใน list รายการด้านล่างนี้แล้วครับ

Marx 
Cleanslate
MiniReset.css
Typeset.css
Normalize.css
Meyerweb Reset CSS
CSS Mini Reset
HTML5 Reset Stylesheet

สำหรับคนที่สนใจเนื้อหา และความรู้พื้นฐานด้าน css อย่าลืมติดตามกันได้ที่นี่นะครับ

พื้นฐาน CSS อยากแน่นๆ มาชวนคุยเรื่องนี้กันดีกว่า

พื้นฐาน เป็นเรื่องสำคัญเสมอ หยิบเรื่อง CSS มาพูดกันบ้าง เดี๋ยวเค้าจะน้อยใจ เอะอะๆอะไรก็พูดถึงแต่คนอื่นอันที่จริงมีเรื่องราวของ CSS เพียบ มากมาย เต็มไปหมดเลยนะครับที่อยากพูด แต่คิดว่าจะลงแค่เรื่องพื้นๆ จะได้คุยกับเพื่อนๆรู้เรื่อง เรื่องที่ advance มากไปผมเองก็ใช่ว่าจะรู้เรื่อง 55555

พื้นฐาน เป็นเรื่องสำคัญเสมอ หยิบเรื่อง CSS มาพูดกันบ้าง เดี๋ยวเค้าจะน้อยใจ เอะอะๆอะไรก็พูดถึงแต่คนอื่นอันที่จริงมีเรื่องราวของ CSS เพียบ มากมาย เต็มไปหมดเลยนะครับที่อยากพูด แต่คิดว่าจะลงแค่เรื่องพื้นๆ จะได้คุยกับเพื่อนๆรู้เรื่อง เรื่องที่ advance มากไปผมเองก็ใช่ว่าจะรู้เรื่อง 55555

ทำไมถึงบอกว่าพื้นฐานของ css นั้นสำคัญ ก็น่าจะเป็นเพราะว่า

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

ไม่ใช่ว่าไม่ดีนะครับ มันดีมากเลย 555 เพียงแต่ยังไงพื้นฐานก็โคตรจะสำคัญอ่ะทีนี้ แล้วเรื่องของ CSS มันมีอะไรที่เราต้องรู้จักบ้างละ ก็ในเมื่อมันง่ายซะขนาดนั้นแล้ว

อืม…อันนี้เริ่มยากแล้ว เพราะถ้ามองในมุมของผม ทุกอย่างก็สำคัญหมดละมีทั้ง Syntax, comment, browser, selector, color, font, border,

margin, padding ต่างๆพวกนี้ หรือจะเป็น form, layout, positionน่าสนใจทั้งนั้นเลยครับ แล้วยังมีเรื่องของ animation เล็กๆกับ css3 อีกด้วย

แล้ว… ถ้าเรารู้จักพื้นฐาน css แล้ว เราจะเอาไปใช้ทำประโยชน์อะไรได้บ้างละถ้าสำหรับคนที่ไม่ใช่ฝั่ง Dev คุณก็สามารถ ปรับแต่งเนื้อหา content ของคุณให้สวยงาม และมีความแตกต่าง ได้อย่างน่าสนใจ

ไม่ว่าจะเป็นการตกแต่ง Email เพื่อส่งไปหาลูกค้าผ่านทาง Email เค้าก็ยังคงใช้ความเป็น css แบบ inline กันอยู่ หรือจะเป็น ปรับแต่ง wordpress site ของคุณก็เห็นมีให้แก้ไขได้เองง่ายๆ จะได้ไม่ต้องไปจ้างนักพัฒนาราคาสูงๆมาทำให้

ส่วนคนที่เป็นฝั่ง Dev ก็แน่นอนว่ายังไงซะ คุณจะได้รู้จักกับโครงสร้าง และเครื่องมือต่างๆ ที่คุณเลือกใช้งานเป็นอยู่ดี ว่าแต่ละ library หรือ framework มันมีการทำงานอย่างไร หรือว่าเราจะปรับแต่งหน้าตาของมัน จะต้องทำอย่างไร

แล้วทุกวันนี้ CSS ก็ยังมีในส่วนของ Media Queries ที่พบว่าเป็นอีกหนึ่งเรื่อง ที่สำคัญมากๆ ในการทำเว็บไซต์ยุคนี้ เพื่อให้รองรับเครื่องมือในยุคปัจจุบัน ที่ใครๆก็ใช้งาน Smart Phone ในการเข้าถึงกันทั้งนั้น การแสดงผลในหน้าเดียว แต่ต้องเหมาะสมกับทุกขนาดจอซะอย่างงั้น

อ่อ!! แล้วในส่วนของ CSS Preprocessors นี่ยิ่งร้ายกาจ มีคนใช้กันเพียบ แถมเครื่องมือที่เราไปหยิบมา ดันใช้งาน SCSS กันซะเยอะ แล้วเราจะปรับยังไง ถ้าเราไม่รู้จักมัน ซึ่งมันไม่ธรรมดานะครับ เพราะว่ามันทำให้จาก CSS เดิมๆให้กลายเป็น การสร้างตัวแปร การสืบทอดพลังจักรวาล การแจกจ่ายพันธุกรรมต่างๆได้ และยังสามารถใช้งาน Loop หรือพวก if / else ได้อีก แน่ะไม่เบาจริงๆ

นั้นไง มาจนถึงเรื่องนี้จนได้ ไอ้ที่ว่าไม่เบาก็เพราะ ถ้าเราเขียนเยอะ ถ้าเราใช้เยอะ CSS นี่ก็เป็นตัวถ่วงน้ำหนักในหน้าเพจได้เหมือนกันนะครับ อืม….พูดมาตั้งเยอะแล้ว เดี๋ยวไว้ post หน้าเรามาเข้าเรื่องกันเลยดีกว่า ถ้าใครสนใจ ฝากติดตามกันด้วยนะครับ

Photo by Jelleke Vanooteghem
https://unsplash.com/photos/chuzevDl4qM

ขอบคุณที่ติดตามกันครับ