วิธีปรับหน้าเว็บเป็นขาวดำด้วย CSS สำหรับนักพัฒนาเว็บไซต์

ตามที่ทางสำนักพระราชวังได้มีประกาศ เรื่อง พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช เสด็จสวรรคตนั้น อันเป็นเรื่องที่น่าโศกเศร้าสำหรับคนไทย ข้าพระพุทธเจ้าเว็บไซต์ Nutn0n.com ขอน้อมส่งเสด็จสู่สวรรคาลัย และ ประกาศสำนักนายกรัฐมนตรี ได้สั่งการสถานที่ราชการ ลดธงครึ่งเสา 30 วัน รวมถึงขอให้ข้าราชการ พนักงานรัฐวิสาหกิจ ไว้ทุกข์ 1 ปี ตั้งแต่ 14 ตุลาคม 2559 เป็นต้นไป ซึ่งรวมถึงการไว้อาลัยของบุคคลทั่วไปตามความเหมาะสม

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

การปรับเปลี่ยนการแสดงผลรูปเป็นขาวดำ

หากเห็นสมควรว่าเว็บไม่ได้ถูกออกแบบมาให้แสดงผลเป็นขาวดำ ให้ใช้ filter: saturate(40%) แทนได้ เพื่อทำให้ภาพหม่นลงแต่ไม่เป็นขาวดำ

เนื่องจากรูปภาพทั้งหมดแสดงผลภายใต้ tag img ทำให้เราสามารถสั่ง CSS Filter ซึ่งสามารถแสดงผลได้ใน Browser สมัยใหม่ ตามที่ได้ comment บอกไว้ทั้ง Microsoft, WebKit และ Mozilla

ด้วยการใช้คำสั่ง filter: grayscale() จากนั้นระบุค่า argument เป็น 1 ซึ่งหมายความว่าจริง

ตัวอย่างเช่น code ดังกล่าวจะมีผลให้รูปภาพใด ๆ บนหน้าเว็บมีสีเป็นขาวดำ


img {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Chrome, Safari */
  -webkit-filter: grayscale(1);
  /* Firefox */
  filter: grayscale(1);
}

อย่างไรก็ตามการแสดงผลดังกล่าวมีโอกาสเกิด conflict ได้น้อย เนื่องจากการใช้ CSS filter อาจไม่พบเห็นได้บ่อยนัก แต่หากกลัวจะเกิด Filter จริง ๆ อาจใส่ !important เพื่อช่วยได้ เนื่องจากเป็นการปรับเปลียนเพียงชั่วคราว

ถ้าเป็นในกรณีภาพพื้นหลังที่อยู่ใน CSS ภายใต้คำสั่ง background-image ก็จะสามารถใช้ filter: grayscale(1); นี้ได้เช่นกัน แต่อย่าลืมว่า filter นี้ส่งผลต่อ child ทุกตัวของ tag นั้น ดังนั้นวิธีแก้ที่ดีที่สุดคือการสร้าง tag background แยกออกมาจาก tag อื่น ๆ ที่ต้องการแสดงผลเป็นสีตามปกติ และทำการ fix position เอาไว้

แน่นอนว่า filter ดังกล่าวจะส่งผลต่อทุกอย่างทั้งรูปภาพและตัวอักษรรวมถึงสีอื่น ๆ ได้ หากเว็บไซต์มีความซับซ้อนอาจสร้าง CSS class ใหม่ขึ้นมาดังนี้


.black-and-white {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

จากนั้นอาจนำไปใส่กับ tag แต่ละตัวที่ต้องการเปลี่ยน

ข้าพเจ้ามีความหวังอย่างยิ่งว่าชาวไทยทุกคนจะผ่านเวลาอันโศกเศร้านี้ไปด้วยกันและมาร่วมมือกันสร้างประเทศไทยให้มั่นคงตามที่พระบาทสมเด็จพระเจ้าอยู่หัวภูมิพล ได้ทรงตั้งปณิธานไว้

เพิ่มเติม : ไม่แนะนำให้ใช้กับ tag body หรือ tag html เนื่องจากทำให้เว็บอ่านยาก เนื่องจาก gray scale ไม่ใช่การลดจำนวนของสีลง แต่เป็นการดึงทุกเฉดสีให้มาอยู่ในช่วง gray scale จาก 0 - 255 ไม่ได้เป็นการ contrast ขอให้ปรับเปลี่ยนแต่ความพอดีครับ

หรือเราสามารถใช้การปรับ filter: saturate(40%) แทนได้ เพื่อทำให้ภาพหม่นลงแต่ไม่เป็นขาวดำ