Die beste manier om die beheer van vir -moz-grens-radius ondersteuning

Question

Ek wou 'n paar van diegene spiffy geronde hoeke vir 'n web-projek wat ek op die oomblik is besig met.

Ek het gedink ek wil probeer om te bereik dit met behulp van JavaScript en nie CSS in 'n poging om die versoeke vir beeld-lêers op 'n minimum te beperk (ja, ek weet dat dit moontlik is om al die nodige afgeronde hoek vorms te kombineer in een beeld) en Ek wou ook in staat wees om die agtergrond kleur pretty much verander op die vlieg.

Ek gebruik reeds jQuery so ek kyk na die uitstekende geronde hoeke plugin en dit het gewerk soos 'n bom in elke leser het ek probeer. Om 'n ontwikkelaar maar ek het opgemerk die geleentheid dit 'n bietjie meer doeltreffend te maak. Die script sluit al-kode vir die opsporing van as die huidige leser WebKit geronde hoeke ondersteun (safari gebaseer blaaiers). As dit so is dit gebruik rou CSS in plaas van die skep van lae divs.

Ek het gedink dat dit ontsagwekkende sou wees as dieselfde soort tjek kan uitgevoer word om te sien of die leser ondersteun die Gecko-spesifieke -moz-border-radius-* eienskappe en indien wel benut hulle.

Die tjek vir WebKit ondersteuning lyk soos volg:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Dit is egter nie gewerk het nie vir -moz-border-radius so ek begin nagaan vir alternatiewe.

My nood oplossing is natuurlik om die leser opsporing gebruik, maar dit is ver van aanbevole praktyk natuurlik.

nog My beste oplossing is soos volg.

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

Dit is gebaseer op die teorie dat Gecko "brei" die saamgestelde -moz-grens-radius om die vier sub-eienskappe

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

Is daar enige javascript / CSS guru daar buite wat 'n beter oplossing het?

(Die funksie versoek om hierdie bladsy is by http://plugins.jquery.com/node/ 3619 )

Answer 1

Hoe gaan dit?

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

Ek het dit getoets in Firefox 3 (ware) en valse in:. Safari, 7, en Opera

(Edit: beter undefined toets)

Answer 2

Ek weet dit is 'n ouer vraag, maar dit toon 'n hoë in soektogte vir die toets van grens-radius ondersteuning so ek het gedink ek wil hierdie klont gooi in hier.

Rob Glazebrook het 'n bietjie uittreksel wat die ondersteuning voorwerp van jQuery strek tot 'n lekker vinnige check vir grens-radius ondersteuning doen (ook Moz en 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);
}); });

Erkenning

Op dié manier, as daar nie ondersteun vir dit wat jy kan terug val en gebruik jQuery om 'n 2-rigting schuifbalk te implementeer sodat ander blaaiers het nog 'n soortgelyke visuele ervaring.

Answer 3

Hoekom nie gebruik -moz-border-radius en -webkit-border-radius in die style? Dit is geldige CSS en gooi 'n andersins ongebruikte kenmerk sou minder as om javascript doen die informatieverzameling van die uitzoeken of dit dit moet aansoek nie seermaak nie.

Toe, in die javascript jy wil net kyk of die leser is Internet Explorer (of Opera?) -. Indien wel, sal dit die eiendom tags ignoreer, en jou JavaScript kon doen dis ding

Miskien is ek hier mis iets ...

Answer 4

Pas CSS onvoorwaardelik en kyk element.style.MozBorderRadius in die script?

Answer 5

As jy reeds met behulp van jQuery kan jy jQuery.browser nut te gebruik doen 'n paar leser snuif en dan teiken jou CSS / JavaScript dienooreenkomstig.

Answer 6

Die probleem met hierdie is dat Firefox 2 nie anti-aliasing nie gebruik vir die grense. Die script nodig sou wees om op te spoor vir Firefox 3 voor is gebruik moedertaal geronde hoeke soos FF3 doen gebruik anti-aliasing.

Answer 7

Ek het die volgende metode ontwikkel vir die opsporing van die vraag of die leser ondersteun afgeronde grense of nie. Ek het nog om dit te toets op IE (ek op 'n Linux masjien), maar dit werk korrek in WebKit en Gecko blaaier (dit wil sê Safari / Chrome en Firefox) sowel as in 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;
};

As jy wil om te toets vir Firefox 2 of 3, moet jy gaan vir die Gecko gegenereerde masjien, nie die werklike leser. Ek kan nie vind die datum presiese release vir Gecko 1.9 (wat is die weergawe wat anti-aliased geronde hoeke ondersteun), maar die Mozilla wiki sê dit is vrygestel in die eerste kwartaal van 2007, so ons sal aanvaar dalk net te wees seker.

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

Alles in ag genome, die gekombineerde funksie is die volgende:

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