Pagpapahayag ng IT

-Ilagay Stylesheets sa tuktok

Kung nais mo ang isang pahina sa load progressively; na, gusto namin ang mga browser upang ipakita ang anumang nilalaman na ito ay sa lalong madaling panahon, ilagay ang CSS sa tuktok ng pahina sa loob ng HEAD dokumento. Ito ay gumagawa ng mga pahina ay lalabas sa paglo-load ng mas mabilis, bilang na ito facilitates umuunlad rendering ng pahina. Ito ay lalong mahalaga para sa mga pahina na may maraming mga nilalaman at para sa mga gumagamit sa mas mabagal na koneksyon sa Internet.

Ito ay isang dokumentado katotohanan na upang mapahusay ang pangkalahatang karanasan ng gumagamit, ito ay mahalaga upang magbigay ng mga tagapagpabatid ng pag-unlad at mga visual na feedbacks. Upang maiwasan ang pagkakaroon sa redraw mga elemento ng pahina, sa kaso kung ang kanilang mga estilo ng pagbabago, ang ilang mga browser, kabilang ang IE, mga bloke ng rendering ng pahina hanggang sa CSS ay ganap na-load. Dahil dito, ang gumagamit ay makakakuha ng upang makita ang ng blangkong puting pahina.

Ang W3 HTML Mismong 'din estado na ang CSS dapat ako isama sa HEAD seksyon ng HTML na pahina. at the bottom of the page, so it's best not to use it. Tandaan din na, Sa IE @import behaves ang parehong bilang ng paggamit ng <link> sa ibaba ng pahina, kaya ito ay pinakamahusay na hindi gamitin ito.

Iwasan ang paggamit ng Browser Tiyak na mga tampok

Filter: Paggamit ng filter nagpapataas ng memory consumption at inilapat sa bawat elemento, hindi sa bawat imahe, kaya ang problema ay multiplied. Gayundin, ang mga Filter IE pagmamay-ari, samakatuwid ay hindi gumagana bilang inilaan sa iba pang mga browser. Kung nais mong transparent o greydyent background, gamitin 1Pixel na may mga imahe.
Expression: CSS expression ay isang magandang tampok na mayroon sa CSS, ngunit pa rin ay IE partikular na tampok. Gayundin, ito ay mahalaga na tandaan na, ang mga expression na ito ay sinusuri kapag ang pahina ay nai-render at sukat, scrolled at kahit na kapag ang gumagamit ay gumagalaw ang mouse sa ibabaw ng pahina. Hindi na kailangang sabihin na ito ay maaaring makaapekto sa pagganap ng iyong pahina. Samakatuwid sa simpleng salita, Iwasan ang paggamit ng mga expression CSS, maliban kung sa tingin mo ang pros 'weighs ng higit sa kanyang cons'

Externalise ka CSS

Paggamit ng panlabas na CSS ay magreresulta sa mas mabilis loading ng mga pahina dahil ang JavaScript at CSS file ay naka-cache ng browser. Inline CSS sa HTML dokumento makapag-download sa bawat oras na ang dokumentong HTML ay hiniling. Ito ay maaaring aktwal na bawasan ang bilang ng mga HTTP kahilingan ginawa ngunit pagkatapos ito ay nagdaragdag ang laki ng dokumentong HTML. Panlabas na CSS ay naka-cache ng browser; ang laki ng dokumentong HTML ay nabawasan nang walang pagtaas ng bilang ng mga HTTP kahilingan.

Mangyaring tandaan na, kung ang mga gumagamit sa iyong site ay may maramihang mga page view bawat session at marami sa iyong mga pahina ng muling gamitin ang parehong mga script at stylesheets, mayroong isang mas mataas na potensyal na benepisyo mula sa naka-cache na mga panlabas na file.

Pack ang iyong CSS File

Basta o crunching ng iyong CSS ay ang pagsasanay ng pag-alis ng hindi kinakailangang mga character mula sa code upang mabawasan ang laki ng sa gayon ang pagpapabuti ng oras ng pagkarga.

Ang CSS ay maaaring crunched sa akin sa pamamagitan ng pag-alis ng lahat ang mga komento at anumang hindi kanais-nais na mga character tulad ng mga puting espasyo, newlines atbp.

Mag-post ng IE 6, MSIE ay uri sapat na sa amin UI developer sa pamamagitan ng pagdagdag ng ilang mga katangian ng CSS pamantayan sa mga pinaka-iba pang mga karaniwang browser. Isa tulad usefull ari-arian sa "min-taas". Medyo tuwid forward ari-arian na nangangailangan ng walang mahaba paghinga paliwanag. Kapag ang isang min-taas para sa isang dibisyon ay naka-set, laging Pinapanatili na taas ng hanay kapag ang nilalaman nito bahay sumasakop mas mababa kaysa sa maaari itong hawakan at mahalaga (hindi katulad ng plain na ari-arian ng banilya "taas") kaliskis o sa CSS salita, ito behaves tulad ng isang dibisyon na ang "taas" ay naka-set sa "auto" ...

Para sa ilan sa atin mahirap developer, sino pa rin ay kinakailangan upang code CSS na dapat ding magtrabaho sa IE6, ang di-pagkakaroon ng "min-taas", ay maaaring patunayan ng isang ipakita ang pasak minsan ... Donot kawalan ng pag-asa.

Sa kabutihang palad, mayroon kaming sapat na mga quirks sa IE, na gusto naming gamitin ang kalamangan at Hack aming paraan sa pamamagitan upang maabot ang aming layunin ... ibig sabihin gumawa ng isang dibisyon ng Division na tila ang min-taas sa IE6

Solusyon 1: Gamit ang salungguhit Hack [ ... Magbasa pa ]

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

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

---

Solusyon 2: Paggamit ng CSS selector Hack Attribute

.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>


Ang CSS Hack Attribute selector ay tumatagal ng bentahe ng ang katunayan na ang browser na mas maaga tha na IE6 bahala isang atribute-pili. Tandaan ang mga kinakailangan ng isa pang lalagyan ng division sa klase na "someclass" =. Lamang ang presense ng klase ng katangian para sa dibisyon, overrides ang taas pabalik sa auto para sa Opera, Mozilla at MSIE7 na at mamaya. IE6, kung saan ay hindi sumusuporta sa selectors atribute, pinapansin ito.

Tingnan ang Demo ng min-taas pataga para sa IE6

Kung gumagamit ka ng XML at XSL, pagkatapos ay maaari mong ay dumating sa isang oras, kapag mayroon kang upang i-play sa paligid na may mga katangian at mga halaga ng mga XML nodes sa iyo XSL. Sila ay naglo-load ng mga site na may mahabang paghinga impormasyon tungkol dito, ngunit wala ako natagpuan ay panandaliang at tiyak ... Ito ay HINDI XML / XSL Tutorial, ngunit ang aking mga pagtatangka upang ilagay-sama ng ilang uri ng mga impostor listahan ...

Ang sample ng XML na kami ay nagtatrabaho sa ganito ang hitsura ...

<?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>

Kaya Hinahayaan simulan ang pagbabago sa aming itaas XML gamit XSL

Halimbawa 1: Ipinapakita ng halaga sa isang napiling 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 resulta ay hitsura

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

Halimbawa 2: Looping sa pamamagitan ng at pagpapakita ng ang lahat ng mga XML Attribute Pangalan at ang kanilang mga Halaga

<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 resulta ay hitsura


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


Panoorin ang space, kukunin ko na patuloy na nag-a-update ito sa bagong natuklasan ...