gizstyle.com // grafica nell'animo » css

CSS Daily Tip: word-wrap spezzare parole lunghe

giZ — Fri, 25 Jun 2010 09:10:40 +0000

In ambiente di test a volte si inseriscono testi fittizi ance con parole molto lunghe, incontrando a volte errori di visualizzazione con queste parole che escono dai box di contenuto incidendo sulla impaginazione generale; per risolvere questo difetto per precauzione inseriamo la seguente regola per spezzare le parole a livello lettera in modo che vadano a capo:

word-wrap: break-word;

Link WebDesignerWall

CSS Daily Tip: position, overwrite to set default position

giZ — Fri, 18 Jun 2010 13:16:04 +0000

quando incontro certe necessità cerco di condividerle, nel caso di un elemento con “position:” che sia relative o absolute o che…non avendo possibilità di editare o eliminare questa regola, potendola solo sovrascrivere possiamo annullare la posizione resettandola di default con questa regola:

position:static;

Link W3 school…

CSS3 on IE, tecniche

giZ — Tue, 04 May 2010 16:26:47 +0000

Il supporto CSS3 in Internet Explorer è chiedere troppo, di recente ho trovato un articolo interessante su Smashin Magazine, come accenna il titolo sono proposte varie tecniche per ottenere effetti CSS3 come text-shadow, box-shadow, border-radius, gradienti, opacità, trasparenze e background multipli.
L’articolo è notevole e completo, lo trovate qui.

Ora non so se effettivamente tutte le soluzioni proposte siano funzionali o meno, si parla comunque di IE, leggendo l’articolo si nota come queste regole vadano a intervenire su regole proprietarie del motore web di microsoft e fortunatamente tra le versione IE6 7 e 8 si mantengono le stesse.
Per necessità il mio test è stato sul border radius, portare l’effetto angoli tondi sulle div per avere una coerenza visiva dei layout tra IE, Firefox e Safari/Chrome; l’ enhancer consiste nell’importare nel CSS un file border-radius.htc (.htc come il fix PNG).
Nel file CSS questa è la sintassi:

.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

Si, la modifica funziona, o quasi, un div può ottenere angoli tondi su IE ma solo se ha dimensioni fisse e non viene modificato il suo aspetto una volta caricata la pagina, si perchè quando la pagina è completamente caricata viene applicata la modifica agli angoli; se le dimensioni cambiano, caricando del contenuto con chiamate ajax o effetti js, abbiamo dei difetti visivi, il div non cambia dimensione le regole di background vengono resettate in parte e una soluzione (-moz-border-radius:10px 10px 0px 0px) per definire il tondo per angoli specifici, non esistono…la modifica rende tutti gli angoli del div tondi.
Concludendo la modifica è molto limitata.

CSS display:table;

giZ — Mon, 22 Mar 2010 07:52:19 +0000

Una particolare regola CSS che permette di visualizzare dei box DIV con disposizione tabellare, probabilmente la soluzione definitiva per rimpiazzare le tabelle TABLE; senza un particolare posizionamento grazie alle varie regole display:table— le div con questa proprietà assumono automaticamente una disposizione tabellare…

La regola display table si divide in 8 differenti regole come table-row, table-column, table-header ecc…
Questo link su w3School approfondisce la regola display.

Mah…con piccole prove si può velocemente testare la regola e notare quanto sia più versatile e stabile di una TABLE, eppure sarebbe troppo bello rimpiazzare definitivamente le tabelle; infatti display:table non è supportato da IE fino alla versione 7, il supporto è stato poi introdotto dalla versione 8, per safari e firefox nessun problema (ecco la pagina che evidenzia il supporto cross-browser della regola).

Vediamo un esempio di codice:

.riga {width:300px;height:auto;display:table-row;}
.colonna{width:100px;height:40px;display:table-column;}

In questo caso visualizzeremo una tabella formata da 2 righe e 3 colonne per un totale di 6 celle.

IE 6 Ghost BUG

giZ — Wed, 17 Feb 2010 14:47:16 +0000

Siamo alle solite, caro Interent Explorer 6 neanche la pensione ti darei; oggi ho riscontrato un bug che fortunatamente nel WWW è stato già affrontato da altri designer.
Costantemente nei miei layout CSS utilizzo per il 90% le regole flotattiti per gli elementi, garantendo loro tutte le dimensioni necessarie e reali che a loro spettano.
Infatti il paramentro “float:” sui diversi browser renderizza a dovere i parametri ( height: width: padding: e margin: ) espandendo i vari box secondo il loro contenuto senza difetti di visualizzazione.

IE6 non si smentisce e anche con queste regole si inventa qualcosa se esageriamo, infatti capita che per i tag

se preceduti o nei pressi di un commento HTML ( invisibile lato utente) IE6 crea di propria iniziativa un semi duplicato dell’ultimo elemento flottante, mostrando una ripetizione anomala del contento dell’elemento.

Per risolvere questo difetto:

usare attorno al commento
rimuovere i commenti, soluzione più sensata, o nel caso di una pagina dinamica (.php) usare i commenti del codice appropriato al posto di quelli HTML
nel flottante precedente aggiungere lo stile {display:inline;}
aggiungere un margine negativo -3px all’ultimo elemento flottante prima del difetto
drammaticamente inserire un display:none; per il contenuto difettoso

Nel mio caso lavorando su piattaforma Java ho rimpiazzato i commenti HTML con i commenti JAVA ( <%– –%> ) dissolvendo il BUG alla radice.
In altri casi ho risolto togliendo il float all’elemento difettoso inserendo un clear:both; andando così a pulire la ripetizione dei float.

Ecco l’articolo originale
Altre risorse: Link1, Link2