2008 20 juni 2008

Hvit romkrypenes i Line / List elementer (li) i IE6

Hvis du noensinne har gjort (eller lage en) en vertikal meny med listeelementer (Li) tagger og CSS, kan det oppstå, dette enda en feil i Internet Explorer, hvor IE 6 inserts disse gapene mellom listeelementer som inneholder block-nivå elementer, dvs. hvis det er noen mellomrom mellom listeelementene i markeringen. Takk, men ingen takk, synes IE versjon 7 fri fra denne feilen.
Hvis som meg, og mange flere, tilhører du til dette bandet av frustrerte utviklere, som fortsatt har for å få sine nye oppsett, som arbeider i IE6 også, så dette kan vise seg nyttig. Ta en titt ...

Eksempel markering:

<ul id="menu">
<li> <a href="#"> Hjem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefølje </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt oss </ a> </ li>
</ Ul>

Du kan skape litt CSS, lik en nedenfor, for å transfrom ovenfor markup i en vertikal meny ....

Eksempel CSS ...
# Meny {
margin: 0; padding: 0; bakgrunn: # FF9900;
list-style-type: none; width: 150px;
}
# Meny li {margin: 0; padding: 0;}
# Meny a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-høyde: 2,5; border-bottom: 1px solid # FFF;
}

Resultatene vil du se ...
null

Løsning for denne feilen ... (modifisert / lagt CSS i fet kursiv)

# Meny {
margin: 0; padding: 0; bakgrunn: # FF9900; list-style-type: none; width: 150px;
float: left; / * dette inneholder fløt listeelementer * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Dette løser * /
width: 100%; / * whitespace bug i IE6 * /
}
# Meny a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-høyde: 2,5; border-bottom: 1px solid # FFF;
}

Hvis ovenstående løsningen doesnot synes å fungere (for grunner kjente til IE6 bare) ... prøve denne metoden i stedet

Bare legg denne ekstra IE6 bare stiler til markup din ...

<- [If lt IE 7>
<style type="text/css">
# Meny li a {display: inline-block;}
# Meny li a {display: block;}
</ Style>
<[Endif] ->


2008 6 juni 2008

Best Practices: Hold antall DOM Elements Small

Flere DOM elementer på siden, tregere den gjengir, tregere er DOM-tilgang i JavaScript-tallet. Et høyt antall av DOM-elementer kan være grunn dårlig layout design. For eksempel kan nestede tabeller har blitt brukt til layout formål. Bruk hvilken som helst HTML Tag hvor er fornuftig semantisk. For f.eks donot bruke tabeller for layout, men donot nøle med å bruke dem der du må vise tabelldata, og dermed vil bruke redusere DOM elementer, i forhold til en lignende struktur opprettet med divs bare ..

For å teste hvor mange av DOM elementer i HTML-siden, skriver følgende i Firebug konsoll: document.getElementsByTagName('*').length

Det er ingen satt standard for hvordan mange DOM elementer er for mange. Sjekk andre lignende sider som har god markup.Eg. Yahoo! Home Page er en ganske travel side og fortsatt under 700 elementer (HTML-koder).


2008 2 juni 2008

Best Practices: Bruke AJAX

Bruk GET for AJAX Forespørsler

Det har blitt funnet at når du bruker XMLHttpRequest, er POST implementert i nettlesere som en to-trinns prosess: sender overskrifter først, og deretter sende data. Så det er best å bruke GET, som bare tar en TCP-pakke å sende (med mindre du har mye cookies). Maksimal URL-lengde i IE er 2K, så hvis du sender mer enn 2K data du kanskje ikke kunne bruke GET.
En interessant side påvirke er at POST uten faktisk å legge noen data oppfører seg som GET. GET er ment for å hente informasjon, så det er fornuftig (semantisk) for å bruke GET når du bare ber om data, i motsetning til å sende data skal lagres på serversiden.

Unngå Synkrone AJAX samtaler

Når du gjør "Ajax" forespørsler, kan du velge enten asynkron eller synk modus. Asynkron modus kjører forespørselen i bakgrunnen mens andre browser aktiviteter kan fortsette å behandle. Sync mode vil vente til forespørselen om å returnere før du fortsetter.
Anmodninger laget med sync mode bør unngås. Disse forespørslene vil føre til at nettleseren til å låse opp for brukeren før forespørselen kommer tilbake. I tilfeller der serveren er opptatt og responsen tar en stund, brukerens nettleser (og kanskje OS) vil ikke tillate noe annet gjøres. I tilfeller der et svar ikke er mottatt, kan leseren fortsette å blokkere før forespørselen er tidsavbrutt.
Hvis du tror at din situasjon krever sync modus, er det mest sannsynlig på tide å revurdere ditt design. Svært få (om noen) situasjoner faktisk krever Ajax forespørsler i sync modus.


NDK hjem | Uttrykke IT | Uttrykke Palate | Uttrykke Penmenship | Uttrykke Awe | uttrykke meg