ก๊วนซอฟท์แวร์ </softganz> SoftGang (Gang Software)

กำลังศึกษาวิธีการจัดการ light/dark mode เพิ่งเริ่ม เดี๋ยวค่อยกลับมาเขียนต่อ

keyword: force for darkmode using prefers-color-scheme: dark

ที่มา

• How to override css prefers-color-scheme setting
• Dark Mode Toggle and prefers-color-scheme

การฝัง 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

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 เขียนอธิบายไว้ดีมาก ลองตามไปอ่านดูนะครับ

ปกติแล้วเราจะตั้งชื่อ 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

โลกของ 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.com รู้สึกทึ่งกับรูปแบบของกล่องที่ไหลลงไปเรื่อย ๆ

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

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

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

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

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

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.

แบบอื่น ๆ

• CSS Triangle
• CSS Quick Tip: CSS Arrows and Shapes Without Markup ที่มา css-tricks.com

มีปัญหาเยอะมากกับการเขียน 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 ตาย-่าซะโดยเร็ว (แต่สงสัยว่าคงต้องทนอยู่กันมันอีกนานแสนนาน)

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

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

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

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

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