เทคนิคการทำเว็บไซต์ให้เป็นสีเทาทั้งเว็บ โดยการใช้ CSS
หลายๆคนในช่วงนี้คงมีโอกาศได้พบกับปรากฎการณ์เว็บไซต์สีเทาของคนไทยไปกันถ้วนทั่ว ซึ่งคงเป็นปรากฎการณ์ที่ไม่เคยเห็นกันมาก่อนเป็นแน่ในวงการเว็บไซต์ ในฐานะ Developer คงเป็นหน้าที่ที่เราจะหลีกเลี่ยงเสียไม่ได้ ในการทำให้เว็บไซต์ที่เราดูแลอยู่เป็นสีเทา
ในช่วงแรกๆของปรากฎการณ์นี้ การเปลี่ยนสีเว็บให้เป็นสีเทา จะใช้คำสั่งง่ายๆ ดังนี้
โดยการใส่คำสั่ง CSS ลงไปที่ไฟล์ CSS หลักของเว็บไซต์ หรือจะใส่ไว้ที่ส่วน head ของหน้าเว็บไซต์ภายใต้ tag style ก็ได้
ซึ่งเป็นวิธีการอย่างรวดเร็วในการทำให้ทั้งเว็บไซต์ของเรา กลายเป็นสีเทา โดยหลักการคือโค้ดด้านบนจะเป็นการใส่ filter gray scale ให้กับทุกส่วนของเว็บไซต์
เจาะจงลงไปที่บางส่วนของเว็บไซต์ให้เป็นสีเทาก็พอ
เป็นการกำหนดให้บางส่วนของเว็บไซต์เท่านั้น ที่เคยเป็นสีๆ ให้กลายเป็นสีเทา โดยไม่ไปยุ่งกับส่วนที่ต้องใช้สีในการแยกความแตกต่าง ซึ่งแต่ละเว็บไซต์จะไม่เหมือนกันนะครับ ให้พิจารณาจากโค้ดของตัวเองเป็นหลัก (โค้ดตัวอย่างเป็นการทำให้ รูปภาพ ตลอดจนส่วน header footer iframe และ ลิงค์ ซึ่งปกติอาจจะมีสีให้กลายเป็นสีเทา) ส่วน class gray เป็นการกำหนดเพิ่มเข้ามาเอาไว้ไปใส่ให้กับบางส่วนที่เฉพาะเจาะจงให้กลายเป็นสีเทา และ class no-gray ใช้สำหรับกำหนดให้บางส่วนของเว็บไซต์ ที่ถูกกำหนดให้เป็นสีเทา เช่นบางรูปภาพ ไม่เป็นสีเทา
การทำวิธีนี้อาจจะยุ่งยากเพิ่มขึ้น แต่ก็จะทำให้เว็บไซต์ยังคงสามารถทำหน้าที่ของมันได้อยู่ ซึ่งหลังจากที่ผ่านพ้นช่วงต้นๆ ไปแล้ว หากยังต้องการให้เว็บไซต์อยู่ในสภาพสีเทาอยู่ก็ควรปรับปรุงเพิ่มเติมนะครับ ซึ่งก็ยังง่ายกว่าการออกแบบ theme ใหม่ซึ่งจะมีค่าใช้จ่ายที่สูงตามมา
ในกรณีที่ต้องการเลิกใช้โค้ดนี้ก็ทำแค่ลบโค้ดนี้ออกจากไฟล์ CSS หรือที่เขียนไว้ได้เลยครับ
ในช่วงแรกๆของปรากฎการณ์นี้ การเปลี่ยนสีเว็บให้เป็นสีเทา จะใช้คำสั่งง่ายๆ ดังนี้
html {
filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
}โดยการใส่คำสั่ง CSS ลงไปที่ไฟล์ CSS หลักของเว็บไซต์ หรือจะใส่ไว้ที่ส่วน head ของหน้าเว็บไซต์ภายใต้ tag style ก็ได้
<head>
......
<style>
html {
filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
}
</style>
</head>
.....ซึ่งเป็นวิธีการอย่างรวดเร็วในการทำให้ทั้งเว็บไซต์ของเรา กลายเป็นสีเทา โดยหลักการคือโค้ดด้านบนจะเป็นการใส่ filter gray scale ให้กับทุกส่วนของเว็บไซต์
หมายเหตุ คำสั่งด้านบนอาจไม่รองรับในทุกบราวเซอร์ เช่น IE10 ซึ่งไม่รองรับคำสั่งในกลุ่ม filter
หลังจากผ่านไป 3 ถึง 4 วัน เสียงบ่นจากอาการดูเว็บไม่รู้เรื่อง รวมถึงอาการปวดตา (เหมือนตาจะบอดสี) เพราะอาการมองเห็นเว็บไซต์เป็นสีเทาไปหมด ก็เริ่มดังขึ้น (รวมถึงผมด้วย) ซึ่งได้ข้อสรุปว่า
การที่เว็บเป็นสีเทาไปหมดทั้งไซต์ คงไม่ใช่เรื่องดีนัก เนื่องจาก บางส่วนของเว็บไซต์อาจมีการใช้สีในการสื่อสาร เช่น การเน้นข้อความสำคัญด้วยสี การแสดงรูปภาพที่มีสีเป็นองค์ประกอบสำคัญของภาพ เช่น รูปภาพตัวอย่างสี ซึ่งถ้ามันไม่มีสีมันก็ไม่มีประโยชน์แต่อย่างใดนอกจากนี้คำสั่ง filter แบบครอบจักวาล ยังอาจก่อให้เกิดปัญหาอีกหลายประการเช่น
- เว็บไซต์แสดงผลช้าลง เนื่องจากคำสั่ง filter ใช้พลังงานในการประมวลผลของ Browser ค่อนข้างมาก บนเครื่องที่มีทรัพยากรน้อยๆถึงกับค้างไปเลยก็มี โดยเฉพาะกับ IE
- การแสดงผลผิดเพี้ยน เท่าที่เจอคือคำสั่ง z-Index แสดงผลได้ไม่ถูกต้อง
เจาะจงลงไปที่บางส่วนของเว็บไซต์ให้เป็นสีเทาก็พอ
img, header, footer, iframe, .gray {
filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
}
.no-gray {
filter: none;
-o-filter: none;
-moz-filter: none;
-webkit-filter: none;
}
a {
color: #333;
}
a:hover {
color: #000;
}เป็นการกำหนดให้บางส่วนของเว็บไซต์เท่านั้น ที่เคยเป็นสีๆ ให้กลายเป็นสีเทา โดยไม่ไปยุ่งกับส่วนที่ต้องใช้สีในการแยกความแตกต่าง ซึ่งแต่ละเว็บไซต์จะไม่เหมือนกันนะครับ ให้พิจารณาจากโค้ดของตัวเองเป็นหลัก (โค้ดตัวอย่างเป็นการทำให้ รูปภาพ ตลอดจนส่วน header footer iframe และ ลิงค์ ซึ่งปกติอาจจะมีสีให้กลายเป็นสีเทา) ส่วน class gray เป็นการกำหนดเพิ่มเข้ามาเอาไว้ไปใส่ให้กับบางส่วนที่เฉพาะเจาะจงให้กลายเป็นสีเทา และ class no-gray ใช้สำหรับกำหนดให้บางส่วนของเว็บไซต์ ที่ถูกกำหนดให้เป็นสีเทา เช่นบางรูปภาพ ไม่เป็นสีเทา
การทำวิธีนี้อาจจะยุ่งยากเพิ่มขึ้น แต่ก็จะทำให้เว็บไซต์ยังคงสามารถทำหน้าที่ของมันได้อยู่ ซึ่งหลังจากที่ผ่านพ้นช่วงต้นๆ ไปแล้ว หากยังต้องการให้เว็บไซต์อยู่ในสภาพสีเทาอยู่ก็ควรปรับปรุงเพิ่มเติมนะครับ ซึ่งก็ยังง่ายกว่าการออกแบบ theme ใหม่ซึ่งจะมีค่าใช้จ่ายที่สูงตามมา
ในกรณีที่ต้องการเลิกใช้โค้ดนี้ก็ทำแค่ลบโค้ดนี้ออกจากไฟล์ CSS หรือที่เขียนไว้ได้เลยครับ