أفضل طريقة للتحقق من دعم -moz-border-radius

Question

كنت أرغب في الحصول على بعض تلك الزوايا الدائرية الأنيقة لمشروع ويب أعمل عليه حاليًا.

اعتقدت أنني سأحاول إنجاز ذلك باستخدام جافا سكريبت وليس CSS في محاولة لتقليل طلبات ملفات الصور إلى الحد الأدنى (نعم، أعلم أنه من الممكن دمج جميع أشكال الزوايا المستديرة المطلوبة في صورة واحدة) وأردت أيضًا لتتمكن من تغيير لون الخلفية إلى حد كبير بسرعة.

أنا بالفعل أستخدم jQuery لذلك نظرت إلى الأفضل زوايا مدورة البرنامج المساعد وقد نجح الأمر كالسحر في كل متصفح جربته.كوني مطورًا، إلا أنني لاحظت الفرصة لجعله أكثر كفاءة قليلاً.يتضمن البرنامج النصي بالفعل رمزًا لاكتشاف ما إذا كان المتصفح الحالي يدعم الزوايا الدائرية لـ webkit (المتصفحات القائمة على رحلات السفاري).إذا كان الأمر كذلك، فإنه يستخدم CSS خامًا بدلاً من إنشاء طبقات من divs.

اعتقدت أنه سيكون أمرًا رائعًا إذا كان من الممكن إجراء نفس النوع من الفحص لمعرفة ما إذا كان المتصفح يدعم ميزة Gecko الخاصة -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) {}

يعتمد ذلك على النظرية القائلة بأن أبو بريص "يوسع" نصف قطر الحدود المركب إلى الخصائص الفرعية الأربعة

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

هل هناك أي خبير في جافا سكريبت/CSS لديه حل أفضل؟

(طلب الميزة لهذه الصفحة موجود في http://plugins.jquery.com/node/3619)

Answer 1

وماذا عن هذا؟

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

لقد اختبرت ذلك في Firefox 3 (صواب) وخطأ في:سفاري، IE7، وأوبرا.

(يحرر:اختبار أفضل غير محدد)

Answer 2

أعلم أن هذا سؤال قديم، ولكنه يظهر بشكل كبير في عمليات البحث عن اختبار دعم نصف القطر الحدودي، لذا فكرت في طرح هذه الكتلة هنا.

يحتوي Rob Glazebrook على مقتطف صغير يعمل على توسيع كائن دعم jQuery لإجراء فحص سريع لطيف لدعم نصف القطر الحدودي (أيضًا moz ومجموعة الويب).

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 لتنفيذ شريط تمرير ثنائي الاتجاه حتى تظل المتصفحات الأخرى تتمتع بتجربة مرئية مماثلة.

Answer 3

لماذا لا تستخدم -moz-border-radius و -webkit-border-radius في ورقة الأنماط؟إنه CSS صالح وإلقاء سمة غير مستخدمة بطريقة أخرى سيكون أقل ضررًا من جعل جافا سكريبت يقوم بالأعمال القانونية لمعرفة ما إذا كان يجب تطبيقها أم لا.

بعد ذلك، في جافا سكريبت، عليك فقط التحقق مما إذا كان المتصفح هو IE (أو Opera؟) - إذا كان كذلك، فسوف يتجاهل علامات الملكية، ويمكن لجافا سكريبت الخاص بك القيام بذلك.

ربما أفتقد شيئًا ما هنا ...

Answer 4

قم بتطبيق CSS دون قيد أو شرط وتحقق element.style.MozBorderRadius في البرنامج النصي؟

Answer 5

بما أنك تستخدم jQuery بالفعل، يمكنك استخدامه jQuery.browser أداة مساعدة للقيام ببعض عمليات استنشاق المتصفح ثم استهداف CSS / JavaScript وفقًا لذلك.

Answer 6

تكمن المشكلة في ذلك في أن Firefox 2 لا يستخدم خاصية منع التعرج للحدود.سيحتاج البرنامج النصي إلى اكتشاف Firefox 3 قبل أن يستخدم الزوايا الدائرية الأصلية حيث يستخدم FF3 الصقل.

Answer 7

لقد قمت بتطوير الطريقة التالية لاكتشاف ما إذا كان المتصفح يدعم الحدود الدائرية أم لا.لم أختبره بعد على 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، لذلك سنفترض أن شهر مايو هو مجرد بالتأكيد.

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