Висловлюючи IT

CSS завершені 10 років існування в цьому році! Ті, хто були навколо протягом деякого часу, заробляючи собі на хліб (чи ні) за допомогою CSS, то ви, можливо, знають, як ми голодували за хороший вибір шрифтів. Навіть при відсутності шрифтів дизайнерів, таких як ті, в CSS Zen Garden зробили використання зображень CSS фон для заміни шрифтів в прагненні робити деякі правосуддя у свої проекти. Ми також спробували Flash / JavaScript ® хакі для досягнення наших цілей дизайн. Ні в якому разі це неправильний шлях, щоб отримати шрифтів ми хочемо в нашому веб-дизайну, але, безумовно, це не самий бажаний спосіб. і на веб-дизайнером року, як я, повністю покладався на десять або близько того шрифти для своїх проектів.

Новітні розробки в області веб-стандарти і формати шрифтів дозволяють зробити текст в HTML-шрифтів, крім тих же старих шрифтів. Приходить в "@ fontface" decleration CSS.

@ Fontface provids рішення посилання на сам файл шрифту і витягти його з Інтернету. Використання @ fontface, розробники можуть використовувати шрифти без заморожування текст в якості фонового зображення. Реалізація дуже прямо вперед, як показано нижче, але, як і всі хороші речі мають CON частини до нього, не всі браузери підтримують один "тип шрифту". Якщо ви плануєте використовувати @ fontface на сайті з вимогою підтримку крос-браузер, то ви повинні будете надати джерел різних типів шрифтів того ж самого.

1. TrueType - формат, розроблений, щоб добре виглядати на екрані. Рекомендовані особливо для Windows, браузерів (Chrome).
2. OpenType (ФФБ) - це формат краще для друку роботи і не завжди добре виглядати на Windows.
3. СРВ - Ви потребуєте в цьому форматі, якщо ви хочете націлити Internet Explorer. IE не буде використовувати будь-який інший формат. Наші СРВ було б вважати "Lite", оскільки вони не є ні стислі ні доменів обмежена.
4. SVG - це XML-формат, підтримуваний деякими браузерами, включаючи iPhone.
5. WOFF - це крос-браузерна, веб-шрифтів формату тільки легкий (шрифт дані поштову стиснений) і може бути зібраний як з TrueType або PostScript (CFF) описує. В даний час підтримуються FireFox 3.6 +.

Використання @ fontface

  @ Шрифт особі {
 сімейство шрифтів: "CalligraphyFLFRegular;
 SRC: URL ('CalligraphyFLF.eot');
 SRC: місцеві («CalligraphyFLF), місцеві (« CalligraphyFLF), гіперпосилання ('CalligraphyFLF.woff) формату ("WOFF), гіперпосилання (' CalligraphyFLF.ttf) формату (" TrueType "), URL-адресу (" CalligraphyFLF . SVG # CalligraphyFLF) формату ("SVG");
 }
 @ Шрифт особі {
   сімейство шрифтів: "Ваш шрифт";
   SRC: URL ("Шрифти / font_filename.eot");
   SRC: місцеві («Альтернативні назви"), місцеві ("Alternatename"),
     URL ("Шрифти / font_filename.woff») формату ("WOFF"),
     URL ("Шрифти / font_filename.otf») формату ("OpenType"),
     URL ("Шрифти / font_filename.svg # font_filename») формату ("SVG");
   }
 h2 {сімейство шрифтів: "Ваш шрифт", Грузія, засічок;} 

Як ви можете бачити з наведеного вище прикладу, щоб включити вибраний шрифт шрифтом, потрібно пов'язати з набором fonttypes по тим же шрифтом. Тому люди ставляться до нього як "Font Kit".
Є набори шрифтів доступні, що дозволяє явно зв'язок з CSS @ шрифт особі майно під Ліцензійну угоду з кінцевим користувачем (EULA).

Корисні ресурси WebFont:

• Шрифти для @ шрифт особі вкладення вікі-сторінок в http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Він є відомим дизайнером шрифтів, який зробив сотні цікавих TrueType шрифти у вільному доступі для використання в Інтернеті. Його шрифти елегантний, декоративні, і грайлива.
• Дітер Steffmann ще один чудовий дизайнер шрифту. Він теж зробив багато гарних шрифтів, доступних для будь-якого використання.
• Шрифт магазин : пропонує шрифти, розроблені спеціально для використання мережі. Більше 30 найуспішніших сімей FontFont тепер доступні у вигляді веб-FontFonts. FontShop також має детальну інструкцію WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Шрифт Білка : Вітрини всіх шрифтів, Font Squirrel пропонує для використання з @ шрифт особі вкладення CSS. Font Squirrel пропонує вражаючий кількість типів, робить його мертвим просто вибрати один із, так і звичайним користувачам пропонується "набори" - шрифт за вашим вибором, в декількох форматах, в комплекті з демо HTML і CSS, який використовує дуже поточний @ шрифт особі синтаксис . Вони також пропонують спосіб зробити свій власний @ шрифт особі комплектів . Якщо шрифт ви хочете використовувати була ліцензована (як правило ті, які приходять з вашого комп'ютера, не обов'язково добре), генератор виробляє СРВ, SVG, і агов! WOFF файли.

Інший швидкий урок. Ось те, просто і красиво, використовуючи силу CSS ... але було важко concieve (і це, звичайно, не мені), щоб почати с. Додавання DropShadow, може бути peice пирога для багатьох з нас, використовуючи деякі інструменти для редагування зображень, як Photoshop, Fireworks НФА та ін
Причина, чому я вибрала тіні за допомогою CSS є те, що, як правило, при створенні дизайну сторінки / HTML заяви, вимоги зберегти ітерації. Я маю на увазі, в існуючий веб-сайт з великою кількістю зображень, як ті, що відображає Freinds списку або галереї зображень, важко буде переробити увесь вантаж зображень, які вже були вивантажені, щоб додати або видалити тіні, для цього питання.
Так що якщо ви зробили трохи вперед мислення при створенні HTMLS додати ці додаткові підрозділи або правило, ситуація така, що у вас є цикл логіка створення цих ікон / мініатюр в XSL, PHP. JAVA або будь-який інший програми / скриптова мова, ви можете додати його в будь-який час, то це просто питання про шоу і приховати ці тіні за допомогою властивості CSS Display, відповідно до клієнтами постійно мінливих вимог ... Я havn't зробити цей вид далекоглядних до цього ... але ahev прямо зараз!

У наведеному нижче прикладі, вихідне зображення без тіней і dropshadows застосовуються в міру необхідності! Крім того, я пішов трохи більше, використовуючи прийоми з моїх попередніх Тута (Well! це, ймовірно, найкоротші різні навчальні матеріали, так що виправдано тільки називаючи їх "Тута" 'и) про використання CSS кліп власності на показати тільки

Початкове зображення

Результати CSS DropShadow

Переглянути демо | Завантажити файли вихідного коду

Чому я хочу, щоб це розуміти?? Хамм ...!!

Більшість письменників CSS погодяться, що CSS кліп власності, ймовірно, одним з найбільш невикористаних властивостей CSS. Це було так вірно і для мене і був найщасливіший нехтувати цим, поки я не почав зміни MooTools ДВА ручку (Pin) Slider Компонент (з Range Indicator) .

Існував хороша пропозиція від одного з компонентів користувачам змінювати Slider Компонент використанням обрізаний Довідковий зображення (у порівнянні зі змінною шириною поділ), щоб вказати повзунка діапазону. Таким чином, настав мій час, щоб увійти в задоволення, але не-статутних (для мене звичайно ж) води майна кліп CSS.

Ну! як важко це може бути? Не так багато на всіх ... ТАК і НІ. Синтаксис CSS власності Кліп досить прямій, але зміст / usuage трохи croocked. З пам'яттю, як у мене, кожен раз, коли я сиджу в переробку на мій Slider сценарій ... У мене є tokeep повертаючись до використання цього кліпу власності, щоб нагадати собі логіку, яку я створив в мій сценарій .... Звідси! думав пера його, в надії згадати його майбутнє (а також в інтересах тих, хто, здається Вражає власності кліпу CSS)

Що таке CSS кліп робити?

Кліп є частиною візуального модуля ефектів CSS 2.1. Простіше кажучи, його робота полягає в розміщенні видиме вікно у верхній частині об'єкта, який обрізається, тому обрізання зображень і створення мініатюр без створення додаткових файлів (я вже поставив цю можливість для більш ефективного використання в компоненті Slider )

Використовуючи властивість кліпу CSS, ви можете створити вирізку допомогою форми прямокутника. Як і багато інших властивостей CSS (наприклад, маржа, відступи і т.д.), використовуючи прямокутник, необхідно чотири координати Top, Right, Bottom, Left (TRBL). Croocked природа цієї властивості відображає, коли ви уважно подивитеся, як кліп обчислює область відсікання, використовуючи ці чотири координати (посилає мозок у жеребкуванні на деякий час). Тепер, щоб збити вас з пантелику нижньої починається зверху, а права починається з лівого боку. . Ви бачите, що я сказав? .... Таким чином, цей пост ...

Ця невелика плутанина може легко зникнути, з цим візуальним пояснення CSS Clip / прямокутник власності, як показано нижче!!

Вимоги CSS кліп

Завдання, яке ми почали це кліп на наступному зображенні Мініатюра на квадратний шукати зображення (а також ширококутні зображення)

Оригінальний Thumbnal / Image	Кліп Вимоги до Sqaure Thumbmail

Результати CSS кліп

Переглянути демо | Завантажити файли вихідного коду

Перш, ніж ми мали справу з CSS для створення макетів сторінок нашого, поєднавши частину вмісту всередині комірки таблиці, здавалося, гра просто дитини. Просто встановіть "align" або "VALIGN" властивість таблиці мають вирівнювання по вашим вибором, шматок пирога!
З макети CSS, хоча у нас є "вертикального вирівнювання" властивості елементів, вона не здається такою простою, як «вирівнювання» або «VALIGN" властивості. Щоб бути більш specifiic "вертикального вирівнювання" ніколи, здається, вирішити будь-які ваші проблеми, особливо якщо будуть писати шматок крос-браузерні CSS.

Без використання таблиць HTML, завдання центрування на об'єкт, будь то зображення або текст, що містить усередині підрозділи, ймовірно, було кожного UI / CSS розробники кошмар якийсь момент. Ця проблема подальшого екстраполює ваші турботи узгодження, якщо об'єкт по центру динамічний характер, тобто, коли його висота змінні (невідомі висоти).

Незважаючи на відсутність відомих прямим рішенням, яке буде працювати по всьому спектру браузерів ми маємо справу з того, що рішення, яке я намагався прийти до дійсно схоже на роботу в декількох браузерах, які я пробував в (IE6, IE 7 , FF).

РІШЕННЯ:
В браузерах Mozilla, Opera і Safari, дивну поведінку "вертикального вирівнювання" майно може бути доведена до його почуттів, просто встановивши "дисплей" майном містять поділ на «клітинки таблиці" (дисплей: осередки таблиці) .

Проблема залишається з IE браузерів сімейства, який, проте, схоже, не розуміють, що з "елементи таблиці" майно і невігласи, як вони є, вони просто ігнорують його. Рішення наводиться нижче, хоча простий, оголошення кількох DOM елементів в HTML, щоб все відбулося.

CSS і HTML виглядає наступним чином
.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/> переглядів: 3456 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити вихідних файлів (Скачано 451 раз)

TOP краю 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/> переглядів: 1234 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

НИЖНІЙ краю 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/> переглядів: 1234 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити тут

Схоже, вік, так як я намагався знайти розумне рішення цієї проблеми вирівнювання. Але тепер з цим рішенням, я відчуваю себе трохи світу.

З надією, що коли-небудь

• вертикальне вирівнювання власності в CSS буде працювати, як це робиться у клітинці таблиці, без того, щоб бити багато навкруги
• По крайней мере, встановлення різниці-топ: авто і різниці-дно: авто, як дасть той же результат, з краю лівого і правого краю набору для автоматичного
• Браузер війни буде над деякими день.
• Там буде тільки один браузер для ВСІХ.

Завантажити CSS і HTML вищевказаних рішень тут (Скачано 451 раз) .. для зрозумілості, CSS не оптимізована

PS: І, до речі, ті ескізи деяких фотографіях я клацнув ...

Якщо вимога розділити значення вузла в XML, який містить рядки з роздільниками вартості, в окремі пункти, то ви прийшли в потрібне місце ... подивимося на прикладі, наведеному нижче. Якщо ви знайомі з трохи XML і XSL ... Я не думаю, що вам буде потрібно ніяких пояснень.
Крім того, цей приклад включає використання функції як XSL XSL: виклику шаблонів, XSL: підрядка до, XSL: підрядка, після цього, якщо це те, що ви після цього.

XML повинні бути перетворені (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>
<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>

Результуючий вихідний 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>

Зайве говорити ... просто змініть параметр "delimitr" в роздільник на ваш вибір

Якщо ви коли-небудь зробили (або на один) Вертикальне меню за допомогою списку (Li)-теги і CSS, ви можете зіткнутися, це ще одна помилка в Internet Explorer, де IE 6 вставляє ці зазори між елементами списку, які містять елементи на рівні блоків, тобто якщо є прогалини між елементами списку в розмітці. Дякую, але ні, дякую, версія IE 7 здається вільним від цієї помилки.
Якщо, як я, і багато інших, ви належите до цієї групи порушеного розробників, які до сих пір, щоб отримати свої нові макети, що працюють в IE6 теж, то це може виявитися корисним. Подивіться ...

Приклад розмітки:

<ul id="menu">
<li> <a href="#"> Home </ A> </ LI>
<li> <a href="#"> Про </ A> </ LI>
<li> <a href="#"> послуги </ a> </ LI>
<li> <a href="#"> Портфель </ A> </ LI>
<li> <a href="#"> Довідка </ A> </ LI>
<li> <a href="#"> Зв'язатися з нами </ A> </ LI>
</ UL>

Ви можете створити кілька CSS, схожих один нижче, transfrom над розміткою у вертикальне меню ....

Приклад CSS ...
# {Меню
маржа: 0; оббивка: 0; фон: # FF9900;
Список стилі типу: ні, ширина: 150px;
}
# {Меню чи маржа: 0; оббивка: 0;}
# {Меню Дисплей: блок;
колір: # 555555;
текст-оздоблення: немає;
оббивка: 0 15px;
висота рядка: 2,5; нижньої межі: 1px твердих # FFF;
}

Результат Ви побачите ...

Рішення для цієї помилки ... (зміна / додати CSS, виділені жирним курсивом)

# {Меню
маржа: 0; оббивка: 0; фон: # FF9900; Список стилі типу: ні, ширина: 150px;
float: left; / * це містить плаваючих елементів списку * /
}
# {Лі меню
маржа: 0; оббивка: 0;
float: left; / * Ця виправлення * /
Ширина: 100% / * прогалини помилка в IE6 * /
}
# {Меню
Дисплей: блок; колір: # 555555;
текст-оздоблення: немає;
оббивка: 0 15px;
висота рядка: 2,5; нижньої межі: 1px твердих # FFF;
}

Якщо наведені вище оленяча шкіра рішення схоже на роботу (з причин, відомим тільки в IE6) ... спробувати цей метод, а не

Просто додайте цю додаткову IE6 тільки стилі розмітки ...

<! - [Якщо IE 7 л>
<style type="text/css">
# Меню Лі {Дисплей: вбудований блок;}
# Меню Лі {Дисплей: блок;}
</ Стиль>
<[ENDIF] ->

Якщо XML / XSL перетворення ваш Доміан, тобто часи, коли ми хочемо peice динамічного коду, який буде використовуватися бібліотека пункту (буде зроблено повторного використання). Що я маю на увазі, ймовірно, можна було б зробити більш ясною в цьому прикладі сценарію.

Уявіть, що ви створюєте веб-сайт (з використанням XML, XSL transfroms звичайно ж), і більшість із сторінок матиме модуль коментарів. Ну! то або скопіювати або вставити цей код в кожну сторінку шаблону (який я не маю сказати, але зробити технічне обслуговування та доопрацювання кошмар), або навіть краще, ви створюєте INCLUDE файл, який може вирватися в тому, де б Ви не хочете його в вашу сторінку ( а) ...
Так як ми створюємо файл XSL INCLUDE і включити його в інший файл XSL? Ось як ...

Просто щоб було зрозуміло ... Ось короткий список файлів, які ви можете створити ... от, ми будемо в тому числі інформацію про фруктах і овочах в батьківській сторінки називають їжею.

1. food.xml - XML-файл даних, на яких перетворення будуть застосовуватися
2. food.xsl - основний файл XSL, який перетворить наш food.xml
3. inc_fruits.xsl - XSL включає файл, який буде надавати фрукти даних
4. inc_vegtables.xsl - XSL включає файл, який буде надавати vetetables даних

Я не думаю, що я багато в чому пояснюють, коди для вищевказаних елементів, будуть зрозумілі ...

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: шаблони>
</ 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="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>

Завантажити всі вищевказані файли тут (252 скачувань)

Повідомлення IE 6, MSIE був досить люб'язний, щоб нам розробників для користувача інтерфейсу, додавши ще кілька властивостей CSS стандартний для більшості інших стандартних браузерів. Одним з таких корисних властивостей в "хв-висота". Досить прямий власності, яка не потребує довго намотується пояснення. Коли хв висоти для поділу встановлений, він завжди зберігає, що набір висоти, коли зміст цього будинку займає менше, ніж він може вмістити і, головне (на відміну від простої ванілі "висота" власність) або в масштабах CSS словами, він веде себе як розподіл яких "Висота" встановлено в "авто" ...

Для деяких з нас, бідних розробників, які все ще необхідні для коду CSS, які повинні працювати в IE6, не-наявність "мін-висота", може виявитися показувати пробки десь ... Не допускайте попадання відчаю.

На щастя, у нас достатньо примхи в IE, що ми будемо використовувати, щоб з переваг і зламати наш шлях для досягнення нашої мети ... тобто зробити DIVISION поділ, як ніби її міні-висота в IE6

Рішення 1: Використання підкреслення Hack [ Читати далі ... ]

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

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

---

Рішення 2: Використання атрибутів 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>


Атрибутів CSS Selector Hack використовує той факт, що браузер IE6 Tha раніше ігнорувалися atribute-селектор. Зверніть увагу на вимогу іншої контейнер поділ з класом = "SomeClass". Просто presense класу атрибута для цього відділу, перекриває зростання до авто для Opera, Mozilla і MSIE7 і вище. IE6, який не підтримує atribute селекторів, ігнорує його.

Переглянути демо хв висота хак для IE6

Якщо ви використовуєте XML і XSL, то ви могли зустріти той час, коли потрібно грати з атрибутами і значеннями вузлами ви XSL. Вони навантажень сайтів довго намотується інформацію про це, але ніхто не знайшов були короткими і точними ... Це не XML / XSL підручника, але мої спроби поставити разом, якийсь обман список ...

Зразок XML, що ми будемо працювати з виглядає наступним чином ...

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

Отже, давайте починати перетворення наших вище XML за допомогою XSL

Приклад 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>

HTML результат буде виглядати

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

Приклад 2: Цикл через та відображення XML всі імена атрибутів і їхніх значень

<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 результат буде виглядати


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


Дивитися це простір, я буду оновлювати цей нових висновків ...

Reset CSS, / CSS є встановити кількість елементів стилю для конкретного базового, який створює послідовність в різних браузерах.

Ми всі були через кошмари написання крос-браузерні CSS в. Тому, коли ми починаємо писати наш CSS, це практика, щоб скинути його першим видалити / скидання будь-якого поперечного невідповідності браузера. Скидання CSS, прості кілька рядків CSS, що ви починаєте з CSS, що дає вам чітку базу, щоб почати будувати свій на.

CSS скидає, що я звичайно віддаю перевагу використовувати виглядає наступним чином

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

ол, вул {
Список стилі: ні;
}

h1, h2, h3, h4, h5, h6 {
Розмір шрифта: 100%;
накреслення шрифта: нормальний;
}

Скинути розмір шрифту в броузері
Також зверніть увагу на скидання, який був застосований в браузері розмір шрифту в наступний рядок ...

html {font-size: 76%;}

Вище CSS скидає розмір шрифту в броузері на 10 пікселів, і це дає можливість працювати з відносними розмірами шрифту (який кожен з важливих відповідно WAI prespective)
Для, наприклад, в наступному визначенні розміру шрифту в діапазон встановлений на 10 пікселів, що в paragarph встановлений на 14 пікселів ...

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