CODEWITHSUNDEEP
cssicons
user5395907
user5395907

Reputation:

what does this rule list-style-image: url(data:0); means?

Specifically i don't understand what this part (data:0) of the rule does.

.is-touch .sr-sh-theme-card.sr--touched .sr-sh-theme-statistics, .sr-sh-theme-card:hover .sr-sh-theme-statistics { list-style-image: url(data:0); }

Upvotes: 2

Views: 711

Answers (1)

Matt Styles
Matt Styles

Reputation: 611

It is basically an odd way of removing the list-style-image.

The url() data type, as you might expect, allows you to specify a URL for an image, for example:

.myClass {
    list-style-image: url("http://www.example.com/myIcon.png");
}

A data: URL is a special type of URL, where instead of providing a pointer to a resource like a .png file, you can specify image contents inline in text form, e.g.:

.myClass {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==);
}

The main advantage to this is it reduced the number of HTTP requests needed to render the page - instead of going off to find myStyle.css, then myIcon.png, the browser only needs to request myStyle.css and the image content is inline. If you have an awful lot of images, scripts, or styles on your page, this can reduce load time. This is because web browsers by default limit the number of concurrent requests, e.g. for Chrome this may be 10 concurrent connections. This means the browser must wait for one of the first 10 requests to finish before starting the 11th.

Some more up-to-date numbers on this are available here: http://www.browserscope.org/?category=network&v=top

The downside to this is that ASCII-encoding your images, e.g. with base64, can increase their content size considerably, so if you have some large filesize images, it is less adviseable.

Back to your question, what is url(data:0)? As you might guess, nothing. It is valid CSS, however there is no useful information in a data value of 0, so nothing is rendered.

An easier-to-read alternatiove to this would be:

.is-touch .sr-sh-theme-card.sr--touched .sr-sh-theme-statistics, 
.sr-sh-theme-card:hover .sr-sh-theme-statistics {
    list-style-type: none;
}

Or even:

.is-touch .sr-sh-theme-card.sr--touched .sr-sh-theme-statistics, 
.sr-sh-theme-card:hover .sr-sh-theme-statistics {
    list-style-image: none;
}

See https://www.w3.org/wiki/CSS/Properties/list-style-type for more info.

Upvotes: 4

Related Questions