CSS

CSS

ฝัง Web Font ไปกับไฟล์ CSS - ไม่ได้ตายนะ

โดย Little Bear on 11 มิ.ย. 58 00:00

การฝัง Web Font กับไฟล์ CSS เป็นการลดจำนวน request ให้เหลือแค่ไฟล์เดียว ซึ่งจะช่วยลดเวลา เพิ่มความเร็วในการโหลดเว็บ โดยการ Encode ไฟล์ Font โดยใช้ WebFont Generator เช่น fontsquirrel.com มาช่วยแปลง Font และสร้าง Stylesheet แบบ base64

วิธีการ

  1. แปลง Font ด้วยเว็บ fontsquirrel.com มีทริกสำหรับ Font ภาษาไทยที่จะต้องเลือก Subsetting เป็น  No Subsetting ลองดูวิธีการได้จาก www.tutor4dev.com

  2. นำเอา css ที่ได้มาใส่ในเว็บ

ส่วนใครอยากใช้วิธีการติดตั้ง Font แบบเดิม ก็ลองเข้าไปอ่านบทความได้จาก วิธีใส่ฟ้อนต์ไทยลงในเว็บไซต์ ด้วย CSS3 @font-face แบบ Step by Step

มีแหล่งดาวน์โหลด Fonts ฟรี ๆ หลายที่ ลองแวะเข้าไปดูได้ที่ www.designil.com

ที่มา www.tutor4dev.com , fontsquirrel.com

ประสิทธิภาพของ selectors

โดย Little Bear on 20 ต.ค. 57 11:25

Steve Souders ได้เรียงประสิทธิภาพของ selectors ในแบบต่างๆ เอาไว้ดังนี้

  1. ID – #header
  2. Class – .post
  3. Tag – div
  4. Sibling – h1 + p, h1 ~ p
  5. Child – ul > li
  6. Descendant – ul li
  7. Universal – *
  8. Attribute – [type="text"]
  9. Pseudo-classes, Pseudo-elements – a:hover, p::first-letter

ส่วน เขียน CSS Selectors อย่างไรให้มีประสิทธิภาพ ? นั้น www.siamhtml.com เขียนอธิบายไว้ดีมาก ลองตามไปอ่านดูนะครับ

BEM เขียน CSS ให้อ่านง่าย

โดย Little Bear on 10 ก.ย. 57 19:53

ปกติแล้วเราจะตั้งชื่อ class กันตามใจฉัน หากหน้าเว็บมี element สัก 10 ตัว ก็คงไม่เป็นไร แต่ในความเป็นจริงเรามี element นับเป็นร้อย ๆ ในที่สุด ชื่อ class เราก็มั่วไปหมด แล้วเวลากลับมาแก้ไขภายหลังก็เลยมั่วสุด ๆ

BEM คืออะไร ?

BEM หรือ “Block Element Modifier” คือวิธีการตั้งชื่อ class อย่างเป็นระบบ เพื่อที่จะทำให้เราสามารถไล่โค้ดได้ง่าย และลดความซ้ำซ้อนของโค้ด โดยการตั้งชื่อ c**lass ด้วยวิธี BEM นั้น จะดูจากหน้าที่ของ html element นั้นๆ ซึ่งแบ่งออกเป็น 3 แบบ ด้วยกัน ดังนี้

  • Block กล่องอะไรก็ตามที่อยู่ได้โดยอิสระ (เช่น กล่อง search, กล่อง log in, เมนูหลัก เป็นต้น)

  • Element องค์ประกอบต่างๆ ของ Block (หาก Block เป็นคน Element ก็หมายถึงแขนขาของคนนั่นเอง)

  • Modifier ใส่ให้กับ Block หรือ Element ที่มีสไตล์เฉพาะตัว (Modifier ของ Block ก็เช่น คนที่เป็นผู้หญิง ส่วน Modifier ของ Element ก็เช่น แขนข้างซ้าย เป็นต้น)

วิธีการตั้งชื่อ class ก็ตามด้านล่าง คือ

/* สไตล์สำหรับ Block */
.block { }
<br />
/* สไตล์สำหรับ Element ต่างๆ ภายใน Block */
.block__element { }
<br />
/* สไตล์สำหรับ Block พิเศษ */
.block--modifier { }
<br />
/* สไตล์สำหรับ Element พิเศษ ภายใน Block */
.block__element--modifier { }
<br />
/* สไตล์สำหรับ Element ต่างๆ ภายใน Block พิเศษ */
.block--modifier__element { }

ส่วนรายละเอียดทั้งหมดลองตามไปอ่านกันได้ที่ www.siamhtml.com

30 CSS Selectors ที่คุณต้องจำ

โดย Little Bear on 16 พ.ย. 55 20:23

โลกของ CSS3 หากคุณเข้าใจและจดจำ CSS Selecter ได้อย่างขึ้นใจ ก็จะทำให้ควบคุมหน้าเว็บทั้งงานดีไซน์และลูกเล่นต่าง ๆ ได้อย่างสะดวกง่ายดาย

ทั้ง 30 CSS Selectors คือ

  1. *
  2. #X
  3. .X
  4. X Y
  5. X
  6. X:visited and X:link
  7. X + Y
  8. X > Y
  9. X ~ Y
  10. X[title]
  11. X[href="foo"]
  12. X[href*="nettuts"]
  13. X[href^="http"]
  14. X[href$=".jpg"]
  15. X[data-*="foo"]
  16. X[foo~="bar"]
  17. X:checked
  18. X:after
  19. X:hover
  20. X:not(selector)
  21. X::pseudoElement
  22. X:nth-child(n)
  23. X:nth-last-child(n)
  24. X:nth-of-type(n)
  25. X:nth-last-of-type(n)
  26. X:first-child
  27. X:last-child
  28. X:only-child
  29. X:only-of-type
  30. X:first-of-type

ดูรายละเอียดเพิ่มเติมได้ที่ The 30 CSS Selectors you Must Memorize

Pinterest ทำให้ box มันไหลไปได้เรื่อย ๆ

โดย Little Bear on 13 เม.ย. 55 03:20

ครั้งแรกที่เปิดดูเว็บ Pinterest.com รู้สึกทึ่งกับรูปแบบของกล่องที่ไหลลงไปเรื่อย ๆ

เฮ้ย เจ๋งว่ะ มันทำได้ยังไงวะ!!!!!!!

ก็เก็บความสงสัยไว้นาน มาวันนี้ อยากทำอย่างนั้นบ้าง ก็เลยค้นหาดู

เจอที่นี่ The Famous Pinterest Dynamic Grid Layout and Design Inspirations

และที่ลองเอามาใช้งานคือ Masonry ทำแล้วดูดีขึ้นมาเชียว อาจจะเอาไปใส่ในเว็บของตัวเองบ้าง

ปล. ตอนนี้กำลังเขียน iMed@home ขึ้นมาใหม่ ให้เป็นไปในรูปแบบ crowdsourcing social network ให้ทุกคนมาช่วยกันทำข้อมูลด้านสุขภาพและการดูแลผู้ป่วย ยากหน่อย แต่ก็ท้าทายดี

The Shapes of CSS ทำได้ขนาดนี้เชียว

โดย Little Bear on 13 เม.ย. 55 03:01

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

Square

 #square {
    width: 100px;
    height: 100px;
    background: red;
}

Rectangle




 #rectangle {
width: 200px;
height: 100px;
background: red;

Circle

circle {

width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

/* Cleaner, but slightly less support: use "50%" as value */

Oval




Triangle Up

Triangle Down

Triangle Left

Triangle Right




Triangle Top Left

Triangle Top Right

Triangle Bottom Left

Triangle Bottom Right

Curved Tail Arrow via Ando Razafimandimby

Trapezoid

Parallelogram

Trapezoid

Star (6-points)

Star (5-points) via Kit MacAllister

Pentagon

Hexagon

Octagon

Heart via Nicolas Gallagher

Infinity via Nicolas Gallagher

Diamond Square via Joseph Silber

Diamond Shield via Joseph Silber

Diamond Narrow via Joseph Silber

Cut Diamond via Alexander Futekov

Egg

Pac-Man

Talk Bubble

12 Point Burst via Alan Johnson

8 Point Burst via Alan Johnson

Yin Yang via Alexander Futekov

Badge Ribbon via Catalin Rosu

แบบอื่น ๆ

CSS Compatibility and Internet Explorer problem

โดย Little Bear on 22 ก.ย. 54 21:06

มีปัญหาเยอะมากกับการเขียน CSS3 บน IE แต่ละรุ่น โดยเฉพาะ Selector ที่ไม่สามารถใช้งานได้บน IE ทำให้ไม่กล้าเขียน CSS3

ทางแก้ล่าสุดสำหรับ IE คือใช้ Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 สามารถดาวน์โหลดมาใช้งานได้เลย ซึ่ง "selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest."

อยากรู้ไหมว่า CSS Compatibility and Internet Explorer มันสุดแสนจะแตกต่างกันในแต่ละรุ่นอย่างไร ลองตามไปดูกันนะครับ

และ 30 ซีเลกเตอร์ที่คุณต้องจำ - The 30 CSS Selectors you Must Memorize ลองตามไปอ่านดูก่อน มีเวลาจะมาแปลเก็บไว้อีกที

และที่สุดยอดอีกตัวคือ ตารางเปรียบเทียบ HTML5 และ CSS3 ของเบราเซอร์แต่ละยี่ห้อ-HTML5 & CSS3 Support ซึ่งดูจากตาราง CSS3 Selector แล้วอยากให้ IE6-IE8 ตาย-่าซะโดยเร็ว (แต่สงสัยว่าคงต้องทนอยู่กันมันอีกนานแสนนาน)

เอาแค่นี้ก่อน แล้วค่อยหามาเพิ่ม

การควบคุม table cellspacing ด้วย CSS

โดย Little Bear on 2 ก.ย. 53 17:10

จำไม่เคยได้เลย เวลาจะกำหนดค่า cellspacing ของ table ต้องไปตามหาทุกครั้ง เลยเอามาจดไว้ซะ

table {
border-collapse: collapse;
}
table td {
border: 2px solid red; /* 'cellspacing' */
border-spacing:10px;
}

แต่!!!! ไม่เวิร์คบน IE นะจ๊ะ

CSS Properties Index

โดย Little Bear on 29 มี.ค. 51 11:04

Web 2.0 มีการแยกระหว่างเนื้อหา(XHTML) กับ ดีไซน์(Layout & Design) ออกจากกัน ซึ่งการเขียน CSS Style Sheet จะมีความสำคัญกับการออกแบบเป็นอย่างมาก

CSS Properties Index เป็นที่รวบรวม CSS Property ตั้งแต่รุ่น CSS1 , CSS2 , CSS3 ว่ามี property อะไรบ้าง ค่า default ของแต่ละ property คืออะไร

ก็เลยขอเอามาเก็บไว้เป็นแหล่งอ้างอิงนะครับ

Edit : เพิ่มเติม Full property table จาก W3C

Edit : CSS Selectors

ที่มา meiert.com