Wyrażając

CSS ukończone 10 lat istnienia tego roku! Ci, którzy już od jakiegoś czasu, zdobywając swój chleb (lub nie) za pomocą CSS, to może świadomość, w jaki sposób zostaliśmy głodujących na dobry dobór czcionek. Nawet przy braku czcionek projektantom, jak te na CSS Zen Garden skorzystało z obrazów CSS tła, aby zastąpić czcionki w dążeniu do jakiejś sprawiedliwości ich wzorów. Mamy również próbował Flash / JavaScript ® hacki do osiągnięcia naszych celów projektowych. W żadnym wypadku nie jest to zły sposób, aby czcionki pragniemy w naszych projektach internetowych, ale na pewno nie jest najbardziej pożądanym sposobem. i ponad web designer lat, jak ja, w pełni oparła się na kilkunastu czcionek dla swoich projektów.

Ostatnie zmiany w standardach sieciowych i formatów czcionek pozwalają na renderowanie tekstu HTML w krojach innych niż tych samych czcionek starych fabrycznych. Przychodzi w "@ fontface" decleration CSS.

@ Fontface provids rozwiązania odnośnik do konkretnego pliku czcionki i pobrać go z internetu. Pomocą @ fontface, projektanci mogą używać czcionek bez konieczności zamrożenia tekst jako obrazów tła. Implementacja jest bardzo prosta, tak jak pokazano poniżej, ale jak wszystkie dobre rzeczy mają CON części do niego, nie wszystkie przeglądarki obsługują jeden "typ czcionki". Jeśli planujesz używać fontface @ w miejscu z konieczności wzajemnego wsparcia przeglądarki, wtedy musisz podać źródła do różnych czcionek-typy sam.

1. TrueType - format zaprojektowany dobrze wyglądać na ekranie. Zalecana szczególnie dla Windows przeglądarek (Chrome).
2. OpenType (CFF) - Ten format jest lepszy dla prac do druku i nie zawsze dobrze wyglądać w systemie Windows.
3. EOT - Musisz tego formatu, jeśli chcesz kierować Internet Explorer. IE nie użyje innego formatu. Nasza EOT, byłby uważany za "Lite", ponieważ są one ani ściskany ani domeny ograniczone.
4. SVG - To jest format XML obsługiwany przez niektóre przeglądarki, w tym iPhone'a.
5. WOFF - Ten cross-browser, web-jedyny format czcionki jest lekki (czcionka dane zip skompresowany) i mogą być kompilowane z obu TrueType lub PostScript (CFF) kontury. To jest obecnie obsługiwany przez Firefoksa 3.6 +.

Pomocą @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: lokalne ("CalligraphyFLF"), lokalny ("CalligraphyFLF"), url ('CalligraphyFLF.woff ") format (" WOFF "), url (' CalligraphyFLF.ttf") format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ") format (" SVG ");
 }
 @ Font-face {
   font-family: "Twój Krój";
   src: url ("fonts / font_filename.eot");
   src: lokalne ("Alternate name"), lokalny ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("fonts / font_filename.svg Miejsce font_filename") format ("SVG");
   }
 h2 {font-family: "Twoja krój", Gruzja, serif;} 

Jak widać z powyższego przykładu, aby włączyć wybrany krój czcionki, trzeba połączyć z zestawem fonttypes dla tego samego kroju pisma. Stąd ludzie o nim jako o "zestaw czcionek".
Istnieje czcionki Zestawy dostępne jawnie pozwala na łączenie z znaku @ CSS font-face własności do niego pod Umowie Licencyjnej Użytkownika Oprogramowania (EULA).

Przydatne zasoby WebFont ceny:

• Czcionki dostępne dla @ font-face osadzania stronie wiki w http://webfonts.info/wiki/index.php?title=Main_Page~~pobj
  
• Ray Larabie . On jest znany projektant czcionki, który złożył setki ciekawych czcionek swobodnie dostępne do użytku w internecie. Jego czcionki są eleganckie, dekoracyjne i zabawy.
• Dieter Steffmann to kolejny wielki projektant czcionki. On też dokonał wielu pięknych czcionek dostępne dla każdego.
• Sklep czcionki : oferuje czcionki zaprojektowane specjalnie do użytku internetowej. Ponad 30 z najbardziej udanych rodzin FontFont są teraz dostępne jako FontFonts internetowych. FontShop również szczegółowy użytkownika WebFont przewodnik http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj
  
• Wiewiórka czcionki : prezentuje wszystkie czcionki, że wiewiórki Font oferuje do użytku z @ font-face osadzania CSS. Wiewiórka Font oferuje imponującą ilość rodzaju, sprawia, że ​​żyje prosty wybrać jeden, i dłoń "oferuje zestawy" - krój pisma do wyboru, w kilku formatach, zapakowane z demo HTML i CSS, który używa bardzo aktualny @ font-face składni . Oferują one również sposób tworzenia własnych @ font-face zestawy . Jeżeli krój chcesz korzystać został licencjonowany odpowiednio (te, które pochodzą z komputerem nie zawsze są w porządku), generator wytwarza EOT, SVG, i hej! Pliki WOFF.

Kolejny szybki tut. Oto coś łatwa i przyjemna, wykorzystując moc CSS ... ale trudno było concieve (i na pewno nie ja), aby rozpocząć. Dodawanie Dropshadow, może być peice z masłem dla wielu z nas, za pomocą jakiegoś narzędzia do edycji zdjęć, jak Photoshop ANF Fireworks itp.
Dlatego, że zdecydował się na cień za pomocą CSS jest to, że zwykle podczas tworzenia projektu strony / html wniosku, wymogi utrzymania iteracji. Chodzi mi o to, W istniejącej strony internetowej z wielu obrazów, podobnych do wyświetlania listy freinds lub galerię zdjęć, trudno będzie powtórnie przetworzyć cały ładunek zdjęć, które zostały już rozładowane, aby dodać lub usunąć cienie, na które sprawa.
Tak Jeśli zrobiłeś trochę przyszłościowe myślenie podczas tworzenia HTMLS dodać te dodatkowe podziały i zazwyczaj sytuacja jest taka, że ​​masz Logic pętli generowanie tych ikon / miniatur w XSL, PHP. JAVA lub inny programowania / skryptowy język, można go dodać w każdej chwili, to jest tylko kwestia show i ukrywa te cienie, korzystając z właściwości wyświetlanych CSS, jak na klientów wciąż zmieniających się wymagań ... Ja havn't zrobić tego rodzaju przyszłościowe myślenie przed tym ... ale ahev już teraz!

W poniższym przykładzie, oryginalny obraz jest cień za darmo i dropshadows są stosowane zgodnie z wymaganiami! Również I już trochę więcej, za pomocą sztuczek moim wcześniejszym Tut w Well! te są prawdopodobnie najkrótsza wiele tutoriali, więc jest uzasadnione tylko nazywając je "Tut" 's) o Korzystanie obiekt Klip CSS dla popisać tylko

Obraz oryginalny

Wyniki CSS DropShadow

Zobacz demo | DLA Pobierz sourcefiles

Dlaczego chcę to zrozumieć?? Humm ...!!

Większość pisarzy CSS zgodzi się, że nieruchomość Klip CSS to chyba jedna z najbardziej nie-używanych właściwości CSS. To było tak prawdziwe dla mnie i był najbardziej szczęśliwy zaniedbywać go, dopóki nie zacząłem modyfikacji mootools DWA pokrętło (Pin) składnika Slider (ze wskaźnikiem odległości) .

Nie było dobra propozycja od jednego z użytkowników składowych do modyfikacji składnika Slider używając przycięte backgroud zdjęcia (przed podziałem zmiennej szerokości), aby wskazać zakres suwaka. Tak więc przyszedł mój czas, aby wejść do zabawy, ale nie-biegłego (dla mnie ofcourse) Wody własności CSS Clip.

Dobrze! jak trudne to może być? Nie bardzo w ogóle ... TAK i NIE. Składnia do dysponowania nieruchomością Klip CSS jest dość prosto, ale sens / usuage jest nieco croocked. Z pamięcią jak moja, za każdym razem siadam do przerobienie na mojego skryptu Slider ... Mam tokeep nawiązując do wykorzystania tej właściwości CLIP, aby przypomnieć sobie logikę, że stworzyłem w moim skrypcie .... Stąd! Uważa się, że pióro go, z nadzieją na jego zapamiętanie, przyszłość (a także dla dobra tych, którzy wydają przekraczały przez właściwość CSS FILMU)

Co Klip CSS zrobić?

Klip jest częścią wizualnego module efektów CSS 2.1. Po prostu, jej zadaniem jest umieszczenie widocznym oknie na górze obiektu, który jest przycięty, stąd obcinania zdjęć i tworzenie miniatur bez konieczności tworzenia dodatkowych plików (mam już umieścić tę funkcję do lepszego wykorzystania w składniku Slider )

Korzystanie z własności CSS Clip można utworzyć wycinek za pomocą kształt prawidłowy. Podobnie jak wiele innych właściwości CSS (jak marży itp padding), z wykorzystaniem rect wymaga cztery współrzędne Góra, Prawo, Dół, Lewo (TRBL). Croocked charakter tego majątku odzwierciedla kiedy przyjrzeć się bliżej, jak klip oblicza region przycinania, używając tych czterech (wysyła mózg do wrzucić na chwilę). Teraz mylić cię dół rozpoczyna się od góry, a prawo zaczyna się od lewej strony. . Widzisz to, co powiedziałem? .... Stąd ten post ...

To małe zamieszanie może łatwo zniknąć, z tego wizualnego wyjaśnienia Klip / rect CSS nieruchomości jak poniżej!!

Wymagania CSS Klips

Zadaniem zaczęliśmy jest klip następujące miniatury do kwadratowy obrazu w przyszłość (i również szerokokątny obraz)

Oryginalny Thumbnal / Grafika	Wymagania Klip do Sqaure Thumbmail

Wyniki CSS Klips

Zobacz demo | DLA Pobierz sourcefiles

Zanim mieliśmy do czynienia z CSS do tworzenia naszych układów stron, ustawiając pewne treści wewnątrz komórki tabeli wydawała się dziecinnie prosta. Wystarczy ustawić "align" lub "valign" własność tabeli, aby mieć wyrównanie do wyboru, bułka z masłem!
Z układów CSS, choć mamy "vertical-align" własności dla elementów, nie wydaje się być tak proste jak "align" lub "valign" właściwości. Aby być bardziej konkretną "vertical-align" nigdy się nie rozwiąże żadnego z problemów, zwłaszcza jeśli są napisać kawałek cross-browser CSS.

Bez użycia tabel HTML, PROBLEM centrowania na obiekcie, czy to obraz lub fragment tekstu wewnątrz zawierających podział, był prawdopodobnie każdy UI / CSS koszmar deweloperzy w pewnym momencie. Ten problem dalej ekstrapoluje swoje obawy z dostosowania, jeśli obiekt się koncentrować jest dynamiczny charakter, tzn. gdy jego wysokość jest zmienna (nieznane wysokość).

Choć nie ma znany proste rozwiązanie, które będzie działać w całej gamie przeglądarek mamy do czynienia, rozwiązanie, które starałem się dotrzeć nie wydają się działać w kilku przeglądarkach, że próbowali go (IE6, IE 7 , FF).

ROZWIĄZANIE:
W przeglądarkach takich jak Mozilla, Opera i Safari, dziwnie zachowujących się "vertical-align" nieruchomość może być wniesiona do swoich zmysłów, poprzez ustawienie "display" własność zawierających podział na "table-cell" (display: table-cell) .

Problemem pozostaje z IE rodziny przeglądarek, którzy jeszcze nie wydają się zrozumieć, co do z "table-cell" nieruchomości i nieświadomych, ponieważ są one po prostu zignorować. Rozwiązanie podane poniżej, choć proste, reklamy kilku elementów do kodu HTML do zdziała więcej DOM.

CSS i HTML wygląda tak
.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/> widoki: 3456 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Obejrzyj demo tutaj | DLA Pobieranie plików źródłowych (pobrany 452 razy)

TOP Wyrównaj 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/> widoki: 1234 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Bottom Wyrównuje 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/> widoki: 1234 </ div>
</ Div>
</ Div>

Wynik wygląda tak: -

Obejrzyj demo tutaj | Pobierz tutaj

Wygląda na wieki, ponieważ starałem się znaleźć rozsądne rozwiązanie tego problemu wyrównania. Ale teraz z tego rozwiązania, czuję się jak w małym pokoju.

Z nadzieją, że kiedyś

• pionowe wyrównanie własności w CSS będzie działać tak jak to robi wewnątrz komórki tabeli, bez konieczności pokonać wiele w bawełnę
• Przynajmniej, ustawienie margin-top: auto i margin-bottom: auto, da się taki sam wynik jak z margin-left i margin-right ustawione na auto
• Wojny przeglądarek będzie się pewnego dnia.
• Nie będzie tylko jednym z przeglądarką dla ALL.

Pobierz CSS i HTML w powyższy sposób roztwór tutaj (pobrany 452 razy) .. dla zrozumiałości, CSS nie jest zoptymalizowana

PS: A swoją drogą, to są miniaturki niektórych zdjęciach mam kliknęli ...

Jeśli wymogiem jest, aby podzielić węzła wartość w formacie XML, który zawiera łańcuchem znaków rozdzielonych wartości do poszczególnych elementów, to osiągnie właściwe miejsce ... spojrzeć na poniższy przykład. Jeśli jesteś zaznajomiony z odrobiną XML i XSL ... Nie sądzę, by trzeba żadnych wyjaśnień.
Również ten przykład obejmuje korzystanie z funkcji XSL jak xsl: call-template, xsl: substring-before, xsl: substring-after, jeśli to, co jesteś po.

XML do transformacji (food.xml): -
Załóżmy, że zadanie to tokenize na string ograniczoną przecinkiem, w tag "słów kluczowych"

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

Wynikowy wyjście HTML: -

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

Nie trzeba dodawać ... po prostu zmienić parametr "delimitr" do ogranicznika do wyboru

Jeśli kiedykolwiek dokonane (lub co jeden) pionowe menu przy użyciu elementów listy (li) tagi i CSS, jakie można napotkać, to kolejny błąd w przeglądarce Internet Explorer, gdzie IE 6 Wkładki te luki pomiędzy elementami list zawierających elementy poziomie bloków, w tzn. jeśli istnieje białe znaki między elementami listy w kodzie. Dzięki, ale nie dzięki, wersja IE 7 wydaje się wolny od tego błędu.
Jeśli tak jak ja i wiele innych, należysz do tej bandy sfrustrowanych twórców, którzy nadal muszą dostać swoje nowe układy, pracujące w IE6 też, to może okazać się przydatne. Zapraszamy do obejrzenia ...

Markup próbki:

<ul id="menu">
<li> <a href="#"> Strona główna </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> Usługi </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt z nami </ a> </ li>
</ Ul>

Możesz stworzyć jakiś CSS, podobny do tego poniżej, aby transfrom powyższy znaczników w pionowym menu ....

Przykładowy CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Wyniki można zobaczyć ...

Rozwiązanie dla tego błędu ... (zmodyfikowany / dodany CSS pogrubioną kursywą)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * to zawiera płynęły elementów listy * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * to poprawki * /
szerokość: 100%; / * błąd białe znaki w IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Jeśli powyższe doesnot rozwiązanie wydaje się działać (z powodów znanych tylko IE6) ... spróbować tej metody zamiast

Wystarczy dodać te dodatkowe IE6 tylko style do znaczników ...

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

Jeśli XML / XSL Transforms jest twój Domian, to są chwile, kiedy chcemy peice Dynamic którego należy użyć elementu biblioteki (należy dokonać ponownego użytku). Co mam na myśli, prawdopodobnie mogłyby być bardziej wyraźne w tym scenariuszu przykład.

Wyobraź sobie, że stworzenie strony internetowej (i za pomocą XML, XSL transfroms ofcourse) i większość stron będzie miała moduł Komentarze. Dobrze! następnie skopiować lub wkleić ten kod do każdego szablonu strony (co nie mam powiedzieć, ale uczynić konserwację i przerobienie koszmar) lub jeszcze lepiej, utworzyć INCLUDE plik, który mógłby zostać zainstalowane gdziekolwiek chcesz go na swojej stronie ( s) ...
Jak więc utworzyć plik XSL INCLUDE i umieścić go wewnątrz innego pliku XSL? Oto jak ...

Aby sprawę jasno ... tutaj jest szybki listę plików, które można utworzyć ... tutaj, będziemy w tym informacje o owoce i warzywa do strony macierzystej zwanej żywności.

1. food.xml - xml pliku danych, w której transformacja będzie stosowana
2. food.xsl - główny plik XSL, która przekształci naszą food.xml
3. inc_fruits.xsl - XSL zawiera plik, który uniemożliwi owoce danych
4. inc_vegtables.xsl - XSL zawiera plik, który uniemożliwi dane vetetables

Ja tego nie zrobiłem że muszę wyjaśnić dużo, kody do powyższych elementów, będzie oczywista ...

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>

Pobierz wszystkie powyższe pliki w tym miejscu (252 pliki do pobrania)

Napisz IE 6, Firefox był na tyle uprzejmy dla nas programistów interfejsu użytkownika, dodając kilka dodatkowych właściwości CSS standardowe dla większości innych standardowych przeglądarek. Jednym z takich przydatna właściwość w "min-height". Dość prosta właściwość, że nie potrzebuje dużo dmuchania wyjaśnienia. Kiedy min-height dla podziału jest ustawiony, to zawsze zachowuje ten height, gdy zawartość mieści się zajmuje mniej niż może pomieścić i ważniejsze (w przeciwieństwie do zwykłego vanilla "wysokości" majątku) Wagi lub słownie CSS, zachowuje się jak Podział których wzniosłość jest ustawiony na "auto" ...

Dla niektórych z nas biednych deweloperów, którzy nadal są zobowiązane do kodu CSS, które muszą również działać w IE6, nie-dostępność "min-height", może okazać się korek pokazu kiedyś ... rozpacz dawca.

Na szczęście mamy tyle dziwactw w IE, które moglibyśmy wykorzystać na korzyść out i włamać naszą drogę, aby osiągnąć nasz cel ... czyli dokonania podziału DIVISION jakby jego min-height w IE6

Rozwiązanie 1: Użycie podkreślenia Hack [ ... Czytaj więcej ]

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

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

---

Rozwiązanie 2: Za pomocą atrybutów 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>


Atrybut CSS Selector Hack korzysta z faktu, że przeglądarki wcześniej tha IE6 ignorowany Atrybut o wybierak. Zwróć uwagę na wymóg innego rejonu zbiornika z class = "SomeClass". Wystarczy presense tego atrybutu klasy dla tego podziału, nadpisuje wysokość z powrotem na auto dla Opery, Mozilli i MSIE7 i późniejszych. IE6, który nie obsługuje selektory Atrybut, ignoruje go.

Zobacz demo min-height hack dla IE6

Jeśli korzystasz z XML i XSL, to mogłeś natknąć się na czas, kiedy trzeba się bawić z atrybutów i wartości węzłów XML w was XSL. Są one mnóstwo stron z długim nawijanej informacji na ten temat, ale żaden znalazłem były krótkie i precyzyjne ... To nie jest XML / XSL TUTORIAL, ale moja próba put-razem jakieś Cheat listy ...

Próbka XML, że będziemy pracować z wygląda tak ...

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

A więc zaczynamy przekształcając naszą powyżej XML przy użyciu XSL

Przykład 1: Wyświetlanie wartości w wybranym Atrybut

<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 wynik będzie wyglądał

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

Przykład 2: krążący i wyświetlając wszystkie XML nazwy atrybutów i ich wartości

<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 wynik będzie wyglądał


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


Obserwuj ten miejsca, będę aktualizacji to z nowymi ustaleniami ...

Resetowanie CSS jest / są CSS ustalić liczbę stylów elementów do konkretnej wartości wyjściowej, która tworzy spójność w różnych przeglądarkach.

Wszyscy byli przez koszmary pisania cross-browser CSS-tych. Kiedy więc zacząć pisać nasz kod CSS, to jest praktyka, aby zresetować go najpierw usunąć / wyzerować wszystkie krzyżowe niespójności przeglądarki. CSS Resetuje, są proste kilka linijek CSS, aby rozpocząć z CSS, co daje czystą bazę do rozpoczęcia budowania na.

CSS resetuje, że zazwyczaj mają tendencję do używania wygląda tak

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

Resetować rozmiar czcionki przeglądarki
Należy również pamiętać, reset, który został zastosowany do rozmiaru czcionki przeglądarki w kolejnym wierszu ...

html {font-size: 76%;}

Powyżej CSS resetuje rozmiar czcionki przeglądarki na 10 pikseli, a to pozwala na pracę z względnych rozmiarów czcionek (co jest każdy ważny od spełnienia WAI prespective)
Na przykład, w następującej definicji, font-size w okres jest ustawiony na 10 pikseli i że w paragarph jest ustawiona na 14 pikseli ...

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