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

Editor to share with you how to use the URL tool in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

There are many reasons why you need to systematically replace URL in your CSS code: convert it to data URI, point it to a CDN, replace its file name with an automatically generated file name, and so on. This tool helps you parse URL from a given CSS code and allows you to replace it with any value you choose. The replaced CSS code is exactly the same as the source code, except that URL has been replaced according to your choice.

This library contains a number of tools to help you manipulate and change CSS URL.

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:

Copy the code

The code is as follows:

$npm I

$npm test

Copyright and license are BSD3

The above is all the content of this article entitled "how to use URL tools in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.