이 규칙은 무엇입니까 list-style-image : url (data : 0); 방법?

특히 규칙의이 부분 (데이터 : 0)이 무엇을하는지 이해하지 못합니다.이 규칙은 무엇입니까 list-style-image : url (data : 0); 방법?

.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); }

출처

2017-04-19 Anonymous

그것은 기본적으로 목록 스타일 이미지를 제거하는 이상한 방법입니다.

당신이 기대하는대로 URL() 데이터 유형,

는, 예를 들어, 당신은 이미지의 URL을 지정할 수 있습니다 :

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

데이터 : URL이 URL 특수한 유형의 대신이다 .PNG 파일과 같은 리소스에 대한 포인터를 제공, 당신은 예를 들어, 인라인 텍스트 형식으로 이미지 내용을 지정할 수 있습니다 이것에

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

주요 장점은 페이지를 렌더링하는 데 필요한 HTTP 요청의 수를 감소입니다 - myStyle.css, myIcon.png를 찾으러가는 대신 브라우저가 r 만 필요합니다. equest myStyle.css 및 이미지 내용이 인라인입니다. 페이지에 이미지, 스크립트 또는 스타일이 너무 많으면로드 시간이 줄어 듭니다. 이는 기본적으로 웹 브라우저가 동시 요청 수를 제한하기 때문입니다. Chrome의 경우 10 개의 동시 연결 수 있습니다. 이것은 브라우저가 처음 10 개의 요청 중 하나가 11 일을 시작하기 전에 끝날 때까지 기다려야 함을 의미합니다.

이에 좀 더 최신의 숫자

는 여기 있습니다 : http://www.browserscope.org/?category=network&v=top

이의 단점은 그 ASCII 인코딩 예를 들어, 이미지를, base64를 사용하면 내용의 크기가 상당히 커질 수 있으므로 파일 크기가 큰 이미지를 사용하는 것이 좋습니다.

질문으로 돌아 가기, url (data : 0)은 무엇입니까? 짐작할 수 있듯이, 아무것도. 유효한 CSS이지만 데이터 값 0에 유용한 정보가 없으므로 아무 것도 렌더링되지 않습니다.

이에 대한 더 쉽게 읽을 수있는 alternatiove은 다음과 같습니다 심지어

.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; 
}

또는를 :

.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; 
}

더 많은 정보를 원하시면 https://www.w3.org/wiki/CSS/Properties/list-style-type를 참조하십시오.

출처

2017-04-20 00:01:24

대단히 감사합니다. 정답입니다. –

이 규칙은 무엇입니까 list-style-image : url (data : 0); 방법?

답변

관련 문제