Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand the URL tools in CSS". In daily operation, I believe many people have doubts about how to understand the URL tools in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to understand the URL tools in CSS". Next, please follow the editor to study!

CSS URL rewriter (Rewriter)

The CSS URL rewriter uses a CSS splitter to safely find all CSS URL, which makes all changes completely safe because it does not rely on regular expressions to extract URL from CSS.

Usage

CSS Code copies content to the clipboard

Var URLRewriter = require ("cssurl") .URLRewriter

Var rewriter = new URLRewriter (function (url) {

/ / automatically append a query string with a unique value to bust caches

Return url + "? v =" + Date.now ()

});

Var result = rewriter.rewrite (cssCode)

When the CSSURL rewriter traverses the CSS code, it calls the function passed into the CSSURLRewriter constructor and passes it to each URL it finds. The url variable refers to the URL found in the CSS code excluding any quotation marks and spaces (excluding url ()). After that, you can check the URL, modify it as you like, and return its value where you need it.

Limit

The CSS URL rewriter will only replace the URL represented as a URL tag, that is, it must be in the form of url (foo.css) rather than "foo.css", although the latter is allowed in some CSS.

CSS URL rewrite stream (Rewrite Stream)

The CSS URL rewrite stream uses the URL rewriter inside the stream, so you can easily take the code out or place it.

Usage

CSS Code copies content to the clipboard

Var URLRewriteStream = require ("cssurl") .URLRewriteStream

Fs.createReadStream ("my.css") .pipe (new URLRewriteStream (function (url) {

/ / automatically append a query string with a unique value to bust caches

Return url + "? v =" + Date.now ()

) .pipe (fs.createWriteStream ("my-new.css"))

CSS URL translator (Translator)

The CSS URL translator is a tool that can translate related CSS URL in different CSS files. Sometimes you may want to move a CSS file, say from css/sprites/foo.css to css/sprites.css, and when you do this, any relevant URL in the CSS file is no longer accurate. The CSS URL translator, used in conjunction with the CSS URL rewriter, automatically calculates new paths so that we can easily modify them. The translator is also smart enough not to translate any irrelevant URL.

Usage

CSS Code copies content to the clipboard

Var URLTranslator = require ("cssurl") .URLTranslator

Var translator = new URLTranslator ()

Var result = translator.translate (".. /.. / img/foo.png", "css/sprites/foo.css", "css/sprites.css")

Console.log (result); / / ".. / img/foo.png"

Development

To run the test, clone the following warehouse and execute:

The code is as follows:

$npm I

$npm test

Copyright and license are BSD3

At this point, the study on "how to understand the URL tools in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.