2008 24. april 2008

Najboljše prakse: delo s CSS

Postavite slogovne na vrh

Če želite stran, da se postopoma naložiti, da želimo, da brskalnik za prikaz ne glede na vsebino ima čim prej, dal CSS na vrhu strani v dokumentu glavo. To pomeni, strani se zdi, da nakladanje hitreje, kot to omogoča postopno vračanje strani. To je še posebej pomembno za strani z veliko vsebine in za uporabnike na počasnejših internetnih povezavah.

To je dokumentirano dejstvo, da bi povečali splošno uporabniško izkušnjo, je pomembno, da se kazalniki napredka in vizualne odzive. Da ne bi bilo, da izvlečete elemente strani, v primeru, če je njihova stili spremembe, nekateri brskalniki, vključno z IE, bloki upodabljanja strani, dokler se CSS polni obremenitvi. Zaradi tega, uporabnik dobi videti prazno belo stran.

V W3 HTML specifikacije "tudi določa, da mora CSS me vključujejo v glavi delu strani HTML. at the bottom of the page, so it's best not to use it. Upoštevajte tudi, da je v IE @import obnaša enako kot z <link> na dnu strani, zato je najbolje, da ga ne uporabljajo.

Izogibajte se uporabi brskalnika posebnosti

Filtri: Uporaba filtra poveča porabo pomnilnika in se uporablja na element, ki niso na sliki, tako da je problem se množi. Prav tako so Filtri IE lastniška, zato ne bo delovala kot je bilo predvideno v drugih brskalnikih. Če želite pregledne ali gradient ozadja, uporabite 1Pixel s slikami.
Izrazi: CSS izrazi so lepo lastnost, da imajo v CSS, še vedno pa je IE posebnost. Prav tako je pomembno opozoriti, da so ti izrazi so oceniti, če je stran postali in spreminjati, zvitek in tudi, ko uporabnik premakne miško preko strani. Ni treba posebej poudarjati to lahko vpliva na delovanje vaše strani. Zato v preprostih besedah, ne uporabljajte CSS izrazov, če menite, da njegove prednosti "tehta več kot njegovi cons"

Zunanje strukture vam CSS

Uporaba zunanjega CSS bo imelo za posledico hitrejše nalaganje Strani saj JavaScript in CSS datoteke shranjene s strani brskalnika. Inline CSS v dokumentih HTML dobili prenesli vsakič, ko je dokument HTML je zahteval. To bi dejansko zmanjšalo število zahtev HTTP, nato se poveča velikost HTML dokumenta. Zunanji CSS so cached s strani brskalnika, velikost dokumenta HTML se zmanjša, ne da bi povečanje števila zahtev HTTP.

Prosimo, upoštevajte, da se, če uporabniki na vašo spletno stran, imajo več pogledov strani na seji in veliko vaših straneh, ponovno uporabljajo enake skripte in slogi, obstaja večja možnost koristi od zunanjih predpomnilniku datotek.

Pack vaše CSS datoteke

Pakiranje ali škrtanje svoj CSS je praksa odpravo nepotrebnih znakov s kodo zmanjšati njegovo velikost s čimer se izboljša obremenitve krat.

CSS mi lahko crunched z odstranitvijo vse komentarje in vse neželene znake, kot belih lis, novih vrstic itd


2008 12 april 2008

CSS Cross Browser Minimalna višina Hack

Objavi IE 6, je MSIE že tako prijazen, da nam UI razvijalci z dodatkom nekaj več CSS lastnosti standardnih za večino drugih standardnih brskalnikih. Ena taka uporabna nepremičnina "min-višine". Lepo naravnost naprej premoženje, ki ne potrebuje dolgo daha pojasnilo. Ko je nastavljena min-višina za delitev, je vedno ohranja to nastavljeno višino, ko vsebina je v njem zaseda manj kot lahko ima in pomembno je (za razliko od navadnega vanilije "Višina" lastnine) lestvice ali z besedami, CSS, da se vede kot delitev, katerih "Višina" nastavljen na "auto" ...

Za nekatere od nas revnih razvijalcev, ki so še vedno potrebni za kode CSS, da mora prav tako delajo v IE6, bi lahko un-dostopnost "min-višina", dokazati kažejo zamašek nekje ... donot obup.

Na srečo imamo dovolj quirks v IE, ki bi jih uporabljamo v korist ven in kramp našo pot skozi, da dosežejo svoj ​​cilj ... to je, da je delitev delitev, kot da njegova min-višina v IE6

Rešitev 1: Uporaba poudarjajo Hack [ ... Preberi več ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


Rešitev 2: Uporaba atributa CSS Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

Atribut CSS Selector Hack izkorišča dejstvo, da brskalniki prej tha IE6 prezreti tudi atribute, izbiro. Bodite pozorni na zahtevo po drugi posodi delitve z class = "someclass". Samo presense razrednega atributa za to delitev, preglasi višine nazaj v avto za Opera, Mozilla in MSIE7 in kasneje. IE6, ki ne podpira atribute selektorji, ga ignorira.

Oglejte si demo min-višina kramp za IE6



2008 4. april 2008

Delo z vozlišče atributi XML v XSLT

Če uporabljate XML in XSL, morda pa ste naleteli v času, ko je igral z atributi in vrednot XML vozlišč v vas XSL. So obremenitve strani z dolgo daha informacij o tem, vendar nobena ni bila sem našel kratek in natančen ... To ni XML / XSL TUTORIAL, ampak moj poskus, da bi dal, skupaj neke vrste goljufija seznamu ...

Vzorec XML, da bomo delo z izgleda takole ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Torej Lets začeli preobrazbo našega nad XML z uporabo XSL

Primer 1: Prikaz vrednosti na izbran Attribute

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML rezultat bo izgledal

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">


Primer 2: zanka skozi vse XML in prikazovanje imena atributov in njihove vrednosti

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML rezultat bo izgledal


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Prenesite vse zgoraj navedene datoteke tukaj (247 prenosov)



Oglejte si ta prostor, bom to vodi posodabljanje z novimi ugotovitvami ...


NDK domov | Ki ga izraža | Izražanje Okus | Izražanje Penmenship | Izražanje Awe | Izražanje Sebe