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

Thoughful Digital World
il digitale usato seriamentea thoughful use of digital

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:

  • o fermandosi al livello di “puro CSS”, ma in tal caso facendo uso di un codice decisamente “sporco” (un uso improprio del tag <b>);
  • o usando delle immagini (soluzione quantomai sgradevole);
  • o usando javascript (e allora il CSS resta abbastanza pulito, però ci sono degli svantaggi).

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.