เทคนิคสั่ง Web Browser โหลดไฟล์ CSS ใหม่ทุกครั้งที่เราอัพเดท!!

สวัสดีครับ เนื่องจากช่วงนี้ก็ติดภารกิจอะไรหลาย ๆ อย่างเลยมาอัพช้าสักหน่อยก็ต้องขออภัยด้วยนะครับ วันนี้พอดีไปเจอเทคนิค CSS เจ๋ง ๆ โดยบังเอิญระหว่างการเล่นกับ HTML5 เลยเอามาแบ่งปันกันครับ ก่อนอื่นมาดูกันก่อนว่าบราวเซอร์มีปัญหาอะไร ทำไมถึงต้องใช้ CSS Versioning นะครับ

Web Browser ไม่ยอมรีเฟรชไฟล์ CSS?

โดยปกติแล้วเนี่ย ถ้าเราไม่สั่งให้บราวเซอร์เปิดระบบ No Cache บราวเซอร์จะทำการแคช (เก็บ) ไฟล์ CSS ไว้ (สำหรับ Firefox ผมใช้วิธีลงปลั๊กอินชื่อ Web Developer แล้วไปตั้งค่า ส่วนบราวเซอร์อื่นผมไม่ทราบครับ) ซึ่งพอเว็บบราวเซอร์แคชไฟล์ไว้จะทำให้เกิดปัญหาว่า พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

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

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน <head> ของเราเป็นแบบนี้นะครับ:

<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

<link ... href="css/style.css?v=1001" />

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

แค่นี้ทุกครั้งที่เราอัพเดท CSS คนเข้าก็จะเห็น CSS ใหม่แล้วครับ โดยสิ่งที่เราต้องทำก็แค่แก้เลขเวอร์ชั่นจุดเดียวเท่านั้นเอง

เทคนิคนี้หลายคนอาจทราบกันแล้ว แต่เชื่อว่าส่วนใหญ่น่าจะยังไม่รู้กันครับ ถ้าชอบไม่ชอบยังไงก็มาบอกกันได้ครับผม หรือใครมีเทคนิคอะไรเจ๋ง ๆ ก็แนะนำมาได้เลยครับ ขอบคุณมากครับ

UPDATE วิธีที่ไม่ต้องมานั่งแก้ตัวเลขเวอร์ชั่นเอง

เนื่องจากว่า @dtinth แนะนำเทคนิคดี ๆ มาทางทวิตเตอร์ครับ โดยเป็นการใช้โค้ด PHP ในการตั้งเลขเวอร์ชั่น = วันเวลาที่อัพเดทไฟล์ CSS โดยอัตโนมัติครับ ซึ่งเทคนิคนี้จะใช้ได้เฉพาะกับไฟล์ PHP เท่านั้นนะครับผม โค้ดด้านล่างสามารถก็อปไปแปะใช้ได้เลยครับ

<link ... href="style.css?v=<?php echo filemtime('style.css'); ?>" />

ขอบคุณ @dtinth สำหรับเทคนิคดี ๆ ครับ




About Author

12 Comments

  • แอ๋ม
    Posted March 27, 2011 2:33 am 0Likes

    ปกติผมใส่แค่ current timestamp ครับ (เลียนแบบ no cache ของ jquery)

    style.css?_=

    • แอ๋ม
      Posted March 27, 2011 2:35 am 0Likes

      -*- โค้ดที่หายไปหลังเครื่องใหม่ = เป็นโค้ด php นะครับ

      echo time();

      • Designil
        Posted March 27, 2011 5:32 am 0Likes

        ถ้าแบบนั้นมันจะกลายเป็น no cache ต้องอัพเดทใหม่ทุกครั้งที่ refresh เลยอะสิคร้าบ T__T

        ส่วนตัวคิดว่ามันจะเปลือง bandwidth นะครับ

        • TMMMC
          Posted March 27, 2011 6:09 am 0Likes

          เค้าคงตั้งใจให้ no cache เฉพาะ CSS มั้งครับ

  • ๏Luvi๏`KunG
    Posted March 28, 2011 8:31 pm 0Likes

    สุดยอดดดดดดดดดด

  • ViNCeNT
    Posted April 3, 2011 2:25 am 0Likes

    เจ๋งดีครับ น่าลองเอาไปใช้บ้าง

  • อีฟ นนธิดา
    Posted April 18, 2011 1:52 pm 0Likes

    ไม่เห็นจะสุดยอดเลย น่าเบื่อ

  • Anonymous
    Posted May 11, 2011 5:25 am 0Likes

    บทความมีประโยดมากคับ ขอบใจหลายเด้อ

    • Designil
      Posted May 12, 2011 3:03 pm 0Likes

      ถ้ามีเทคนิคอะไรดี ๆ อีกจะเอามาแบ่งปันเพิ่มนะคร้าบ ^^

  • Vnus_tar
    Posted July 2, 2011 7:34 am 0Likes

    ขอบคุณครับ

    ใช้เทคนิคนี้กับ js ได้รึเปล่าครับ

    • Designil
      Posted July 2, 2011 6:17 pm 0Likes

      เหมือนกันเลยครับผม ^^

  • MismoeL
    Posted February 12, 2012 3:34 am 0Likes

    เพิ่งมีโอกาสได้เข้ามา มีประโยชน์มาก ขอบคุนสำหรับบทความดีๆ ^^

Leave a comment