12

私が現在取り組んでいる Web プロジェクトには、これらの気の利いた丸みを帯びたコーナーが必要でした。

画像ファイルのリクエストを最小限に抑えるために、CSS ではなく JavaScript を使用してそれを達成しようと考えました (はい、必要なすべての角の丸い形状を 1 つの画像に組み合わせることが可能であることはわかっています)。その場で背景色をかなり変更できるようにします。

私はすでにjQueryを利用しているので、優れた角丸プラグインを調べたところ、試したすべてのブラウザーで魅力的に機能しました。しかし、開発者として、もう少し効率的にする機会があることに気付きました。スクリプトには、現在のブラウザーが Webkit 角丸 (Safari ベースのブラウザー) をサポートしているかどうかを検出するためのコードが既に含まれています。その場合、div のレイヤーを作成する代わりに生の CSS を使用します。

-moz-border-radius-*ブラウザが Gecko 固有のプロパティをサポートしているかどうか、サポートしている場合はそれを利用するために、同じようなチェックが実行できれば素晴らしいと思いました。

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) {}

これは、Gecko が複合 -moz-border-radius を 4 つのサブプロパティに「拡張」するという理論に基づいています。

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

より良い解決策を持っているjavascript/CSSの第一人者はいますか?

(このページの機能リクエストはhttp://plugins.jquery.com/node/3619にあります)

4

7 に答える 7

11

これはどう？

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

Firefox 3（true）でテストし、Safari、IE7、Operaでfalseをテストしました。

（編集：より良い未定義のテスト）

于 2008-08-21T04:20:47.817 に答える
4

スタイルシートで-moz-border-radiusandを使用しないのはなぜですか? -webkit-border-radiusこれは有効な CSS であり、使用されていない属性をスローしても、それを適用するかどうかを判断する作業を JavaScript に任せるよりも害が少なくなります。

次に、javascript で、ブラウザーが IE (または Opera?) であるかどうかを確認します。そうである場合は、独自のタグを無視し、javascript でそれを行うことができます。

多分私はここで何かを見逃しています...

于 2008-08-20T23:34:07.257 に答える
4

これは古い質問であることは知っていますが、国境半径のサポートをテストするための検索で高く表示されるため、このナゲットをここに投入すると思いました.

Rob Glazebrook は、jQuery のサポート オブジェクトを拡張して、border-radius のサポート (moz と web-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 方向スライダーを実装し、他のブラウザーでも同様の視覚体験を得ることができます。

于 2010-08-11T13:37:30.017 に答える
1

これに伴う問題は、Firefox2が境界線にアンチエイリアシングを使用しないことです。FF3はアンチエイリアシングを使用するため、スクリプトはFirefox3を検出する必要があります。

于 2008-10-21T17:40:31.130 に答える
1

無条件に CSS を適用element.style.MozBorderRadiusし、スクリプトをチェックインしますか?

于 2008-08-21T01:46:12.557 に答える
1

すでに jQuery を使用しているため、 jQuery.browserユーティリティを使用してブラウザ スニッフィングを行い、それに応じて CSS / JavaScript をターゲットにすることができます。

于 2008-08-21T09:03:12.770 に答える
1

ブラウザが丸い境界線をサポートしているかどうかを検出する次の方法を開発しました。IE (Linux マシン上) でまだテストしていませんが、Webkit および Gecko ブラウザー (つまり、Safari/Chrome および Firefox) と Opera で正しく動作します。

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

Firefox 2 または 3 をテストする場合は、実際のブラウザーではなく、Gecko レンダリング エンジンを確認する必要があります。Gecko 1.9 (角丸アンチエイリアスをサポートするバージョン) の正確なリリース日はわかりませんが、Mozilla wiki には 2007 年の第 1 四半期にリリースされたと書かれているので、5 月を想定します。もちろん。

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;
  };
};
于 2010-01-03T21:27:16.123 に答える