How to Reload CSS on-the-Fly Without a Page Refresh?

How to Reload CSS on-the-Fly Without Page Refresh

In the realm of web development, live previewing of CSS changes is highly desirable. This enables developers to make real-time adjustments to their stylesheets and witness the impact without the hassle of reloading the entire page.

For those seeking a solution to this query, a reliable method involves leveraging jQuery, an esteemed JavaScript library. The following code snippet offers a comprehensive approach to reloading external stylesheets dynamically:

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

Upon invoking this function, the jQuery code meticulously iterates through each element with the "stylesheet" relation and appends a distinct query string to the end of its URL. This query string, in the format "?reload={timestamp}", ensures that the browser does not retrieve a cached version of the stylesheet.

By leveraging jQuery's ability to manipulate DOM elements, this technique effectively reloads the external stylesheets without requiring a page refresh. As a result, developers can enjoy a seamless live previewing experience while working on CSS customizations.

The above is the detailed content of How to Reload CSS on-the-Fly Without a Page Refresh?. For more information, please follow other related articles on the PHP Chinese website!