IT kifejezése

10 év CSS léte ebben az évben! Azok, akik már körül egy ideig, kiérdemelve a kenyerét (vagy nem) a CSS segítségével, akkor lehet, hogy tudja, milyen mi már éhes a jól kiválasztott betűtípusok. Még a hiányzó betűtípusok tervezők, mint amilyen a CSS Zen Garden éltek CSS háttérképeket betűtípusok helyett a törekvés csinál valami igazságszolgáltatás terveiket. Azt is próbáltam Flash / JavaScript ® csapkod, hogy elérjük a célokat. Semmi esetre ez egy rossz módszer a betűtípusok vágyunk a mi web design, de egyértelműen nem ez a leginkább kívánatos módon. és az évek során webdesigner, mint én, már teljes mértékben támaszkodott vagy tíz font a terveiket.

Újabb fejlemények a webes szabványokat, és font formátumok lehetővé teszik a szöveget HTML teszik betűtípusok más, mint a régi alapértelmezett betűtípusokat. Jön a "@ fontface" CSS decleration.

@ Fontface provids megoldást összekapcsolni az aktuális betűtípus fájlt, és keresse ki a webről. A @ fontface, tervezők betűtípusok használatával anélkül, hogy fagyassza be a szöveget a háttérképeket. A megvalósítás igen egyszerű, az alábbiak szerint, de mint minden jó dolog van CON részt hozzá, nem minden böngésző támogatja egy "betűtípus". Ha azt tervezi, hogy használni @ fontface a helyszínen igénylő kereszt böngésző támogatja, akkor meg kell, hogy a különböző forrásokból font-típusú ugyanaz.

1. TrueType - A formátum célja, hogy jól nézzen ki a képernyőn. Ajánlott különösen a Windows böngészők (Chrome).
2. OpenType (CFF) - Ez a formátum jobb nyomtatási munka, és nem mindig jól néz ki a Windows.
3. EOT - Meg kell ezt a formátumot, ha szeretné megcélozni az Internet Explorer. IE nem használ semmilyen más formában. Mi a EOT lenne tekinthető "Lite", mivel ezek nem tömöríti, sem domain-korlátozott.
4. SVG - Ez egy XML formátum által támogatott egyes böngészők, beleértve az iPhone.
5. WOFF - Ez a kereszt-böngésző, web-only font formátum könnyű (betűtípus adatok zip tömörített) és lehet összeállítani vagy TrueType vagy PostScript (CFF) vázolja. Ezt jelenleg a Firefox 3.6 +.

A @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: a helyi ('CalligraphyFLF "), helyi (" CalligraphyFLF "), url (' CalligraphyFLF.woff) formátumban (" woff "), url ('CalligraphyFLF.ttf) formátumban (" TrueType "), url (' CalligraphyFLF . svg # CalligraphyFLF) formátumban ("svg");
 }
 @ Font-face {
   font-family: "A betűtípus";
   src: url ("fonts / font_filename.eot");
   src: helyi ("Alternatív név"), helyi ("Alternatename"),
     url ("fonts / font_filename.woff") formában ("woff"),
     url ("fonts / font_filename.otf") formában ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") formában ("SVG");
   }
 h2 {font-family: "A betűtípus", Georgia, serif;} 

Mint látható a fenti példa, hogy tartalmazza a betűtípust választott betűtípus, az egyik linkelni egy sor fonttypes azonos betűtípussal. Ezért az emberek hivatkoznak rá, mint "Betű készlet".
Vannak font készletek rendelkezésre, amely kifejezetten lehetővé teszi, hogy összekapcsolja a CSS @ font-face ingatlan alatt végfelhasználói licencszerződés (EULA).

Hasznos WebFont források:

• Betűtípusok rendelkezésre @ font-face beágyazás wiki oldalt http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ő egy neves tervező, aki font tette több száz érdekes TrueType betűkészletek szabadon használhatónak az interneten. Ő betűtípusok elegáns, dekoratív, és játékos.
• Dieter Steffmann egy másik nagyszerű font tervezője. Ő is tette sok szép fontokat bárki számára használható.
• Betűtípus bolt : betűtípusokat kínál kifejezetten webes felhasználásra. Több mint 30 a legsikeresebb FontFont család most a weben elérhető FontFonts. FontShop is van egy részletes használati útmutató WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Betűtípus Mókus : vitrinek összes betűtípust, hogy a betű Mókus kínál használható @ font-face CSS beágyazás. Betűtípus Mókus kínál lenyűgöző mennyiségű típusú teszi halott egyszerű felvenni egyet, és handily kínál "készletek" - a betűtípust választott, különböző formátumokban csomagolni demo HTML és CSS, amely nagyon aktuális @ font-face szintaxis . Ők is kínálnak egy módja annak , hogy a saját @ font-face készletek . Ha a betűtípust szeretnénk használni engedélyezték megfelelően (az is, hogy jön a számítógép nem feltétlenül baj), a generátor termel EOT, SVG, és hé! WOFF fájlokat.

Egy másik gyors Tut. Itt van valami egyszerű és szép erejét kihasználva a CSS ... de nehéz volt concieve (és biztosan nem én voltam), hogy kezdődik. Hozzáadása Dropshadow lehet az peice sütemény sokunk számára, segítségével néhány képszerkesztő eszközök, mint a Photoshop ANF tűzijáték stb
Az ok, hogy miért, azt választotta vetett árnyékot, hogy a CSS segítségével, általában az oldal létrehozása közben design / html kérelem, a követelmények folyamatosan iterációt. Úgy értem, egy meglévő webhelyet a sok kép, mint azok, freinds megjelenítő listában vagy egy képgaléria, nehéz lesz újra feldolgozni, hogy az egész rakományt a képek, hogy már már betárolt hozzáadni vagy eltávolítani az árnyékokat, hogy a számít.
Tehát ha volna egy kis előre gondolkodás megteremtése mellett HTMLS hozzá az extra osztályok, illetve általában a helyzet, hogy van egy logikai hurok generáló ezek az ikonok / bélyegképek XSL, PHP. JAVA vagy bármilyen más programozási / script nyelv, akkor add meg bármikor, akkor csak az ügy koncepciós és elrejtik ezeket az árnyakat a CSS Display tulajdonság, mint egy az ügyfelek folyamatosan változó követelményeknek ... Én havn't tenni ezt a fajta előre gondolkodó mielőtt ez ... de ahev el most!

Az alábbi példában az eredeti kép árnyék ingyenes, és az dropshadows érvényesek, mint szükséges! Azt is volna egy kis extra, segítségével a trükköket az én korábbi Tut (Well! ezek valószínűleg a legrövidebb különféle oktatóanyagok, így csak akkor indokolt, hívja őket "Tut" 's) mintegy CSS Clip ingatlan esetében csak mutogatni

Eredeti kép

CSS DropShadow Eredmények

Demo megtekintése | Letöltés sourcefiles

Miért akarom érteni ezt?? Humm ...!!

A legtöbb CSS írók egyetértenek abban, hogy a CSS Clip tulajdonság talán az egyik legtöbbet használt un CSS tulajdonságok. Ez annyira igaz, nekem is volt a legboldogabb, hogy elhanyagolja azt, amíg elkezdtem módosításával MooTools két gomb (Pin) Csúszik Component (a tartomány indikátor) .

Volt egy jó javaslat az egyik komponens felhasználóknak, hogy módosítsák a csúszka komponens segítségével kivágott képek hátteréül (szemben egy változó szélességű Division), hogy jelezze a csúszkát tartományban. Így eljött az időm, hogy belépjen a móka, de az ENSZ-Chartered (számomra persze), víz a CSS Clip ingatlan.

Nos! milyen nehéz lehet? Nem sok minden ... Igen és nem. A szintaxis a CSS Clip ingatlan szép, de egyenesen a szó / usuage egy kicsit croocked. A memória, mint az enyém, mindig, ülök átdolgozni én Slider Script ... Van tokeep hivatkozva vissza használják ezt a CLIP tulajdonság, hogy emlékeztessem magam a logikát, hogy én hoztam létre az én script .... Ezért! gondolják, hogy tolltartó le, azzal a reménnyel, hogy emlékezzen, hogy a jövő (és számára is, akik úgy tűnik, visszarettent a CSS Clip Property)

Mit jelent a CSS Clip csinálni?

Clip része a vizuális effektek modulja CSS 2.1. Egyszerűen fogalmazva, a feladata, hogy tegyen egy ablak tetején látható egy tárgy, amelynek a nyírni, így nyírás képek és bélyegképek létrehozása anélkül, hogy további fájlokat (már be ezt a funkciót, hogy jobban használják a csúszka komponens )

A Clip CSS tulajdonságot, akkor létrehozhat egy clipping segítségével rect alakja. Mint sok más CSS tulajdonságok (mint margin, padding, stb), a len szükséges koordinátákat 4 Top, Right, Bottom, Left (TRBL). A croocked természetét tükrözi ezt a tulajdonságot, ha közelebbről szemügyre, hogyan számítja ki a klip vágási régió segítségével a négy koordináta (az agy küld egy lök egy ideig). Most, hogy megzavarja azt az alsó felülről indul, és a jobb kezdődik balra. . Látod, mit mondtam? .... Ezért ezt a hozzászólást ...

Ez a kis zűrzavar könnyen eltűnik, ezzel a vizuális magyarázat CSS Clip / rect ingatlan alatt!!

CSS Clip követelmények

A feladat kezdtük, hogy a következő klip Thumbnail image egy szögletesebb látszó képet (és egy nagylátószögű kép)

Eredeti Thumbnal / kép	Clip követelmények Sqaure Thumbmail

CSS Clip Eredmények

Demo megtekintése | Letöltés sourcefiles

Mielőtt meg kellett küzdenie a CSS, hogy hozzon létre oldalelrendezéseket, összehangolva az egyes tartalmak belül egy táblázat cella tűnt csak gyerekjáték. Egyszerűen állítsa be az "align" vagy "valign" tulajdonság a tábla, hogy az összehangolás az Ön által kiválasztott, gyerekjáték!
A CSS elrendezés, bár van "vertical-align" tulajdonság az elem, nem tűnik olyan egyszerűnek, mint az "align" vagy "valign" tulajdonságok. Ahhoz, hogy több specifiic a "vertical-align:" Soha nem úgy tűnik, hogy megoldja minden gondját, különösen akkor, ha van írni egy darab cross-browser CSS.

Használata nélkül a HTML-táblázatok, a probléma az összpontosító tárgy, legyen az kép vagy valamilyen szöveget tartalmazó részlege belül, valószínűleg azóta minden UI / CSS fejlesztők rémálma egy bizonyos ponton. Ez a probléma további kivetítve gondjait történő összehangolása, ha az objektumot középre dinamikus jellegű, vagyis ha a magassága változó (ismeretlen magassága).

Bár nincs ismert megoldás, egyenesen előre, hogy fog működni az egész tartományban a böngészők meg kell foglalkozni, a megoldás, hogy én próbáltam megérkezni úgy tűnik, hogy működik a néhány böngészők Megpróbáltam azt (IE6, IE 7 , FF).

MEGOLDÁS:
A böngészők, mint a Mozilla, Opera és a Safari, a furcsa viselkedő "vertical-align" tulajdonság lehet hozni az érzékek, egyszerűen állítsa a "Display" tulajdona tartalmazó részleg "table-cell" (display: table-cell) .

A probléma még mindig az IE böngészők családja, aki még nem érti, mit a "table-cell" tulajdon és tudatlan, mint ők, akkor ne törődj vele. A megoldás az alábbiakban szerepel, bár egyszerű, hirdetések még néhány DOM elemet a HTML, hogy a dolgok történnek.

A CSS és HTML néz ki
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> nézetek: 3456 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

megtekintéséhez a demó | Letöltés Source Files (Letöltve 446 alkalommal)

TOP igazítás CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> nézetek: 1234 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

ALSÓ igazítás CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> nézetek: 1234 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

megtekintéséhez a demó | Letöltés itt

Úgy tűnik, korok, mivel én kerestem egy ésszerű megoldást erre a beállítási hiba. De most ezzel a megoldással, úgy érzem, a békesség.

A remény, hogy egyszer majd

• függőleges igazítás tulajdonság a CSS-ben fog működni, mint ez a tábla sejt belsejébe, anélkül, hogy sokat verte az egész bokor
• Legalábbis, amelyben margin-top: auto és margin-bottom: auto, ad ugyanolyan eredmény, mint a margin-left és margin-right beállítása Auto
• A böngésző háborúk vége lesz egy napon.
• Ott majd csak egy böngészőben mindenki számára.

Töltse le a CSS és HTML a fenti megoldás van (Letöltve 446 alkalommal) .. az érthetőség, a CSS nem optimalizáltuk

PS: És egyébként is, ezek a miniatűrök néhány kép már kattintott ...

Ha a követelmény, hogy hasít a csomópont értékét az XML, amely tartalmaz egy tagolt karakterlánc érték, az egyes tételekre vonatkozóan, akkor elérte a megfelelő helyen ... vessen egy pillantást az alábbi példát. Ha ismeri egy kicsit az XML és XSL ... nem hiszem, hogy szüksége lenne minden magyarázat.
Továbbá, ez a példa is XSL használatával működik, mint xsl: call-template, xsl: substring-előtt, xsl: substring-after, ha ez az, amit ön után.

XML átalakításra (food.xml): -
Tegyük fel, hogy a feladat, hogy a string tokenize vesszővel elválasztott, a tag a "kulcsszavak"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Eredő HTML kimenet: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Mondanom sem kell ... csak megváltoztatni a paraméter "delimitr" az elválasztó választott

Ha valaha készült (vagy hogy 1) egy függőleges menü segítségével listaelemek (li) címkék és a CSS, akkor szembesülhet, ez egy újabb hiba az Internet Explorerben, ahol IE 6 betétek eltéréseinek lista elemeit tartalmazó blokk szintű elemeket, vagyis ha van szóköz között a lista elemeit a jelölést. Kösz, de kösz, az IE 7-es verzió úgy tűnik, ez a hiba mentes.
Ha, mint én, és még sok más, Ön ebbe a csapat csalódott fejlesztők, akik még, hogy az új elrendezést, az IE6 is dolgozik, akkor ez hasznosnak bizonyulhat. Vessen egy pillantást ...

Minta jelölés:

<ul id="menu">
<li> <a href="#"> Kezdőlap </ a> </ li>
<li> <a href="#"> ról </ a> </ li>
<li> <a href="#"> Szolgáltatások </ a> </ li>
<li> <a href="#"> Portfolió </ a> </ li>
<li> <a href="#"> GYIK </ a> </ li>
<li> <a href="#"> Kapcsolat </ a> </ li>
</ Ul>

Lehet, hogy hozzon létre egy CSS, hasonló, mint alább, hogy a fenti jelölés transfrom egy vertikális menüt ....

Minta CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; szélesség: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Az eredmények azt fogja látni ...

Megoldás ezt a hibát ... (módosított / hozzáadott CSS félkövér dőlt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; szélesség: 150px;
float: left; / * ez lebegett a lista elemeit tartalmazza * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ez a javítás a * /
szélesség: 100%; / * whitespace bug az IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Ha a fenti megoldás doesnot működne (ismert okok miatt csak IE6) ... próbáld inkább ezt a módszert

Csak add ezt a kiegészítő csak IE6 stílust a jelölések ...

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

Ha az XML / XSL transzformáció van a domian, akkor vannak helyzetek, amikor akarunk peice Dinamikus kódot kell használni könyvtári tételt (kell tenni újra felhasználható). Arra gondolok, talán lehetne tenni ezzel a példa világosan forgatókönyv.

Képzeld el, weboldal készítés (és XML, XSL transfroms persze), és a legtöbb az oldalak lenne Comments modul. Nos! akkor vagy másolt, vagy be ezt a kódot minden oldal sablont (amit én nem is mondom, de a karbantartást és javítást egy rémálom), vagy még jobb, ha egy include fájlt hoz létre, amely lehet húzni a ha valaha is szeretne azt az oldalt ( s) ...
Szóval hogyan hozunk létre egy XSL include file tartalmazza, és ez belülről egy másik XSL fájlt? Íme, hogyan ...

Csak azért, hogy minden egyértelmű ... itt a gyors fájlok listáját hozhatja létre ... Itt, mi lesz információ, beleértve gyümölcsök és zöldségek egy szülőoldal nevű ételt.

1. food.xml - xml fájl adatok, amelyek az átalakulás alkalmazni fogják
2. food.xsl - fő XSL fájl, amelyek át fogják alakítani a food.xml
3. inc_fruits.xsl - XSL fájl tartalmazza, hogy lehetővé teszi majd, gyümölcsök adatok
4. inc_vegtables.xsl - XSL fájl tartalmazza, hogy lehetővé teszi majd, vetetables adatok

Nem hiszem, nekem sokat magyarázni, kódok a fent említett elemeken lesz magától értetődő ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<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>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Töltse le a fenti fájlt itt (247 letöltés)

Hozzászólás IE 6, MSIE volt olyan kedves, hogy minket a fejlesztők UI hozzáadásával még néhány CSS tulajdonságok szabvány legtöbb szabványos böngészőkben. Az egyik ilyen hasznos tulajdonság "min-height". Szép egyenes továbbít tulajdonsága, amely nem igényel hosszú magyarázatot kifulladt. Amikor egy min-height egy részlege van beállítva, hogy mindig fenntartja, hogy a beállított magasság, ha a tartalom is kisebb helyet foglal, mint a házakat képes tárolni és a fontosabb (ellentétben a plain vanilla "height" tulajdon) mérlegek vagy CSS szavakat, akkor úgy viselkedik, mint egy részlege, amelynek "magassága" beállítása "auto" ...

Másoknak közülünk szegény fejlesztők, akik még mindig van szükség, hogy a CSS kódot is dolgozniuk kell az IE6, az ENSZ-elérhetőségét a "min-height" bizonyulhat hazavágja valamikor ... Donot kétségbeesés.

Szerencsére, van elég furcsa szokásai az IE-ben, hogy mi lenne arra használni, hogy előnyös, és csapkod a végig, hogy elérjük azt a célt ... azaz, hogy az osztály részlege, mintha a min-height az IE6

1. megoldás: A aláhúzás Hack [ ... Bővebben ]

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

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

---

2. megoldás: A CSS attribútum szelektor 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>


A CSS attribútum szelektor Hack kihasználja azt a tényt, a böngészők figyelmen kívül hagyja a korábbi tha IE6-1 attribútum a felhasznált választó. Megjegyzés: a követelmény másik tartályba szétválási class = "someclass". Csak a presense az osztály attribútum ezt a felosztást, felülírja az automatikus magasság vissza az Opera, Mozilla és MSIE7 majd. IE6, ami nem támogatja attribútum a felhasznált választókkal, figyelmen kívül hagyja azt.

Demo megtekintése a min-height csapkod IE6

Ha az XML és XSL, akkor lehet, hogy találkoznak, egy idő, amikor el kell játszani körül tulajdonságok és értékek az XML csomópontok benned XSL. Ők rengeteg helyszínek hosszú kifulladó erről, de egyik sem találtam voltak rövid és pontos ... Ez nem XML / XSL tutorial, de a kísérletet tenni, össze valamiféle csalás lista ...

Az XML-mintát, hogy mi dolgozunk így néz ki ...

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

Így lehetővé teszi kezdődik átalakítja a fenti XML-XSL felhasználásával

1. példa: érték kijelzése egy kiválasztott jellemző

<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 eredmény így fog kinézni

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

2. példa: a loop és megjelenítése az összes XML-attribútum nevek és értékek

<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 eredmény így fog kinézni


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


Nézd ezt a helyet, én folyamatosan frissítenek az új eredmények ...

A CSS Reset-et / a CSS-be több elem stílusok egy adott kiindulási, amely létrehozza a különböző böngészők egységességét.

Mindannyian voltak a rémálmok keresztül az írás cross-browser CSS években. Tehát amikor elkezdjük írni a CSS-t, ez a gyakorlat visszaállításához először eltávolítani / reset minden kereszt böngésző ellentmondásokat. Visszaállítja CSS, egyszerű pár sornyi CSS, hogy kezdje el a CSS, így egy tiszta bázis kezdjék építeni a után.

A CSS visszaállítja, amit általában hajlanak arra, hogy így néz ki

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}

Állítsa vissza a böngésző betűméret
Szintén fontos megjegyezni, hogy a reset került sor a böngésző betűméret a következő sort ...

html {font-size: 76%;}

A fenti CSS visszaállítja a böngésző betűméret 10 pixel, és ez lehetővé teszi, hogy működjön együtt a relatív betűméretek (ami minden fontos egy WAI megfelelés prespective)
Mert például a következő meghatározást, font-size egy span van beállítva, hogy 10 pixel, és hogy a alpont van beállítva, hogy 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}