Cliccando su questo contenuto andrai sul sito di Amazon, che usa cookies.

MyDigitalia
il digitale usato seriamente

angoli arrotondati

angoli arrotondati

Sono previsti dagli standards CSS3. Finora sono supportati da Firefox (con il codice -moz-border-radius), da Opera (border-radius) e dai webkit-browsers (-webkit-border-radius) ma non da Internet Explorer.

Per essere visualizzato da quest'ultimo occorre utilizzare degli artifici più o meno complicati:

Dopo un po' di prove mi sono convinto che non è una strada da percorrere: meglio usare CSS3 e basta: chi se lo merita, usando un browser decente, come Firefox vedrà i bordi arrotondati, chi non se lo merita si arrangi.

esempi

usando in modo “sporco” il codice CSS

con il seguente style:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

applicato al seguente caso:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>Round FILL!!</div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Si può ottenere quanto segue

arrotondato!

Il codice usato è sporco perché si ripete per ben quattro volte a vuoto un tag, bold, il grassetto che dovrebbe essere usato per enfatizzare porzioni di testo; il tag dovrebbe contenere del testo e invece non contiene nulla: questo va contro l'idea di «web semantico», che dovrebbe ispirare chi realizza siti web.

Meglio dunque tirare per il colletto quelli di Microsoft perché si sbrighino a introdurre nei loro browsers i tag CSS3, tra cui border-radius.

Cliccando su questo contenuto andrai sul sito di Amazon, che usa cookies.