가장 좋은 방법의 확인을 위해-모즈-border-radius 지원
-
09-06-2019 - |
문제
내가 원하는 사람들의 일부는 깔끔한 둥근 모서리에 대한 웹 프로젝트는 나는 현재에 노력하고 있습니다.
나는 생각을 하려고 그것을 달성하 javascript 를 사용하지 않 CSS 한 노력을 계속 요청에 대한 이미지 파일을 최소화(예,내가 알기에는 그것이 가능한 모든 필요한 둥근 모서리가 모양으로의 이미지)그리고 내가 또한을 변경할 수 있도록 배경 색상 꽤 많습니다.
이미 활용 jQuery 그래서 나는 우수한 둥근 모서리 플러그인 고 그것은 마치 마법처럼 작동하는 모든 브라우저에서 보았습니다.는 개발자가 그러나 내가 주목하는 기회를 만들이 좀 더 효율적입니다.스크립트가 이미 포함되어 있는 코드를 검출하는 경우 현재 브라우저가 지원 webkit 둥근 모서리(사파리 기반으로 브라우저).그렇다면 그것을 사용하여 원 CSS 을 만드는 대신 층의 div.
나는 것이라고 생각했다 멋진 경우에는 같은 종류의 체크 수행할 수 있습을 보면 브라우저가 지원하는 도마뱀별 -moz-border-radius-*
특성과 그렇다면 그들을 활용.
확인 webkit 지원이 다음과 같습니다:
var webkitAvailable = false;
try {
webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
}
catch(err) {}
는,그러나,작동하지 않았 -moz-border-radius
그래서 저는 검사에 대한 대안입니다.
내 대체 솔루션은 물론 사용하는 브라우저를 탐지하지만에는 권장 당연히.
내 최고의 솔루션이 아직은 다음과 같습니다.
var mozborderAvailable = false;
try {
var o = jQuery('<div>').css('-moz-border-radius', '1px');
mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
o = null;
} catch(err) {}
그것은 이론을 기반으로 하는 도마뱀"확대"복합-모즈-border-radius 는 네 가지 하위 속성
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
어떤 자바 스크립트/CSS 전문가가 더 나은 솔루션인가?
(의 기능에 대한 요청은 이 페이지에 http://plugins.jquery.com/node/3619)
해결책
는 방법에 대해 이?
var mozborderAvailable = false;
try {
if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
mozborderAvailable = true;
}
} catch(err) {}
나는 그것을 테스트 Firefox3(true)고 거짓:Safari,IE7,그리고 오페라도 있습니다.
(편집:더 정의되지 않은 테스트)
다른 팁
내가 이것을 알고 있는 오래된 질문이지만,그것을 보여줍니다 높은 검색에 대한 테스트 border-radius 도록 지원할 거라고 생각했 던 이 덩어리를 여기에 있습니다.
Rob 글레이즈브루크에는 작은 조각 확장 지원의 개체 jQuery 할 좋은 빠른 체크에 대한 border-radius 지원(도 모즈와 웹 kit).
jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
return (!jQuery.support.borderRadius);
}); });
는 방법이 없는 경우에는 지원할 수 있습니다 다시 사용 jQuery 을 구현하는 2-방법은 슬라이더를 다른 브라우저가 여전히 비슷함을 의미합니다.
왜 사용 -moz-border-radius
고 -webkit-border-radius
에서 스타일 시트?그것은 유효한 CSS 및 던지고는 그렇지 않으면 사용하지 않는 특성을 해칠 것보다 덜 갖는 javascript 마술을 하는 경우 알아내는 그것을 적용해야 합니다.
그런 다음,자바스크립트에 당신은 단지 확인하는 경우에는 브라우저 IE(또는 Opera?) -는 경우에 그것은,그것을 무시할 수 있는 독점 태그 및 자바스크립트가 그것을 할 수 있습니다.
어쩌면 나는 뭔가가 여기...
적용 CSS 무조건적으로 확인 element.style.MozBorderRadius
에서 스크립트를 사용해야 할까요?
으로 당신은 이미 사용하여 사용할 수 있습 jQuery jQuery.브라우저 유틸리티지 브라우저 검 다음 목표 CSS/JavaScript 니다.
이 문제는 파이어 폭스 2 사용하지 않 anti-aliasing 에 대한 테두리입니다.스크립트가 필요한을 감지하 for Firefox3 기 전에는 사용하는 기본 둥근 모서리로 FF3 사용 anti-aliasing.
를 발전시켜 나가고 있습니다 다음 방법이 있는지 여부를 감지하는 브라우저가 지원하는 둥근 테두리나지 않습니다.나는 아직에서 테스트하는 IE(am Linux 기계),그러나 그것은 작품에서 제대로킷과 도마뱀의 브라우저(예:사파리/Chrome 및 Firefox)뿐만 아니라에서는 오페라:
function checkBorders() {
var div = document.createElement('div');
div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
return true;
};
return false;
};
는 경우에 당신을 테스트하고 싶어 for Firefox2 개 또는 3 개가 있는지 확인해야 합 도마뱀의 렌더링 엔진이 실제 브라우저입니다.나는 찾을 수없는 정확한 출시 날짜를 위한 도마뱀 1.9(는 버전을 지원하는 반 별칭된 둥근 모서리)지만,Mozilla wiki 말한 그의 첫 분기에 그래서 2007 년,우리 가정도 확인 할 수 있습니다.
if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )
모든 기능이 결합되어 이:
function checkBorders() {
if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
return true;
} else {
var div = document.createElement('div');
div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
return true;
};
return false;
};
};