2008 24 prill 2008

Praktikat më të mira: Puna me CSS

Vendos Stylesheets në Top

Nëse doni një faqe të ngarkesës në mënyrë progresive, që është, ne duam të shfletuesit për të shfaqur çfarëdo përmbajtje ka sa më shpejt të jetë e mundur, e vënë CSS në krye të faqes brenda në kokë të dokumentit. Kjo e bën pages duket të ngarkimit të shpejtë, sepse kjo lehtëson interpretim progresiv të faqes. Kjo është veçanërisht e rëndësishme për faqet me një shumë të përmbajtjes dhe për përdoruesit në lidhje interneti te ngadalte.

Është një fakt i dokumentuar se për të rritur eksperiencën e përdoruesit, është e rëndësishme që të sigurojë tregues të progresit dhe feedbacks vizuale. Për të shmangur që të riformatojnë elementet e faqe, në rast se ndryshimi stilet e tyre, disa shfletues, duke përfshirë IE, bllokon dhënien e faqe deri CSS është plotësisht e ngarkuar. Për shkak të kësaj, përdoruesi është i merr për të parë një faqe bosh të bardhë.

Të W3 Specifikimet HTML 'gjithashtu thekson se duhet CSS mua përfshijë në pjesën e kokës e faqe HTML. at the bottom of the page, so it's best not to use it. Gjithashtu theksohet se, Në IE @import sillet njëjtë si duke përdorur <link> në fund të faqes, kështu që nuk është mirë të përdorni atë.

Shmangni përdorimin e karakteristika Browser Specifike

Filtra: Përdorimi i filtrit rrit konsumin e kujtesës dhe është aplikuar për element, jo për imazhin, në mënyrë që problemi është shumëzuar. Gjithashtu, Filters janë IE Patentuar, prandaj nuk do të punojë si qëllim në shfletues të tjera. Nëse ju doni prejardhje transparente apo gradient, përdorni 1Pixel me imazhe.
Shprehjet me: shprehjet CSS janë një tipar të mirë që të ketë në CSS, por ende është tipar IE specifik. Gjithashtu, është e rëndësishme të theksohet se, këto shprehje janë kur vlerësohet faqe është dhënë dhe ridimensionuar, scrolled dhe madje edhe kur përdoruesi lëviz miun mbi faqe. S'është nevoja të thuhet kjo mund të ndikojë në punën e faqes tuaj. Pra me fjalë të thjeshta, Shmangni përdorimin e shprehjeve CSS, nëse ju mendoni pro saj "peshon më shumë se të këqijat e saj"

Externalise ju CSS

Duke përdorur CSS jashtëm do të rezultojë në ngarkim të shpejtë të faqe sepse fotografi JavaScript dhe CSS janë kopje e ruajtur nga të shfletuesit. Inline CSS në dokumentet HTML merrni shkarkuar çdo kohë dokument HTML është kërkuar. Ky fakt mund të zvogëlojë numrin e kërkesave HTTP bëra por më pas rrit madhësinë e dokumentit HTML. Jashtëm CSS janë kopje e ruajtur nga të shfletuesit, madhësia e dokumentit HTML është reduktuar pa rritjen e numrit të kërkesave HTTP.

Lutemi kini parasysh se, nëse përdoruesit në faqen tuaj të ketë pikëpamjet e shumta faqe për seancë dhe shumë nga faqet tuaja të ri-përdorin Scripts njëjta dhe stili, nuk është një përfitim i madh potencial nga dosjet cached jashtme.

Pak CSS dosjen tuaj

Paketimi ose crunching CSS juaj është praktikë e heqjes karaktere të panevojshme nga kodi për të zvogëluar madhësinë e saj duke përmirësuar herë ngarkesës.

CSS mund mua mungesa e duke hequr të gjitha komentet dhe çfarëdo karaktere të padëshiruar si hapësira të bardha, newlines etj


2008 12 prill 2008

Lartësia minimale CSS Cross Browser Hack

Posto IE 6, MSIE ka qenë e llojit të mjaftueshme për të na zhvilluesit UI duke shtuar një pak më shumë pronave CSS standarde në shumicën e shfletuesit të tjera standarde. Një pasuri e tillë i dobishëm në "min lartësi të". Prona mjaft i drejtë përpara që nuk ka nevojë për shpjegim të gjatë lodhshëm. Kur një min-height për një ndarje është vendosur, ai gjithmonë e mban atë lartësi të caktuar, kur përmbajtja e ajo shtëpi të zë më pak se ajo mund të mbajnë dhe e rëndësishmja (ndryshe nga thjeshtë vanilje "lartësi" të pronës) peshore apo me fjalë të CSS, ajo sillet si një Ndarja e të cilit "lartësi" është vendosur të "Auto" ...

Për disa prej nesh zhvilluesve të varfër, të cilët ende janë të nevojshme për kodin CSS që duhet gjithashtu të punojnë në IE6, un-disponueshmëria e "min-height", mund të provojë një tapë show diku ... dëshpërim donot.

Për fat të mirë, ne kemi quirks të mjaftueshme në IE, që ne do të përdorim në avantazhin jashtë dhe çajë rrugën tonë nëpërmjet të arritur qëllimin tonë ... dmth të bëjë një divizioni sikur i saj min-height në IE6

Zgjidhja 1: Përdorimi i fjalës Hack të theksuar ... Read more ]

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

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


Zgjidhja 2: Përdorimi i Selector atribut Hack CSS

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

Selector Attribute CSS Hack merr përparësi për faktin e shfletuesit IE6 më herët tha injoruar një atribute përzgjedhës-. Shënim kërkesat e një ndarjeje enë me class = "someclass". Vetëm presense e klasës atribut për këtë ndarje, refuzon lartësi përsëri në auto për Opera, Mozilla dhe MSIE7 dhe më vonë. IE6, e cila nuk e mbështet selectors atribute, e injoron atë.

Shiko Demo e hack min-height për IE6



2008 4 prill 2008

Duke punuar me nyjen Atributeve në XML XSLT

Nëse ju përdorni XML dhe XSL, atëherë ju mund të ketë ardhur nëpër një kohë, kur ju duhet të luajnë rreth me atributet dhe vlerat e nyjeve XML në ju XSL. Ata janë ngarkesa e faqet me informacion të gjatë lodhshëm për këtë, por nuk kam gjetur ishte i shkurtër dhe i saktë ... kjo nuk është XML / XSL tutorial, por përpjekja ime për të vënë së bashku një lloj të mashtrojnë lista ...

Mostra XML se ne do të punojmë me duket si ky ...

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

Kështu që lejon të fillojë transformimi XML tonë të mësipërm duke përdorur XSL

Shembull 1: shfaqje vlerë në një atribut të zgjedhur

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

Rezultati HTML do të duket si

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


Shembull 2: looping përmes dhe shfaqja e të gjitha Emrat XML atribut dhe vlera e tyre

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

Rezultati HTML do të duket si


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


Shkarko të gjitha dosjet e mësipërme këtu (249 downloads)



Shikojnë këtë hapësirë, unë do të mbaj përditësimin kjo me zbulimet e reja ...


NDK shtëpi | Duke shprehur IT | qiellëz shprehur | Penmenship shprehur | frikë shprehur | shprehur Myself