Hello World: » Cascade Style Sheet

CSS Tricks: diverse regole nello stesso foglio di stile

admin — Sat, 21 Mar 2009 04:13:29 +0000

Qualche utile espediente

Molto spesso succede di aver problemi a far renderizzare un layout in maniera uguale per sui vari browser. Magari nonostante siamo stati molto attenti ed abbiamo integrato il reset dei css.

A volte basterebbe magari un diverso valore per esempio del bordo, o della larghezza per far quadrare il tutto, ma come aggiungere regole differenti sullo stesso foglio? Semplice, aggiungendo alcuni caratteri prima del nome del parametro:

body {
  background-color: orange; /*  Lo sfondo sarà arancione per tutti */
  _background-color: red; /*  Su Internet Explorer 6 lo sfondo sarà rosso */
  .background-color: blue; /*  Su Internet Explorer 7 invece sarà blue */
}

Non è di certo il metodo più elegante del mondo in quanto avviene una ripetizione della stessa regola, ma personalmente l’ho usato con successo numerose volte.

Ma non è finita qui. Per quanto riguarda Internet Explorer 6 esiste ancora il seguente metodo per effettuare l’overload di una regola css, il seguente:

body {
  background-color: orange; /*  Lo sfondo sarà arancione per tutti */
}

* html body { /* questa regola sarà interpretata solo da Internet Explorer 6 */
  background-color: red;
}

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PNG fix: PNG Trasparenti con Internet Explorer 6

admin — Wed, 14 Jan 2009 06:28:37 +0000

Tutti i metodi funzionanti

Il formato PNG offre la possibilità di utilizzare trasparenze di un livello qualitativo maggiore di qualsiasi altro formato ( vedi GIF ). Se state leggendo queste righe sicuramente saprete che l’immortale Internet Explorer 6 ha qualche problema nella gestione di questo formato, rimpiazzando la trasparenza con un colore grigio.

Fortunatamente esistono delle soluzioni al problema, quindi non dovremmo fare a meno di utilizzare le immagini PNG per il nostro progetto per fare in modo che sia compatibile con tutti i browser, o quanto meno, con quelli più utilizzati.

Il primo metodo che andrò ad esporvi implica l’inserimento di una regola nel foglio di stile, la regola è la seguente:

	* html img,
	* html .png{
	position:relative;
	behavior: expression((this.runtimeStyle.behavior="none") && (this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
	}

Questo codice css potete inserirlo nel foglio di stile principale del vostro progetto, magari subito dopo il codice per il reset dei css o inserirlo in un foglio di stile a parte, se preferite trattare le regole per IE6 separatamente.

Il secondo metodo è quello descritto nel sito http://webfx.eae.net/. Si tratta di scaricare 2 files ed inserirli nella nostra applicazione tramite una veloce regola css, la seguente:

Il file in questione, pngbehavior.htc, lo trovare all’interno dell’archivio che potete scaricare da questo link.

Come ho scritto poco prima, i file necessari sono 2, l’altro file in questione è blank.gif, lo trovate all’interno dello stesso archivio. Per il corretto funzionamento di questo metodo vi consiglio di fare attenzione ai percorsi sul server dei vari files, incluso il vostro css.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Menu a tendina multilivello crossbrowser con jQuery e Css

admin — Sat, 04 Oct 2008 04:21:10 +0000

Crossbrowser Multi Level Drop Down Menu Con jQuery e Css

I menu a tendina sono molto utilizzati nelle applicazioni web, e molto spesso per crearli si ricorre a chilometri di codice javascript, scelta che potrebbe comportare diverse problematiche a livello di portabilità, accessibilità, efficienza ecc… Non è il caso del menù che andremo a vedere tra poco, interamente realizzato dal sottoscritto, creato quasi completamente utilizzando ’semplice’ codice css con un pizzico di jQuery. Prima di buttarmi in questo lavoro ho effettuato diverse ricerche per vedere se ciò di cui avevo bisogno fosse già stato creato da qualcuno, ed in effetti, in molti hanno già creato cose abbastanza simili. Ciò che mi ha fatto decidere di creare qualcosa ex novo è stata la difficoltà di riadattare il codice altrui alle mie esigenze, e spero che con le spiegazioni che darò qui di seguito nessuno vada incontro alle medesime problematiche.

Ecco subito un esempio di cosa andremo ad ottenere e qui di seguito il codice:

index.html

  
  
    
      
      
      
      
      Drop Down Menu
    
  

  
    
      Voce 1
        
          Sub Voce 1-1
            
              Sub Voce 1-1-1
                
                  Sub Voce 1-1-1-1
                  Sub Voce 1-1-1-2sssssss sssssssss ssssss
                  Sub Voce 1-1-1-3
                  Sub Voce 1-1-1-4
                    
                      Sub Voce 1-1-1-4-1
                      Sub Voce 1-1-1-4-2
                      Sub Voce 1-1-1-4-3
                      Sub Voce 1-1-1-4-4
                      Sub Voce 1-1-1-4-5
                      Sub Voce 1-1-1-4-6
                    
                  
                  Sub Voce 1-1-1-5
                  Sub Voce 1-1-1-6
                
              
              Sub Voce 1-1-2
                
                  Sub Voce 1-1-2-1
                  Sub Voce 1-1-2-2
                  Sub Voce 1-1-2-3
                  Sub Voce 1-1-2-4
                  Sub Voce 1-1-2-5
                  Sub Voce 1-1-2-6
                  Sub Voce 1-1-2-7
                
              
              Sub Voce 1-1-3
            
          
          Sub Voce 1-2
        
      
      Voce 2
      Voce 3
        
          Sub Voce 3-1
          Sub Voce 3-2
            
              Sub Voce 3-2-1
              Sub Voce 3-2-2
              Sub Voce 3-2-3
            
          
        
      
      Voce 4
      Voce 5
      Voce 6

style/style.css

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}

	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	span {
		display: none;
	}

	#navigator {
		width: 990px;
		height: 21px;
		background-color: rgb(250,211,211);
	}

	#navigator ul {
		list-style-type:none;
		border: 0px solid #000000;
		position: absolute;
		z-index: 90;
	}

	#navigator ul li {
		width: 130px;
		float: left;
		border: 1px solid black;
		text-align: center;
		font-size: 11px;
		font-weight: bold;
		display: block;
	}

	#navigator ul li ul {
		display: none;
		visibility: hidden;
		width: 130px;
		border: 0px;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background-color: #ffffff;
		margin: 1px 0px 0px -1px;
	}

	* html #navigator ul li ul {
		margin: 0px;
		background-color: #fff000;
		margin: 1px 0px 0px -66px;
	}

	#navigator ul li ul li {
		border: 0px solid black;
		border-bottom: 1px solid black;
		width: 130px;
	}

	#navigator ul ul ul {
		border: 0px solid black;
		border-top: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		float: left;
		width: 130px;
		margin: -18px 0px 0px 130px;
		height: auto;
	}

	* html #navigator ul ul ul {
		margin: 0px;
		margin: -18px 0px 0px 65px;
	}

	#navigator ul li p {
		margin: 0px;
		padding: 3px 0px 3px 0px;
		color: #000000;
		width: 100%;
		height: 100%;
		background-color: #ff0000;
	}

	#navigator ul li p a {
		color: #000000;
		background-color: #00ff00;
	}

js/menu.js


  $(document).ready(function(){
    $("#navigator li").hover(
      function(){
        $(this).children('ul:first:hidden').css({visibility: "visible",display:'block'});
      },
      function(){
        $(this).children('ul:first:visible').css({visibility: "hidden",display:'none'});
      }
    );
  });

Ricordatevi inoltre di includere correttamente la libreria jQuery.

Il file html non ha bisogno di spiegazioni, un semplice div che contiene un ul con degli li che a loro volta possono contenere altri ul ecc..

Il file menu.js utilizza il metodo hover di jQuery, che in pratica, mette in ascolto gli oggetti LI presenti all’interno del DIV#navigator con i metodi onmouseover e onmouseout.

Il file style.css è quello che andremo a dissezionare, vedendo passo passo i comportamenti che prende il nostro menu al variare del suo contenuto. Procederemo quindi in vari step che ci porteranno alla versione finale. Il codice in testa al file è parte del Meyerweb Reset che personalmente includo in ogni progetto.

Step 1

Il primo passo è semplice… eliminate il contenuto che segue alla definizione degli attributi per il div#navigator, otterrete questo risultato. Il contenuto degli ul li è subito visibile ed ogni elemento è a capo dell’altro. I file html e js sono rimasti invariati, infatti passando con il mouse sugli elementi LI potremo visualizzare/nascondere eventuali ul figli se disponibili.

Step 2

Non seguiremo l’ordine del codice come impostato nel file css nei vari step, infatti il file css di questo secondo passaggio sarà la versione dello step 1 con aggiunta delle definizioni di ‘#navigator ul li p’ e ‘#navigator ul li p a’. Cliccate qui per vedere il risultato e controllare se state eseguendo tutto correttamente. Abbiamo formattato i tag P ed A presenti all’interno degli LI. Perchè tag P? La versione fnale del menu senza la presenza dei tag P aveva un fastidioso difetto di sovrapposizione degli UL. Più nel dettaglio, la coordinata X dell’UL era uguale alla coordinata X del testo presente nell’LI parente sommata della sua lunghezza ( l’UL compariva subito dopo la fine del testo e non alla fine dell’LI, donando un effetto di disordine ).

Step 3

In questo passaggio le cose iniziano a prendere forma. Aggiungiamo le definizioni per ‘#navigator ul’ e ‘#navigator ul li’ ovvero l’UL che conterrà gli LI che rappresenteranno le categorie. Scrivo ‘rappresenteranno’ in quanto adesso la definizione prende tutti gli UL e gli LI discendenti del div#navigator. Ciò che abbiamo ottenuto è che adesso, le sottocategorie compaiono al di sotto della categoria a cui appartengono. Questo step 3 sarà visualizzato in maniera abbastanza differente dai vari browser ( leggi: su IE6 viene interpretato in modo differente che dagli altri browser ). Da sottolineare la presenza dell’attributo position: absolute; che permette la visualizzazione degli UL come se fossero al di fuori di qualsiasi altro elemento ( modificare questa voce con relative o rimuoverla per capire di cosa sto parlando ).

Step 4

Aggiungiamo le definizioni di ‘#navigator ul li ul’, ‘#navigator ul li ul li’ e ‘* html #navigator ul li ul’. In questo modo differenziamo la visualizzazione delle categorie di primo livello ( lo abbiamo fatto nello step 3 ) dalle sottocategorie ( a qualsiasi livello ). Inoltre definiamo che le sottocategorie di default NON debbano visualizzarsi. Della loro visualizzazione se ne occupera il file js ( che cerca il primo figlio UL nascosto dell’LI scatenante l’evento mouseover e lo visualizza ). Ciò che otteniamo è la corretta visualizzazione delle categorie di primo livello. Da notare che un selettore preceduto dal suffisso ‘* html’ viene letto esclusivamente da IE6, quindi le proprietà al suo interno sono specifiche per far funzionare il tutto anche su questo browser.

Final Step

Infine aggiungiamo le regole ‘#navigator ul ul ul’ e ‘* html #navigator ul ul ul’ che definiscono la visualizzazione per le categorie dal terzo livello in poi. Otteniamo quindi il risultato finale.

Riadattare il tutto

Ciò a cui bisogna porre attenzione modificando il css di questo menù sono principalmente la larghezza degli li/ul e la loro altezza, data principalmente dalla proprietà padding del tag P. Inoltre, la presenza del bordo di 1px è da tenere in considerazione in quanto la sua rimozione/modifica comporterebbe la modifica di altre proprietà per fare in modo che tutto si riadatti. Rispettando l’equilibrio tra le varie proprietà non dovrebbe essere eccessivamente un problema riadattare il tutto alle proprie esigenze.

Si conclude qui questo tutorial. Eventuali commenti per richieste o consigli su come modificare in meglio il codice sono sempre ben accetti.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Cascade Style Sheet Reset

admin — Sat, 04 Oct 2008 01:33:53 +0000

Reset dei Css ( Meyerweb Reset )

Tutte le persone che hanno mai avuto la necessità di sviluppare una pagina web conoscono le difficoltà che potrebbero presentarsi nel tentativo di rendere il layout funzionante sui vari web browser esistenti, soprattutto rendere il layout compatibile anche con l’immortale Internet Explorer 6.

In questo articolo parleremo di un tool, formato da poche righe di codice css, che ci permette di unificare il valore di default di alcuni attributi per i tag html più comunemente usati. Infatti, gran parte dei problemi di implementazione di un layout deriva dalla mancata conoscenza dell’esistenza di queste differenze di interpretazione, quindi utilizzarlo, vi farà risparmiare molto tempo!

Qui di seguito il codice css, da utilizzarsi come punto di partenza per il vostro foglio di stile:

  /* v1.0 | 20080212 */

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }

  /* remember to define focus styles! */
  :focus {
    outline: 0;
  }

  /* remember to highlight inserts somehow! */
  ins {
    text-decoration: none;
  }
  del {
    text-decoration: line-through;
  }

  /* tables still need 'cellspacing="0"' in the markup */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

Potete trovare la versione sempre aggiornata su http://meyerweb.com/.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.