-webkit- 및 -moz-와 같은 CSS에서 공급 업체 접두사를 검증하는 방법?
https://stackoverflow.com/questions/1889724
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 WebKit/Mozilla Border Radius 및 Box Shadow CSS 속성을 사용하지만 CSS가 검증하기를 원합니다 (현재는 그렇지 않습니다). 검증 할 수있는 방법이 있습니까?
해결책
아니요, 브라우저 특정 속성이며 표준 CSS 사양에 정의되지 않았습니다.
즉, 그들은 CSS의 공급 업체 별 확장 규칙을 정확하게 따릅니다. W3C 공식 CSS 사양에 있지 않습니다.
다른 팁
공급 업체 확장의 구문은이지만 CSS3 구문 모듈에 언급되었습니다 공급 업체가 표준을 무시한 자체 접두사를 구현할 수 있도록 문법에 도입 된 실제 공급 업체 확장 자체는 공식 CSS 속성으로 인식되지 않습니다. 독점적이며 독점적이며 사용하는 공급 업체에 따라 바뀌지 않을 것입니다.
그러나 최근 향상 (2011 년 초) 로 직소 W3C CSS 유효성 검사기 검증을 줄일 수 있습니다 오류 공급 업체 확장에 의해 트리거됩니다 경고. CSS 수준과 같은이 새로운 옵션을 찾아 더 많은 옵션 부분:
이렇게하면 여전히 유효성이 검증되지 않으면 스타일 시트의 실제 문제를 더 쉽게 찾을 수 있습니다. 공급 업체 확장이 오류를 유발하는 유일한 것인 경우 경고로 전환하면 스타일 시트를 잠정적으로 검증 할 수 있습니다. 또한 유효성 검사기에서 숨겨야 할 별도의 스타일 시트에서 공급 업체 확장을 유지할 필요가 없습니다.
경고는 궁극적으로 공급 업체 접두사가 여전히 비표준이므로 기술적으로 유효하지 않은 CSS이므로 오류에서 부끄러워 할 수 있습니다.
부분적으로 가능합니다. 지원되지 않는 모든 CSS 클래스를 하나의 파일 (CSS3.CSS)으로 수집하십시오.
예시:
CSS3.CSS
.round{
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}
Default.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css3.css">');
</script>
</head>
<body>
<div class="square round"></div>
</body>
</html>
검색 엔진은 클라이언트 스크립트를 실행하지 않으므로 지원되지 않는 속성은 SEO를 손상시키지 않습니다. 녹색 CSS 검증은 아직 미안합니다.
아니요, 표준의 일부가 아니기 때문에 유효성 검사기가 확인합니다. 떠오르는 유일한 해결책은 호환되지 않는 속성을 별도의 스타일 시트에 넣는 것입니다.
Mozilla 및 WebKit 특정 속성은 검증되지 않습니다. 당신이 할 수있는 것은 "풍부한"CSS를 별도의 스타일 시트로 분리하는 것입니다. IE 해킹 스타일을 메인 스타일 시트에서 분리하는 것처럼. 이렇게하면 기본 스타일 시트가 검증됩니다.
내 "Invalid"또는 "Browser-Specific"CSS에 별도의 CSS 파일을 사용하는 경우 약간의 PHP를 사용하여 유효성 검사기에서 CSS를 걸러냅니다.
<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){
echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />';
}
?>
그런 다음 프로파일로 CSS3을 사용하여 유효성 검사기에 링크합니다 (Border-Radius, Text-Shadow 등을 허용) :
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$ _server [ 'http_host']가 작동하지 않지만 아마도 무엇이 될 것인가?
12-12-2011
Kami는 실제로 최고의 솔루션을 게시했습니다. 별도의 css3.js 파일과 document.write ( '')를 만듭니다. CSS는 한 줄씩 :
CSS3.JS
document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');
@boltclock입니다 완전히 바로 이것에 ... W3C는 실제로 추가했습니다. vextwarning 수준 BOOL 검색 조건. 그것은이다 아니다 문서화 ... 그러나 당신이 그들의 사용중인 경우 비누 API 검증 유효성 검사의 페이로드에 매개 변수를 추가 할 수 있습니다. GET 요구....
&vextwarning=true
예를 들어 ... TextMate에서 CSS Validator 명령을 편집하려면 ... "번들 편집 ...", 일명 ⌃+⌥+⌘+비
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='
scope = STDIN.read
…
에게 - 무엇 - 좋아하는 것들
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='
scope = STDIN.read
…
나는 또한 추가했다 level=css3 그리고 warninglevel. API에 따르면 이것들을 변경하십시오. 필요에 따라.
보고 싶다면 모두 "온라인"제출 메커니즘을 통해 사용할 수있는 매개 변수 .... FireBug 또는 WebKit Inspector 등을 열어보세요. 그들의 형태 그리고 확인하십시오 full request content 필요에 따라 더 많은 옵션을 얻으려면 ...
