รู้จักกับ Content Property ใน CSS
สวัสดีค่ะ วันนี้ว่าด้วยเรื่องการใช้ content ใน CSS คิดว่าหลายๆ คนคงรู้จักกันกันแล้ว แต่ก็คงยังงงๆ ว่าจะใช้มันตอนไหนอะไรยังไงดี เรามาไขความกระจ่างกันดีกว่าว่า เจ้า content มันมีประโยชน์อะไร และจะใช้มันได้อย่างไรบ้าง
รู้จัก CONTENT แบบรวดเร็ว
content มีไว้แทรกข้อความ หรือสัญลักษณ์ต่างๆ เอาไว้ ด้านหน้า หรือ ด้านหลังกล่องที่เราสั่งมัน ดังนั้นเจ้า content นี้ มันจะทำงานเมื่อใช้คู่กับ :before หรือ :after เสมอ(ถ้าสั่งเดี่ยวๆ เลยจะไม่ทำงานนะ) วิธีใช้ก็ง่ายๆ ตามตัวอย่างข้างล่าง
a:before { content : '{';}
a:after { content : '}';}
ถ้าเราสั่งแบบข้างบนนี้ เมื่อเราใช้ tag <a> สร้างลิ้ง ลิ้งของเราจะมีวงเล็บปีกกาเปิด และ ปิดมาให้เราด้วย โดยที่เราไม่ต้องใส่ใน HTML เอง
ตรงนี้คงเริ่มจะเห็นว่า มันมีประโยชน์อะไรแล้ว หลักๆ ที่น่าจะได้ใช้บ่อยๆ คือ การใส่ double quote หรือ “” ให้กับข้อความอ้างอิงต่างๆ ในบทความ โดยที่เราไม่ได้มานั่งใส่เอง เพราะปกติเรามักใส่ <blockquote></blockquote> ครอบบทความกันอยู่แล้ว
NOTE: คำสั่งนี้จะใช้งานได้ใน IE8+ นะ ดังนั้น IE6, IE7 จะไม่แสดงผลให้นะจ๊ะ
เราใส่อะไรให้กับ CONTENT ได้บ้าง
ไม่ใช่เพียงแค่ ข้อความเป็น TEXT เท่านั้นที่เราสามารถแทรกด้วย content ได้ แต่เรายังสามารถใส่พวก attribute หรือ สัญลักษณ์ต่างๆ ได้อีกด้วย มาดูกันดีกว่าว่าแต่ละแบบใช้กันยังไง
- ใส่ string หรือ การใส่ข้อความต่างๆ ตามที่บอกไปข้างบนนั่นเอง
- ใส่ URI หรือ การใส่ url(…) เข้าไปนั่นเอง อันนี้เอาไว้แทรก icons หรือรูปภาพเข้าไปได้ เพียงแค่ใส่ path ของ file ใน url([PATH])
- ใส่ attribute ของ กล่องที่เราสั่งมัน ตัวอย่างเช่น
a:after {content: ' ( ' attr(href) ' )';}โดยเราสร้างลิ้งตามโค้ดนี้
<a href="http://nicha.in.th">Nicha's Blog</a>มันจะแสดงผลโดยการดึงค่าใน
hrefมาใส่ โดยจะแสดงผลตามด้านล่างนี้
- สำหรับการใส่ Quote ข้อความ เราสามารถสั่งเป็นข้อความ แทนการใส่สัญลักษณ์ได้เลย เช่น
p:before { content : open-quote;}>> จะเพิ่ม ” เข้าไปข้างหน้าสำหรับ quote ชั้นนอกสุด
p: after { content : close-quote; }>> จะเพิ่ม ” เข้าไปข้างหลังสำหรับ quote ชั้นนอกสุดตามหลักการใช้งานแล้ว เราควรใช้
open-quoteและclose-quoteคู่กันเสมอ
นอกจากนี้ยังมี no-open-quote และ no-close-quote ด้วย สำหรับการจงใจไม่ใส่ quote ให้มัน แต่มันจะยังนับ hierarchy ให้ คือ ถ้า มี quote ซ้อน quote กันอยู่ แล้ว quote นอกสุดเราใส่เป็น no-open-quote ไว้ มันจะนับ quote อันนอกเป็นชั้นที่ 1 ให้ และ quote ชั้นในเป็นชั้นที่ 2 แต่ถ้าเราไม่ใส่ไว้ quote ชั้นใน ก็จะถือว่าเป็น quote ชั้นที่ 1 นั่นเอง (งงมั้ย?)
- เราสามารถใส่ counter ได้ด้วย ตรงนี้มันเหมือนกับการที่เราใช้ order-list หรือ <ol> ในการสร้าง list นั่นเอง ซึ่งประโยชน์ของมันก็คือ เอาไว้นับหัวข้อต่างๆ เช่นเราเขียนหนังสือหลายๆ chapter ก็สามารถเอาไปนับหัว chapter ได้ โดยที่ไม่ต้องใส่เอง เป็นต้น โดยมีวิธีใช้เบื้องต้นคือ
counter-increment : [VARIABLE];>> Variable คือตัวแปรเอาไว้นับค่า
ตัวอย่าง
p { conter-increment: indexName; }>> สั่งให้นับทุกๆ <p> ไว้ใน indexName
p:before { content: indexName; }>> สั่งแสดงตัวเลขที่นับ หน้า <p>
ตัว Counter นี้มีรายละเอียดอีกเยอะ ซึ่งคงต้องอธิบายกันนาน แต่คร่าวๆ พื้นฐานของมันจะมีแค่นี้ค่ะ ใครอยากรู้ไปอ่านต่อเอาเองในนี้นะ >> Counters and counter properties
การใส่สัญลักษณ์ต่างๆ ให้กับ CONTENT
โดยปกติเวลาเราจะใส่พวกสัญลักษณ์ต่างๆ ใน HTML เราจะใส่เป็นชื่อประหลาดๆ ที่มี & นำอยู่ข้างหน้า เช่น สัญลักษณ์ © หรือ Copy Right เราจะใส่เป็นโค้ด © เพื่อให้มันแสดงผลเป็นสัญลักษณ์ Copy Right เราเรียกโค้ดที่มาใส่ใน HTML ว่า Entity Name
สำหรับ CSS มันก็มีโค้ดแบบนี้เหมือนกัน แต่เราจะใส่เป็น HEX แทน ซึ่งเราสามารถทราบโค้ด HEX ได้ง่ายๆ โดยการเทียบเอาว่า สัญลักษณ์นี้ มีค่า HEX เท่าไหร่
เราเอาสัญลักษณ์สำคัญๆ มารวมไว้ให้แล้วในตารางข้างล่าง จะได้ใช้กันได้สะดวกๆ ดูเต็มๆที่ >> http://www.w3schools.com/tags/ref_entities.asp
| Character | Decimal Number | Hex Number | Entity Name | Description |
|---|---|---|---|---|
|   | \00A0 | | non-breaking space | |
| “ | " | \0022 | " | quotation mark |
| ‘ | ' | \0027 | ' | apostrophe |
| & | & | \0026 | & | ampersand |
| < | < | \003C | < | less-than |
| > | > | \003E | > | greater-than |
| ¦ | ¦ | \00A6 | ¦ | broken vertical bar |
| © | © | \00A9 | © | copyright |
| « | « | \00AB | « | angle quotation mark (left) |
| » | » | \00BB | » | angle quotation mark (right) |
| ® | ® | \00AE | ® | registered trademark |
| ° | ° | \00B0 | ° | degree |
| ¶ | ¶ | \00B6 | ¶ | paragraph |
| · | · | \00B7 | · | middle dot |
| º | º | \00BA | º | masculine ordinal indicator |
| ¹ | ¹ | \00B9 | ¹ | superscript 1 |
| ² | ² | \00B2 | ² | superscript 2 |
| ³ | ³ | \00B3 | ³ | superscript 3 |
| ¼ | ¼ | \00BC | ¼ | fraction 1/4 |
| ½ | ½ | \00BD | ½ | fraction 1/2 |
| ¾ | ¾ | \00BE | ¾ | fraction 3/4 |
| × | × | \00D7 | × | multiplication |
| ÷ | ÷ | \00F7 | ÷ | division |
Note: Entity names ทั้งหมดเป็น case sensitive นะ
สำหรับสัญลักษณ์อื่นๆ นอกเหนือจากนี้ เราสามารถทราบค่า Hex ของมันได้ ด้วยการเอา เลข Decimal Number ไปใส่ในเว็บนี้ ซึ่งเค้าทำตัว convert มาให้เรียบร้อยแล้ว สะดวกมากๆ >> http://www.evotech.net/articles/testjsentities.html
ตัวอย่างการใส่สัญลักษณ์ใน content
สมมติว่าเราจะใส่สัญลักษณ์ copy right ลงไปในหน้า class=”copy” เราใส่ได้เป็น
.copy:before { content: '\00A9';}>> เอา Hex number มาใส่ใน quote
วันนี้มากันแบบชิวๆ กับเรื่องง่ายๆ ที่ถึงเวลาต้องใช้มันก็ต้องรู้ แต่ไม่ค่อยได้ใช้ ตอนแรกตั้งใจว่า จะเขียนรวมแค่ตัว character code เอาไว้อ่านเอง เพราะทุกครั้งที่ใช้ก็เสียเวลาหาทุกที แต่ไปๆ มาๆ เลยเขียนเรื่องการใช้ content ซะเลย เป็นเรื่องที่ต้องใช้คู่กันอยู่แล้ว หวังว่าจะมีประโยชน์กับทุกคนนะคะ
Reference