Изражавајући ИТ

ЦСС завршен 10 година постојања ове године! Они који су око за неко време, зарађују свој хлеб (или не) користећи ЦСС, онда сте можда свесни колико смо били гладни за добар избор фонтова. Чак и са недостатком фонтова дизајнери попут оних у ЦСС Зен Гарден су искористили ЦСС бацкгроунд слика да замени фонтове у потрази за радиш неке правду у своје дизајна. Такође смо покушали Блиц / ЈаваСкрипт ® Хацкс да остваре своје циљеве дизајна. Никако то је погрешан начин да добијете фонтове желимо у нашим веб дизајна, али дефинитивно, није најпожељнији начин. и годинама веб дизајнера, попут мене, нису у потпуности ослањали на десетак фонтова за своје дизајна.

Недавна збивања у веб стандарде и формате фонтова омогућавају да се донесе текст у ХТМЛ писама другим од истих старих подразумеваних фонтова. Испоручује се у "@" фонтфаце ЦСС децлератион.

@ Фонтфаце провидс решење да се повеже са стварном датотеком фонта и преузели га са Интернета. Користећи @ фонтфаце, дизајнери могу да користе фонтове без потребе да се замрзне текст као позадинске слике. Имплементација је врло равно напред, као што је приказано у наставку, али као све добре ствари имају ЦОН део на њега, нису сви прегледачи подржавају једну врсту "фонт". Ако планирате да користите @ фонтфаце на сајту захтева цросс-бровсер подршке, онда ће морати да обезбеди изворе за различите типове-фонт исто.

1. ТруеТипе - формат дизајниран да изгледа добро на екрану. Препоручује се посебно за Виндовс бровсер (Цхроме).
2. ОпенТипе (ЦФФ) - Овај формат је бољи за рад штампања и не увек изгледају добро на Виндовсу.
3. ЕОТ - Треба овај формат ако желите да циљате Интернет Екплорер. ИЕ неће користити било који други формат. Наш ЕОТ-а ће се сматрати "Лите", јер они нису ни компримовани нити домена ограничен.
4. СВГ - Ово је КСМЛ формат подржан од стране неких прегледачима, укључујући иПхоне.
5. ВОФФ - Овај крст претраживач, веб-само слова формат је лаган (фонт подаци ави компресован) и може бити компајлиран са ТруеТипе или било ПостСцрипт (ЦФФ) цртама. Данас је подржан од стране ФиреФок 3.6 +.

Коришћење @ фонтфаце

  @ Фонт-фаце {
 фонт-фамили: 'ЦаллиграпхиФЛФРегулар';
 срц: урл ('ЦаллиграпхиФЛФ.еот');
 срц: локални ('ЦаллиграпхиФЛФ'), локална ('ЦаллиграпхиФЛФ'), урл ('ЦаллиграпхиФЛФ.вофф') Формат ('ВОФФ'), урл ('ЦаллиграпхиФЛФ.ттф') Формат ("труетипе"), урл ('ЦаллиграпхиФЛФ . СВГ # ЦаллиграпхиФЛФ ') Формат (' СВГ ');
 }
 @ Фонт-фаце {
   фонт-фамили: "Ваше писмо";
   срц: урл ("фонтови / фонт_филенаме.еот");
   срц: локални ("Алтернативна име"), локални ("Алтернатенаме"),
     УРЛ ("фонтови / фонт_филенаме.вофф") Формат ("ВОФФ"),
     УРЛ ("фонтови / фонт_филенаме.отф") Формат ("ОПЕНТИПЕ"),
     УРЛ ("фонтови / фонт_филенаме.свг # фонт_филенаме") Формат ("СВГ");
   }
 Х2 {фонт-фамили: "Ваше писмо", Грузија, сериф;} 

Као што можете видети из горе наведеном примеру, да укључи изабрани писма фонта, један мора да се повежу са скупом фонттипес за исти писма. Дакле људи се односе на њега као "Фонт Кит".
Постоје Фонт доступни Сетови који експлицитно дозвољава повезивање са ЦСС @ фонт-фаце својине на њу у оквиру уговора крајњег корисника лиценцирању (ЕУЛА).

Корисни ВебФонт ресурси:

• Фонтови који су расположиви за @ фонт-фаце уграђивање на вики страници хттп://вебфонтс.инфо/вики/индек.пхп?титле=Маин_Паге~~побј
  
• Реј Ларабие . Он је познати дизајнер фонта који је направио стотине занимљивих ТруеТипе фонтова слободно доступни за коришћење на Интернету. Његови фонтови су елегантни, декоративне, и разигран.
• Дитер Стеффманн је још једна велика слова дизајнер. И он је направио многе лепе фонтове расположиве за свакога за коришћење.
• Фонт продавница : нуди фонтове дизајниране специјално за веб употребу. Више од 30 најуспешнијих ФонтФонт породица сада су доступне као Веб ФонтФонтс. ФонтСхоп такодје има детаљан ВебФонт упутство за употребу хттп://ввв.фонтсхоп.цом/блог/невслеттерс/пдф/вебфонтфонтусергуиде.пдф~~добј
  
• Фонт Веверица : приказује све фонтове које слова Веверица нуди за употребу са @ фонт-фаце ЦСС уграђивање. Фонт Веверица нуди импресивну количину типа, чини мртвих једноставно изабрати један, а при руци нуди "комплете" - позадине по вашем избору, у неколико формата, паковања са демо ХТМЛ & ЦСС да користи веома актуелни @ фонт-фаце синтаксу . Они такође нуде начин да направите сопствени @ фонт-фаце сетове . Ако писмо желите да користите није на одговарајући начин лиценциран (они који долазе са рачунаром нису нужно у реду), генератор производи ЕОТ, СВГ, хеј! ВОФФ датотеке.

Још један брзи тут. Овде је нешто једноставно и лепо Користећи моћ ЦСС ... али је било тешко цонциеве (и то сигурно нисам ја) да се почне са. Додавање Дропсхадов, можда пеице колача за многе од нас, користећи неку слику као што су алатке за обраду Пхотосхоп АНФ Фиреворкс итд
Разлог зашто сам се определила за дроп сенке помоћу ЦСС је да, обично при прављењу странице дизајн / ХТМЛ код апликације, захтеви задржати итератинг. Хоћу да кажем, У постојећем веб сајт са пуно слика, попут оних које приказују фреиндс листу или галерију слика, то ће бити тешко да репроцесс цео оптерећења од слика које су већ истоварени да додате или уклоните сенке, за које ствар.
Дакле, ако сте урадили мало напред размишљања, док стварање ХТМЛС да додате ове додатне дивизије или обично је ситуација да имате петљу логике генерисање ове иконе / сличице у КССЛ, ПХП. ЈАВА или било који други програм / скрипт језик, можете га додати у било које време, онда је само питање емисије и скривао ове сенке помоћу ЦСС Дисплаи имовину, као по клијенте икада мењају услове ... Ја хавн'т урадио ову врсту размишљања напред пре тога ... али ахев почео сада!

У следећем примеру, оригинална слика је сенка бесплатан и дропсхадовс се примењују по потреби! Такође, сам отишао мало више, користећи трикове мог ранијег тут (Велл! ово вероватно најкраће сорта туторијала, тако да је оправдано само називајући их "Тут" 'а) око Коришћење ЦСС Цлип објекат за покажете само

Оригинална слика

ЦСС ДропСхадов Резултати

Погледај Демо се | Довнлоад соурцефилес

Зашто желим да разумем ово? Хумм ...!

Већина писаца ЦСС сложити да ЦСС цлип имовина је вероватно један од највише коришћених УН-ЦСС својства. Било је тако истина и за мене и био најсрећнији да га занемарују, док нисам почео допунама МооТоолс ДВА дугме (ПИН) клизача компоненту са опсега степена) .

Постојао је добар предлог једног од саставних корисницима да измените компоненту клизача користећи поткресаног бацкгроуд слике (против променљиве ширине поделе) да укаже на опсег клизача. Тако је дошао мој тренутак да уђу у забавно, али УН-овлашћених (за мене наравно) воде на ЦСС Цлип имовине.

Добро! Колико тешко може бити? Није уопште много ... ДА и НЕ. Синтакса за коришћење ЦСС Цлип имовине је веома усправно, али значење / усуаге је мало црооцкед. Са меморијом као што је моја, несто сам да седим обрадом на мом клизачем скрипте ... Имам токееп мислећи назад на коришћење овај клип имовине, да се подсетим логику да сам створио, у мом писму .... Отуда! Сматра се да оловком га, са надом да запамтите да будућност (као и за добробит оних који су изгледа запањен по ЦСС Цлип имовини)

Шта ЦСС цлип ради?

Клип је део визуелне ефекте модулу ЦСС 2.1. Једноставно речено, њен задатак је да ставите видљив прозор на врху објекта која се прикачен, па цлиппинг фотографија и креирање сличице, без потребе да креирате додатне датотеке (што сам већ ставио ову функцију да боље употреби на клизачу компоненте )

Коришћење ЦСС Цлип имовине, можете да креирате исечак користећи рецт облик. Као и многе друге ЦСС својства (као маргина, Преграда итд), користећи рецт захтева четири координате врх, десно, доле, лево (ТРБЛ). Црооцкед природа овог имовине одражава када изблиза погледате снимак како се израчунава клипинга регион, помоћу ова четири координате (мозак шаље у жреб за неко време). Сада да вас збуни дно почиње од врха, као и право почиње са леве стране. . Видиш шта сам рекао? .... Дакле овај пост ...

Ова мала конфузија може лако нестати, са овим визуелним објашњење ЦСС Цлип / рецт имовине као испод!

ЦСС Цлип Захтеви

Задатак смо почели да је снимак на следеће сличице у скуарер гледа слике (као и широкоугаони слика)

Оригинални Тхумбнал / Слика	Цлип Захтеви за Скауре Тхумбмаил

ЦСС Цлип Резултати

Погледај Демо се | Довнлоад соурцефилес

Пре него што смо имали да се носе са ЦСС-ом да креирате своје распореде странице, усклађивању неки садржај унутар ћелије табеле изгледало само дечија игра. Једноставно подесите "алигн" или "валигн" власништво табеле да имају поравнање по вашем избору, комад торте!
Са ЦСС распореда, мада имамо "вертицал-алигн" имовину за елементе, не изгледа да буде једноставно као "алигн" или "валигн" својстава. Да би више специфииц "вертицал-алигн" никада не изгледа да реши ниједан од ваших проблема, посебно ако се напише комад крос-бровсер ЦСС.

Без коришћења ХТМЛ табела, ПРОБЛЕМ центрирање на објекту, било да слика или неки текст који садржи унутар поделе, вероватно је био сваки УИ / ЦСС програмери ноћна мора у неком тренутку. Овај проблем додатно ектраполатес ваше бриге о усклађивању, ако објекат да буде центриран је динамичан у природи, односно када је њена висина је променљива (непозната висина).

Иако не постоји познати равно напред решење које ће радити преко опсега претраживача морамо бавити, решење које сам покушао да дође изгледа да раде у неколико прегледачима које сам пробао у (ИЕ6, ИЕ 7 , фф).

РЕШЕЊЕ:
У прегледачима као што су Мозилла, Опера и Сафари и чудно се понаша "вертицал-алигн" имовина може бити изведени пред својим чулима, једноставно постављање "Екран" имовину која садржи поделе на "стони ћелије" (приказ: табела-ћелија) .

Проблем и даље остаје са ИЕ бровсер породице, који, ипак изгледа да не разуме шта то са "табле-целл" имовине и незналице као што су они, само они га игноришу. Решење дато у наставку, иако једноставне, рекламе неколико ДОМ више елемената у ХТМЛ да би се ствари дешавају.

ЦСС и ХТМЛ изгледа овако
.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;
}

ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер">
<див цласс="обј"> <имг срц="имаге1.јпг"/> <бр/> виевс: 3456 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

видите овде демо се | Довнлоад изворне датотеке (Довнлоадед 452 тимес)

ТОП Поравнај ЦСС
.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;
}

ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_топ">
<див цласс="обј_топ"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

БОТТОМ Поравнај ЦСС
.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;
}
ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_боттом">
<див цласс="обј_боттом"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

видите овде демо | Довнлоад овде

Изгледа као стари, јер сам покушавао да пронађе разумно решење овог проблема поравнање. Али сада са овим решењем, осећам се мало на миру.

Са надом да Сомедаи

• вертикално поравнавање-имовина у ЦСС ће радити као да ради унутар ћелије табеле, без потребе да се пуно туку око грма
• У најмању руку, подешавање маргин: ауто и маргин-боттом: Ауто, даће као резултат исти као и са паддинг-лефт и маргин-боттом подесити на Ауто
• У Бровсер ратови ће бити у неком дану.
• Ту ће само ЈЕДАН претраживач за СВЕ.

Преузмите ЦСС и ХТМЛ горе наведеног решења овде (Довнлоадед 452 тимес) .. за разумљивост, ЦСС није оптимизована

ПС: И узгред, они су сличице неких слика које сам кликнули ...

Ако је ваш захтев је да подели чвор вредност у КСМЛ, који садржи одредјену низ вредности, у појединим ставкама, онда сте стигли на право место ... имају поглед на следећем примеру. Ако сте упознати са мало КСМЛ и КССЛ ... Ја не мислим да би било потребно никакво објашњење.
Такође, овај пример укључује коришћење КССЛ функција као што су: Цалл КССЛ-предлошка, КССЛ: субстринг-пре, КССЛ: субстринг-после, ако је то оно што сте после.

КСМЛ да се трансформишу (фоод.кмл): -
Претпоставимо да је задатак токенизе раздвојен зарезом ниске, у овим тагом "кључних речи"

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

КССЛ (фоод.ксл): -

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

Резултанта излаз ХТМЛ је: -

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

Непотребно је рећи ... само промените параметар "делимитр" на раздвајање по вашем избору

Ако сте икада направили (или што један) вертикални мени помоћу ставки листе (ЛИ) ознаке и ЦСС, можда ћете наићи, то још једна грешка у Интернет Екплореру, где ИЕ 6 умеће ове празнине између ставки листе које садрже блок на нивоу елемената, односно ако постоји размак између ставки листе у ознакама. Хвала, али не хвала, ИЕ верзија 7 изгледа без овог буг.
Ако попут мене, и још много тога, ви припадате овом бенду од фрустрираних програмере, који тек треба да добије своје нове распореде, радећи у ИЕ6 превише, онда би то могло показати корисним. Погледајте ...

Пример назнаке:

<ул ид="мену">
<ли> <а хреф="#"> Почетна </ а> </ п>
<ли> <а хреф="#"> О </ а> </ п>
<ли> <а хреф="#"> Услуге </ а> </ п>
<ли> <а хреф="#"> портфолио </ а> </ п>
<ли> Питања <а хреф="#"> </ а> </ п>
<ли> <а хреф="#"> Контакт </ а> </ п>
</ Ул>

Можда створе неку ЦСС, као један испод, да трансфром горе назнаке у вертикалном менију ....

Узорак ЦСС ...
# Мени {
маргин: 0; паддинг: 0; бацкгроунд: # ФФ9900;
лист-стиле-типе: ноне; ширина: 150пк;
}
# Мени ли {маргин: 0; паддинг: 0;}
# Мени {дисплаи: блоцк;
цолор: # 555555;
тект-алигн: лефт;
паддинг: 15пк 0;
лине-хеигхт: 2.5; бордер-боттом: 1пк солид # ФФФ;
}

Резултати ћете видети ...

Решење за овај буг ... (пут / аддед ЦСС масним курзивом)

# Мени {
маргин: 0; паддинг: 0; бацкгроунд: # ФФ9900; лист-стиле-типе: ноне; ширина: 150пк;
флоат: лефт; / * ово садржи флоатед ставки листе * /
}
# Мени ли {
маргин: 0; паддинг: 0;
флоат: лефт; / * Ово грешке * /
Ширина: 100%; / * размак грешка у ИЕ6 * /
}
# Мени {
дисплаи: блоцк; цолор: # 555555;
тект-алигн: лефт;
паддинг: 15пк 0;
лине-хеигхт: 2.5; бордер-боттом: 1пк солид # ФФФ;
}

Ако горе решење доеснот изгледа да раде (из разлога познатих само ИЕ6) ... пробајте овај метод уместо

Само додајте ове стилове додатне ИЕ6 само то иоур ознакама ...

<- [Иф лт ИЕ 7>
<стиле типе="тект/цсс">
# Мени ли {дисплаи: инлине-блоцк;}
# Мени ли {дисплаи: блоцк;}
</ Див>
<[Ендиф] ->

Ако КСМЛ / КССЛ трансформација је ваш домиан, онда постоје тренуци када желимо пеице динамичког кода који ће се користити библиотеку ставку (да се поново употребљив). Шта хоћу да кажем, вероватно се може учинити са овом примеру јасно сценарио.

Замислите да креирате сајт (и коришћењем КСМЛ, КССЛ трансфромс наравно) и већина страна имати Коментари модул. Добро! онда или копирате или налепите овај код на свакој страници шаблона (што да не немам реци, али се одржавање и дорада ноћну мору) или, још боље, направите УКЉУЧИТИ фајл који би могао да се повуче у где год ви то желите на вашој страници ( е) ...
Дакле, како ћемо направити КССЛ УКЉУЧИТИ фајл и укључује га у другој КССЛ фајл? Ево како ...

Само да се ствари јасно ... овде је брз списак датотека које би сте креирали ... овде, ми ћемо бити укључујући информације о воћа и поврћа у матичној страни се зове храна.

1. фоод.кмл - КСМЛ датотека са подацима на којима ће трансформација бити примењена
2. фоод.ксл - главни КССЛ фајл, који ће трансформисати наше фоод.кмл
3. инц_фруитс.ксл - КССЛ фајл који укључују пружаће воћа податке
4. инц_вегтаблес.ксл - КССЛ фајл који укључују пружаће вететаблес податке

И донт мислим да имам много објасним, кодови за наведене елементе, биће само објашњења ...

ФООД.КСМЛ


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

<хр/>
</ БОДИ>
</ Хтмл>
</ Кссл: темплате>
</ КССЛ: стиловима>

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

Преузмите све горе наведене фајлове овде (254 Довнлоадс)

Пост ИЕ 6, Виндовс НТ је био љубазан да нам УИ девелопер додавањем још неколико ЦСС својства стандардне за већину осталих стандардних претраживача. Један такав користан имовина у "мин-висине". Прилично равно напред имовина која не захтева дуго даха објашњење. Када мин-хеигхт за поделу подешено, он увек задржава тог скупа висину када садржаја куће заузима мање него што може да држи и важније (за разлику од обичног ваниле "хеигхт" имовине) скала или у ЦСС речима, она се понаша као Подела чије "хеигхт" је постављен на "ауто" ...

За неке од нас сиромашних програмера, који још увек се тражи да код ЦСС који такође морају да раде у ИЕ6, не-доступност "мин-хеигхт", могли да докажу негде запушачем схов ... Донот очај.

Срећом, имамо довољно куиркс у ИЕ, да бисмо користе за излаз предност и пијук кроз наш начин да се постигне наш циљ ... ​​тј направити поделу СЕКТОРА као да је његова висина мин у ИЕ6

Решење 1: Користећи доњу Хацк [ ... реад море ]

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

ХТМЛ је: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Решење 2: Коришћење ЦСС својстава Селектор Хацк

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

ХТМЛ је: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


ЦСС Пијук Селектор Атрибут узима предност од чињенице да прегледачи раније Тха ИЕ6 игнорисала атрибуте-селектора. Обратите пажњу на услов другу посуду подели са цласс = "сомецласс". Само пресенсе у цласс атрибут за ове поделе, замењује висину назад у ауто за Опера, Мозилла и МСИЕ7 и касније. ИЕ6, који не подржава селекторе атрибуте, да га игнорише.

Погледајте демонстрацију на мин-хеигхт хацк за ИЕ6

Ако користите КСМЛ и КССЛ, онда сте можда наишли на време, када морате да играте са атрибутима и вредностима КСМЛ чворова у вама КССЛ-а. Они су гомила сајтова са дугог даха информација о овоме, али ни сам нашао биле су кратке и јасне ... ово није КСМЛ / КССЛ туториал, али мој покушај да се стави-заједно неку врсту варања листи ...

Узорак КСМЛ да ћемо рад са изгледа овако ...

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

Дакле Летс почети трансформацију наше горе КСМЛ помоћу КССЛ

Пример 1: Приказујем вредност на изабрани атрибута

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

ХТМЛ резултат ће изгледати

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

Пример 2: лоопинг кроз приказивање и све КСМЛ атрибут Имена и њихове вредности

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

ХТМЛ резултат ће изгледати


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


Погледајте овај простор, ја ћу ажурирати овај са новим сазнањима ...

ЦСС Ресетуј је / су ЦСС да бисте подесили низ елемената стилова на одређени основне линије која ствара конзистентност различитим прегледачима.

Сви смо били кроз кошмара писања крос-прегледач ЦСС-а. Дакле, када смо започели нашу писања ЦСС, то је пракса да се вратите прво да уклони / ресетовати било унакрсне недоследности претраживача. ЦСС Ресетује, су једноставни неколико редова ЦСС-а да почнете са ЦСС, дајући вам чисту базу за почетак изградње на вашем.

ЦСС ресетује да сам обично имају тенденцију да користе изгледа овако

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

ол, ул {
лист-стиле: ноне;
}

Х1, Х2, Х3, Х4, Х5, х6 {
фонт-сизе: 100%;
фонт-веигхт: нормал;
}

Ресетуј величину фонта претраживача
Такође имајте на уму ресетовање који је примењен на величину фонта у прегледачу следећој линији ...

html {font-size: 76%;}

Изнад ЦСС ресетује претраживач величина фонта на 10 пиксела, а управо то омогућава да раде са релативним величина фонта (који је важан сваки од ВАИ складу преспецтиве)
На пример, у следећој дефиницији, фонт-сизе у распону подешен на 10 пиксела и да је у парагарпх подешен на 14 пиксела ...

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