Если вы хотя бы немного знаете основы языка PHP, то нам с вами не составит труда  реализовать использование CSS переменных уже сейчас. Все довольно легко и просто, как пишет нам Крис Койер в своей статье.

Style.php

Вместо привычного нам  расширения .css, мы подключим к страничке файл .php

<link rel='stylesheet' type='text/css' href='css/style.php' />

Тип документа

В самом начале файла style.php необходимо указать, что на выходе нам все-таки нужен файл стилей, т.е. указываем тип документа:

<?php
header("Content-type: text/css; charset: UTF-8");
?>

Ломаете голову как сдать сессию? У нас курсовые работы на заказ срочно.

Вводим переменные

Теперь установим значения для нескольких переменных, например такие:

<?php
 header("Content-type: text/css; charset: UTF-8");

 $brandColor = "#990000";
 $linkColor = "#555555";
 $CDNURL = "http://cdn.blahblah.net"
?>

Использование переменных

Достаточно просто вывести обозначенные переменные в необходимых местах стилей:

#header {
 background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}

a
 color: <?php echo $linkColor; ?>;
}
...
ul#main-nav li a {
 color: <?php echo $linkColor; ?>;
}

Другие идеи использования CSS файла сгенерированного с помощью PHP

1. Сжатие CSS файла с помощью PHP
2. Теоретически, вы даже можете использовать информацию о User-agent для вывода стилей под конкретный браузер.
3. В зависимости от сезона года, вы можете менять стили, используя информацию о текущей дате.
4. Генерировать различные цвета, устанавливать фон случайным образом, и в конце-концов, просто тестировать.

Не работает?

В некоторых случаях (например для реализации нашей идеи в Wordpress), вам возможно потребуется прописать следующие строчки в файле .htaccess (только для Apache):

<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>

При этом файл стилей оставляем с расширением .css, а  .htaccess кладем в туже папку, где и стили.

Постоянная ссылка на статью |Комментариев: 20
Теги:

Еще записи на эту тему

• Нет похожих записей :\

Хочешь получить денежный приз? Заходи на SEO блог – угадай дату апдейта тИЦ.

Перевод статьи Four Methods to Create Equal Height Columns

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.

В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

Купить кухню недорого сейчас вполне реально. Я советую выбрать знаменитую фабрику «Кузнец».
Если у вас намечается торжественное событие, то вам нужно заранее заказать оформление зала.

Способ 1. Использование свойства display: table

Для реализации макета используется список (ul) или блок div с вложенными в него блоками для строки и  каждой из колонок. Обрамляющему блоку div присваивается значение display: table, а каждому вложенному блоку-колонке значение display: table-cell.

Рассмотрим пример со списком.

HTML код:

<div class=”base”>
<ul class=”base-row”>
<li class="cell1"><div class="content1" >.....Lots of  Content....</div></li>
<li class="cell1"><div class="content2">.....Lots of  content....</div></li>
<li class="cell1"><div class="content3">.....Lots of  content....</div></li>
</ul>
</div>

CSS:

.base {
 /*make it 100% width and a minimum of 1000px width*/
 width: auto;
 margin-left: 0px;
 margin-right: 0px;
 min-width: 1000px;
 padding: 0px;
display:table;
 }
.base-row {
 Display: table-row;
 }
.base li {
 display: table-cell;
 width: 33%;
 }
.cell1 {
 background-color: #f00;
 }
.cell2 {
 background-color: #0f0;
 }
.cell3 {
 background-color: #00f;
 }

Посмотреть пример

Преимущества:

Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов.

Внешний отступ (margin, как cellspacing для таблиц) равный для всех колонок создать не получится, однако, его можно заменить границей белого цвета (или цвета фона колонки) с соотвествующей шириной для иммитации отступа.

Недостатки:

Этот метод не работает в браузерах IE7  и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

Способ 2: Использование JavaScript

Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.

HTML код:

<div class=”container”>
<div class=”leftsidebar”> … Lots Of Content … </div>
<div class=”content”> ….  Lots Of Content … </div>
<div class=”rightsidebar”> … Lots Of Content … </div>
</div>

CSS:

.container {
 Width: 900px;
 Margin-left: auto;
 Margin-right: auto;
 }
.leftsidebar {
 Float: left;
 Width: 33%;
 }
 .content {
 Float: left;
 Width: 33%;
 }
.rightsidebar {
 Float: left;
 Width: 33%;
 }

JavaScript ( jQuery):

function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
$(document).ready(function() {
 setEqualHeight($(".container  > div"));
});

Вы можете положить JS код в отдельный файл и вызвать его непосредственно в  HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container:

.container > div

Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.

Посмотреть пример

Преимущества:

Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с  CSS кодом для выравнивания высоты.

Недостатки:

Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки

Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.

HTML код:

<div class=”container”>
<div class=”left”></div>
<div  class=”content”></div>
<div class=”right”></div>
<div class=”clearer”></div>
</div>

CSS:

.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

}

.leftsidebar {
float: left;
width: 200px;
}

.content {
float: left;
width: 400px;
}

.right {
float:left;
width: 300px;
}

.clearer {
clear: both;
}

Посмотреть пример

Преимущества:

Очень простая реализация.

Недостатки:

Этот метод можно использовать только для макетов/колонок фиксированной ширины.

Способ 4: Использование раздельных блоков с фоном

Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.

HTML код:

<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div  class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”>  …Lots Of Content…</div>
<div  class=”rightsidebar”> …Lots Of Content…</div>
</div>
</div>
</div>

CSS:

.rightback  {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback  {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px;    /* width of right sidebar */
}
.leftback  {
width: 100%;
position:relative;
right: 400px; /* width of the  content area */
float:left;
background-color: #f00;
}

.container  {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar  {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content  {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar  {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:

1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
   .leftback соотвествует.leftsidebar,
   .contentback – .content
   и .rightback – .rightsidebar.
3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)
4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)

На рисунке ниже изображено как располагаются блоки .rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа -  .leftback.

Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).

На картинке ниже, черные линии, расположенные ниже красной – это контент элементов <div> .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.

Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G

Этот метод подробно описывается в  этой статье.

Посмотреть пример для 3х колоночного макета | Посмотреть пример для 4х колоночного макета

Преимущества:

Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:

Метод не так прост, как остальные, однако, он позволяет создать столько равных колонок, сколько требуется.

Вывод

Каждый из методов имеет свои преимущества и недостатки, но, наверняка, вы выберите для себя последний метод, который позволяет создать колонки равной высоты, работающие в любом браузере и без JS.

Постоянная ссылка на статью |Комментариев: 22
Теги: блоки равной высоты, колонки одинаковой высоты

Еще записи на эту тему

• Нет похожих записей :\

Единицы измерения, применяемые в описании многих свойств элементов документов, можно разделить на два типа: абсолютные единицы и относительные единицы. Значения одних и тех же атрибутов могут выражаться как в абсолютных, так и в относительных единицах. Например, для описания высоты шрифта могут использоваться абсолютные единицы – миллиметр (mm) или пика (pc), или же относительные единицы, например пиксели (px), величина которых зависит от разрешающей способности экрана. Или проценты, в которых можно выражать величины, составляющие часть или многократное повторение других величин (например, 75% ширины экрана).

Нужен профессиональный копирайтер? Качественные тексты только на бирже копирайтинга textbroker.ru.

Абсолютные единицы измерения:

1. in (дюйм, inch), 1in = 25,4mm;
2. mm (миллиметр);
3. cm (сантиметр);
4. pt (точка, point), 72pt = 1in;
5. pc (пика), 1pc=12pt.

Рассмотрим пример применения этих единиц в CSS:

.in, .mm, .pt { font-family: Arial}
.in { font-size: 0.2in }
.mm { font-size: 8mm } 
.pt { font-size: 16pt }
<span class="in">Размер шрифта в дюймах</span> 
<span class="mm">Размер шрифта в миллиметрах</span>
<span class="pt">Размер шрифта в пунктах</span>

А вот и живой пример:

Размер шрифта в дюймах
Размер шрифта в миллиметрах
Размер шрифта в пунктах

Относительные единицы измерения:

1. em (высота шрифта данного элемента);
2. ex (высота буквы «Х» в данном шрифте);
3. px (пиксель, pixel) – логическая точка экрана;
4. % (процент) – эта единица служит для определения значений, зависимых от условий среды, например, ширины окна броузера.

При разработке сайта нам наиболее привычно использовать px, em и %. Кстати, как правильно перевести px в em, можно узнать из статьи на моем блоге.

Название принятой единицы измерения приводится непосредственно за ее цифровым выражением (между цифрами и буквами нет никаких пробелов), например: 6mm, 10px. Следует также обратить внимание, что в цифровой записи десятичных дробей целая часть отделяется от дробной символом «.» (точка), например. 1.5cm (то есть 1,5 см).

Постоянная ссылка на статью |Комментариев: 7
Теги: px to em, единицы измерения

Еще записи на эту тему

• Эластичные шаблоны (2)

Сервисы постинга в социальные закладки
В чем особенности дизайна блогов? Узнайте подробнее насколько это важно!
padlik.ru – записки интернет-маньяка о бабле

1. Цвет фона body

Даже если body не имеет никакого фона, обязательно прописывайте background, дабы избежать некорректного цвета, в случае если на компьютере изменена палитра.

body {background:#FFF}

2. Минимальная ширина

Если вы верстаете “резиновый” дизайн, вам необходимо напомнить заказчику, что должна быть минимальная ширина, при которой страница не развалится. Как правило, это либо 1004px, либо 780px. Если вы верстаете под IE6, то вам придется использовать специальную технику обертывания контента, либо воспользоваться JS скриптом, исправляющим многие недостатки IE6. Я использую скрипт IE7.js JavaScript library.

3. Наличие правил для отсутствующих элементов в дизайне.

Здесь я имею ввиду правила для заголовков H1-H6, посещенных и активных ссылок (a:visited, a:active), списков (ol, ul), таблиц, форм. Все стандартные элементы, которые не присутствуют в дизайне, но процент их использования велик – должны быть прописаны в CSS. Не стоит лениться, воспитывайте в себе обязательство всегда выполнять полноценную верстку.

4. Картинки-ссылки

Этот пункт я вынесла отдельно, хотя он и относится к предыдущему. Не забывайте обнулять границы у картинок, которые обернуты в ссылку (если конечно, для таких картинок не предусмотрен отдельный дизайн).

a img {border:none}

5. Проверка в браузерах, указанных в ТЗ

Как правило, это FF2/FF3, Opera 9, IE6/IE7, Safari. Я тестирую верстку для IE6 в IETester (там же есть и 7й, и 8й).

6. Семантика во всем

Следите за тем, чтобы ваш код был как можно более правильным и читабельным. Советую почитать об этом статью на моем блоге.

7. Вес страницы

Важно помнить о том, что вес страницы должен быть как можно более минимальным. Постарайтесь избегать громоздких картинок и скриптов. Как оптимизировать вес страницы можно узнать из этого обзора.

8. Валидность

И в заключение, не забудьте проверить верстку на валидность, впрочем как и CSS. Даже если это не обязательный пункт ТЗ, то сделайте это для себя, чтобы в будущем не делать ошибок.

А вы учитываете эти пункты при верстке? Буду рада вашим дополнениям к списку :)

Принимаю эстафету от Тани и расскажу о железе своей машины :)

Работаю я на ноуте ASUS F7Z:

Передаю эстафету про железо Евгению, Антону и Александру.

Постоянная ссылка на статью |Комментариев: 19
Теги: верстка, правильный код, семантика

Еще записи на эту тему

• Почему дизайнеры должны уметь верстать (41)
• Новая техника CSS: имитация абсолютного позиционирования (25)
• 20 CSS-решений распространенных багов и проблем при верстке сайта (40)

Вольный перевод статьи don’t use @import
Автор: Steve Souders

В данной статье автор приводит наглядные доказательства, почему не стоит использовать @import для загрузки стилей в документ.

LINK vs. @import

Существует 2 способа загрузки файлов стилей. Использовать тег LINK:

<link rel='stylesheet' href='a.css'> 

Или импортировать файлы с помощью @import:

<style>
@import url('a.css');
</style>

Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что @import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.

Новости примадонны отечественного шоу-бизнеса, Аллы Пугачёвой.
Все еще ищите хостинг для своего проекта?

@import @import

Я хочу рассказать о различных способах использования LINK и @import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется @import для загрузки обоих файлов стилей. В этом примере, называемом @import @import, HTML документ содержит следующий блок стилей:

<style>
@import url('a.css');
@import url('b.css');
</style> 

Если вы всегда будете использовать только @import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать @import внутри файла стилей, либо вместе с LINK.

Рис. 1.

LINK @import

В примере LINK @import используется тег LINK для загрузки a.css, и @import для b.css:

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style> 

В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.

Рис. 2

LINK с @import

В примере LINK с @import, файл  a.css загружается через LINK, и содержит внутри правило @import для b.css:
В документе:

<link rel='stylesheet' type='text/css' href='a.css'> 

в a.css:

@import url('b.css');

Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать – все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило @import, начинается загрузка файла b.css.

Рис. 3.

Блоки LINK с @import

Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только @import для b.css.
В коде:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'> 

В proxy.css:

@import url('b.css');

Результаты эксперимента в IE показаны на рисунке 4. Первый запрос – HTML документ. Второй запрос -  a.css (2 секунды). Третий – proxy.css. Четвертый – b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).

Рис. 4. Результаты в IE.

Рис. 5. Результаты в других браузерах.

Много @imports

Использование сразу нескольких правил @import в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).

<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>

<script src='one.js' type='text/javascript'></script>

На рис. 6 вы увидите, что самый долгий по загрузке – это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.

Рис. 6.

LINK LINK

Проще и безопасней использовать LINK для загрузки стилей:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='b.css'> 

Использование LINK обеспечивает параллельную загрузку файлов во всех браузерах (см. рисунок 7). Применение LINK также гарантирует, что файлы будут загружены именно в том порядке, который указан в коде документа.

Рис. 7.

Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил @import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование @import и загружать стили только с помощью LINK.

Постоянная ссылка на статью |Комментариев: 16
Теги: @import, LINK, загрузка стилей

Еще записи на эту тему

• Нет похожих записей :\