Errore di Validazione CSS W3C

[sbungy]

Salve,
ho utilizzato queste regole per creare angoli arrotondati:
-moz-border-radius-topleft: 14px
-moz-border-radius-topright: 14px
-webkit-border-bottom-left-radius: 14px
-webkit-border-bottom-right-radius: 14px

e il risultato è perfetto.

L'unico problema è che validando il CSS queste regole vengono segnalate come errore.
"La proprietà -moz-border-radius-topleft non esiste : 14px"

Qualcuno saprebbe fornirmi una spiegazione e una soluzione alternativa per sostituire queste regole "obsolete" con altre ottenendo sempre lo stesso effetto sugli angoli?

[Prill]

Non si tratta di regole obsolete quanto di una prima applicazione, da parte di Safari e Firefox, ancora facendo uso di suffissi proprietari, di una nuova proprietà prevista dai css3 che è il border-radius.
Il css non può essere validato, e il risultato non è perfetto perché con Opera e Explorer i bordi arrotondati non si vedono. Bisognerà aspettare ancora qualche tempo, finché i browser si adegueranno. Nel frattempo si può ricorrere ad una delle varie tecniche messe a punto per avere quest'effetto, ne trovi ben 25 a quest'indirizzo: http://www.devwebpro.com/25-rounded-...ques-with-css/

[sbungy]

Risposta degna di lode!

grazie mille!

[Marcolino's]

C'è di più, anche IE può far vedere i bordi arrotondati ma è decisamente più complicato: nel css

/* IE */
	behavior:url(border-radius.htc);

il file border-radius.htc

--Do not remove this if you are using--
Auther : Remiz Rahnas
Auther URL : http://www.htmlremix.com
Published date : 2008/09/24
<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
function oncontentready(classID) {
  if (!this.className.match(classID)) {
    if (!document.namespaces.v) {
      document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
    }
    this.className = this.className.concat(' ', classID);
    var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
                                    this.currentStyle['moz-border-radius'] ||
                                    this.currentStyle['border-radius']) /
                           Math.min(this.offsetWidth, this.offsetHeight), 1);
    var strokeColor = this.currentStyle.borderColor; var strokeWeight = this.currentStyle.borderWidth; this.style.border = 'none';
    var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.style.background = 'transparent';
    var margin = this.currentStyle.margin; this.style.margin = '0';
    var styleFloat = this.currentStyle.styleFloat; this.style.styleFloat = 'none';
    var clear = this.currentStyle.clear; this.style.clear = 'none';
    var position = this.currentStyle.position; this.style.position = 'static';
    var left = this.currentStyle.left; this.style.left = '0';
    var right = this.currentStyle.right; this.style.right = '0';
    var top = this.currentStyle.top; this.style.top = '0';
    var bottom = this.currentStyle.bottom; this.style.bottom = '0';
    var width = this.currentStyle.width; this.style.width = '100%';
    var height = this.currentStyle.height; this.style.height = '100%';
    this.outerHTML = '<div class="' + classID + '" style="background: transparent; border: none; padding: 0; margin: ' + margin + '; float: ' + styleFloat + '; clear: ' + clear + '; position: ' + position + '; left: ' + left + '; right: ' + right + '; top: ' + top + '; bottom: ' + bottom + '; width: ' + width + '; height: ' + height + ';"><v:roundrect arcsize="' + arcSize + '" strokecolor="' + strokeColor + '" strokeweight="' + strokeWeight + '" style="behavior: url(#default#VML); display: inline-block; width: 99%; height: 99%; antialias: true; padding: ' + strokeWeight + 'px;"><v:fill color="' + fillColor + '" src="' + fillSrc + '" type="tile" style="behavior: url(#default#VML);" />' + this.outerHTML + '</v:roundrect></div>';
  }
}
</script>

Per ora è così e basta, poi un domani si vedrà.

[sbungy]

Ottimo Marcolino's
sai inoltre se la funzionalità da te indicata è supportata anche da IE Mobile su piattaforma Windows Mobile? Perche in caso potrei usarla per entrambi i miei casi, poichè l'effetto riguarda un sito mobile version e ho intenzione di effettuare il riconoscimento del device che tenta l'accesso per associarvi il corretto CSS. Quindi entrambi i metodi verrebbero in mio aiuto.

Grazie per la segnalazione