가장 좋은 방법의 확인을 위해-모즈-border-radius 지원

StackOverflow https://stackoverflow.com/questions/18077

  •  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;
  };
};
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top