На работе столкнулся с такой задачей - имеется таблица в Excel, в которой ведется табель выходов рабочих в цеху.

В таблице подсчитывается количество часов, фактически отработанных; часов переработки и часов сверх нормы. Так вот, необходимо сделать так, чтобы производилась автоматическая выборка ячеек таблицы по цвету заливки последних.

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

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

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

Прекрасное и готовое решение моей задачи я нашел на сайте http://www.excel-vba.ru/. Даже не одно, а целых два решения, под разные условия. Ниже привожу последовательность шагов, которые привели меня к успеху.

Сразу скажу, что изображения были сделаны в Excel 2007. В Excel 2010 все несколько по другому, но запутаться невозможно, если что.

Режим “Разработчик” в Excel

Первое, что нужно сделать - заставить Excel работать с пользовательскими функциями. Фактически, мы будем писать сценарий на языке VBA в Excel, но такая возможность по умолчанию отключена в этой программе. Включить ее можно следующим образом.

Переходим в “Пуск - Параметры Excel” и находим в левом списке пункт “Надстройки”:

Выбираем в основном окне строчку “Пакет анализа - VBA” и жмем кнопочку “Перейти” в самом низу окна. Откроется еще одно окошко со списком доступных под Excel расширений (надстроек). Снова выбираем в этом списке “Пакет анализа - VBA” и соглашаемся, что хотим установить его, нажав кнопку “ОК”:

Потребуется установочный диск с Microsoft Office на нем (или же подключение к Интернет) чтобы программа получила необходимые пакеты для инсталляции. Если установка прошла успешно, то в “Ленте” появиться пункт “Разработчик” (Excel 2010). Можно перейти в него через эту панель или же с помощью сочетания клавиш Alt + F11.

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

Вставка готовых функций в Excel VBA

Но есть готовые решения, которые я вставлю в виде кода с помощью меню “Insert - Module”. Просто берем отсюда код функций и вставляем в свой Excel. Затем сохраняем файл Excel с поддержкой VBA (макросов) и все готово для дальнейшей работы.

Вставленные функции появятся в списке формул таблицы:

Ниже представлен готовый код двух функций на VBA, написанных их автором Дмитрием Щербаковым. Первая функция с именем “CountByInteriorColor” выполняет подсчет количества ячеек по цвету заливки.

Вторая функция с именем “SumByInteriorColor” выполняет выборку ячеек по цвету заливки и суммирует все значения в этих ячейках.

Обе функции имеют одинаковый синтаксис и принимают три входных аргумента, первые два из которых обязательные, а третий - необязательный:

• 1

  rRange

  - диапазон с ячейками для подсчета

• 1	rColorCell

  - ячейка-образец с цветом заливки

• 1

  bSumHide

  -

  1

  ИСТИНА

  или

  1

  1

  учитывает скрытые ячейки;

  1

  ЛОЖЬ

  ,

  1

  0

  или опущен(по умолчанию) - скрытые ячейки не подсчитываются.

Функция подсчета количества ячеек

'---------------------------------------------------------------------------------------
' Procedure : CountByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция подсчета ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для подсчета.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не подсчитываются.
'---------------------------------------------------------------------------------------
Function CountByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, lCnt As Long, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
              If bSumHide Then lCnt = lCnt + 1
          Else
              lCnt = lCnt + 1
          End If
      End If
  Next rCell
  CountByInteriorColor = lCnt
End Function

Синтаксис этой функции прост:

=CountByInteriorColor(D8:AG8;$E$65)

Функция подсчета суммы ячеек

'---------------------------------------------------------------------------------------
' Procedure : SumByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция суммирования ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для суммирования.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не суммируются.
'---------------------------------------------------------------------------------------
Function SumByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, dblSum As Double, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          vVal = rCell.Value
          If IsNumeric(vVal) Then
              If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
                  If bSumHide Then dblSum = dblSum + vVal
              Else
                  dblSum = dblSum + vVal
              End If
          End If
      End If
  Next rCell
  SumByInteriorColor = dblSum
End Function

Синтаксис этой функции следующий:

=SumByInteriorColor(D8:AG37;E63)

При вставке пользовательской функции “CountByInteriorColor” и “SumByInteriorColor” можно воспользоваться либо “Мастером функций”, либо произвести указание диапазона ячеек и ячейку-критерий вручную.

Описание рабочей формулы

Готовый пример работы функции “CountByInteriorColor” можно посмотреть на рисунке “Табель выходов с зелеными ячейками”. В нем подсчет отработанного времени производится по следующей формуле:

=((Сумма фактически отработанных часов) - (Норма часов выхода за месяц)) + ((Кол-во дней с переработкой)*4)

Фактически эта формула получается такой (смотри строку №13 на рисунке):

=(AH13-AI13) + (CountByInteriorColor(D13:AG13;$E$65)*4)

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

Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).

В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.

Кодируем стихотворение

Не существует единого мнения в вопросе, как следует выполнять HTML-разметку для стихотворения: большинство полагает, что каждый стих из стихотворения должен быть параграфом (

1

p

1

br

Некоторые возлагают надежды на грядущие элементы стандарта HTML5, предназначенные специально для форматирования стихотворений, такие как

1

<poem>

1

<stanza>

1

<line>

Разметка

В будущей разметке имеются три основных элемента:

• заголовок;
• подзаголовок с информацией об авторе;
• само стихотворение, собственно.

<h1>
  Twinkle Twinkle Little Star
</h1>
<h2>
  by Jane Taylor, 1806
</h2>
<p>
  Twinkle, twinkle, little star,<br />
      How I wonder what you are!<br />
      Up above the world so high,<br />
      Like a diamond in the sky!
</p>
<p>
  When the blazing sun is gone,<br />
      When he nothing shines upon,<br />
      Then you show your little light,<br />
      Twinkle, twinkle, all the night.
</p>
<p>
  Then the traveller in the dark,<br />
      Thanks you for your tiny spark,<br />
      He could not see which way to go,<br />
      If you did not twinkle so.
</p>
<p>
  In the dark blue sky you keep,<br />
      And often through my curtains peep,<br />
      For you never shut your eye,<br />
      Till the sun is in the sky.
</p>
<p>
  As your bright and tiny spark,<br />
      Lights the traveller in the dark,&mdash;<br />
      Though I know not what you are,<br />
      Twinkle, twinkle, little star.
</p>

Стилизация заголовков

Прежде чем приступать к стилизации элементов страницы, необходимо добавить базовый сброс стилей и некоторые значения по умолчанию в таблицу стилей:

body {
  background: #fff;
  color: #111;
  font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
  text-align: center;
}

  div, h1, h2, p {
    margin: 0;
    padding: 0;
  }

Само стихотворение обернем в блок

1

div

#poem {
  margin: auto;
  padding: 20px 0;
  text-align: left;
  width: 390px;
}

Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:

h1, h2 {
    font-weight: normal;
    text-align: center;
  }

Установим размер шрифта для основного заголовка - тега

1

h1

1

margin-bottom

1

line-height

h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 10px;
}

Для заголовка второго уровня

1

h2

1

margin-bottom

h2 {
  color: #666;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 30px;
}

Стихотворение

Для основного текста стихотворения добавим интерлиньяж

1

line-height

1

margin-bottom

p {
  line-height: 1.5;
  margin-bottom: 15px;
}

Волшебные селекторы

А вот теперь начнем развлекаться! Первое - добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами

1

:before

1

:after

1

content

h2:before {
  content: '— ';
}

h2:after {
  content: ' —';
}

Теперь увеличим первую букву стихотворения - так называемая буквица (

1

drop cap

1

+

1

:first-child

Смежный селектор позволяет выбрать селекторы, которые следуют сразу выбранным нами селектором внутри одного и того же элемента-родителя (например, внутри одного и того же блока

1

div

Мы выделим первую букву каждого параграфа, который следует сразу за заголовком второго уровня

1

h2

#poem h2 + p:first-letter {
  float: left;
  font-size: 38px;
  line-height: 1;
  margin: 2px 5px 0 0;
}

Буквицу смещаем влево, так чтобы остальной текст обтекал его вокруг; при увеличении размера шрифта междустрочный интервал

1

line-height

1

margin

Выделим первую строку каждого параграфа через

1

small-caps

#poem p:first-line {
  font-variant: small-caps;
  letter-spacing: 1px;
}

Для того, чтобы еще как-то выделить стихотворение, добавим к последнему параграфу дополнительное пространство внизу, чтобы отделить его от всего остального контента, который будет идти следом за ним. Для этого воспользуемся псевдо-элементом

1

:last-child

#poem p:last-child {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

Вот стилизация стихотворения и закончена!

Некоторые заметки о поддержке браузерами

Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент

1

:last-child

1

:last-child

1

:before

1

:after

1

:first-child

Заключение

Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).

Но это не означает, что текст в окне браузера делается нечитаемым - просто CSS3-селекторы добавляют дополнительное оформление в современных браузерах, которыми пользуются на сегодняшний день только небольшое количество людей.

Примечание переводчика: статья была написано довольно давно - в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.

Оригинал статьи - “Styling a Poem with Advanced CSS Selectors”.

Я люблю ту простоту, которую привносят CSS3-селекторы в таблицы стилей. В этой статье приведено краткое описание одного из моих любимых селекторов: псевдо-класса

1

:empty

.

Что такое псевдо-класс :empty

Вот краткое описание, взятое из спецификации W3C:

Псевдо-класс

1

:empty

относится к элементу, у которого нет потомков.

Звучит просто и понятно, не правда ли? Потому что это действительно так - псевдо-класс

1

:empty

<p>...</p>

Или же пустые ячейки таблицы:

<table>
  <tr>
    <td></td>
  </tr>
</table>

А вот к такому параграфу псевдо-класс

1

:empty

<p>...</p>

Практическое применение :empty

Хорошо, но каким образом может быть полезен этот селектор?

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

1

:empty

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

Разметка будет выглядеть таким образом:

<table>
  <caption>A simple table</caption>
  <tr>
    <th scope="col" rowspan="2">Some headings</th>
    <th scope="col" colspan="4">More headings</th>
  </tr>
  <tr>
    <th scope="col">Great</th>
    <th scope="col">Brilliant</th>
    <th scope="col">Genius</th>
    <th scope="col">Good</th>
  </tr>
  <tr>
    <th scope="row">Interesting totals</th>
    <td>155</td>
    <td>165</td>
    <td>70</td>
    <td>140</td>
  </tr>
  <tr>
    <th scope="row">Curious</th>
    <td>5</td>
    <td>35</td>
    <td>50</td>
    <td>15</td>
  </tr>
  <tr>
    <th scope="row">Awesome</th>
    <td>75</td>
    <td>90</td>
    <td></td>
    <td>5</td>
  </tr>
  <tr>
    <th scope="row">Fabulous</th>
    <td>30</td>
    <td></td>
    <td>20</td>
    <td>80</td>
  </tr>
  <tr>
    <th scope="row">Nice</th>
    <td>45</td>
    <td>40</td>
    <td></td>
    <td>40</td>
  </tr>
</table>

И вот, что я собираюсь добавить в таблицы стилей, для того чтобы отформатировать пустые ячейки таблицы:

tbody td:empty {
  background: #efefef;
}

А вот теперь пустые ячейки таблицы отформатированы по-другому! Мне кажется, что невозможно сделать это более простым способом.

Если вас этот селектор заинтересовал, то скажу, что он поддерживается всеми последними версиями браузеров Firefox, Safari, Chrome и Opera. И возможно, он работает в браузере Internet Explorer 9, наравне с остальными селекторами стандарта CSS3.

У CSS-фреймворков есть одна общая черта - они не признаются многими веб-дизайнерами.

Чрезмерно раздутый программный код и несемантические имена классов - обычно это два главных аргумента, высказываемых против их использования. Даже не имея опыта работы хотя бы с одним из CSS-фреймворков, я была точно такого же мнения о них.

Но, выполняя недавно одно небольшое исследование, я столкнулась с некоторыми из фреймворков и изменила свое мнение об этих продуктах.

Существующие фреймворки

На сегодняшний день существует большое количество различных CSS-фреймворков (прим. переводчика: Bootstrap, KickStart, Skeleton, 960gs, Blueprint, YUI3CSS), начиная с самых простых, которые предоставляют только разметку страницы; и заканчивая сложными, которые содержат в своем комплекте формы, типографику и модули плавающей разметки.

Что я могу сказать, исходя из своего опыта работы - дизайнеры и дизайнерские агентства регулярно пользуются такими фреймворками, как Blueprint CSS или же 960 Grid System (часто называемой 960gs для сокращения). Также популярен Yahoo!’s YUI Grids. Это три фреймворка, с которыми я экспериментировала.

Предубеждение против фреймворков

Обо всех фреймворках у меня было представление: они созданы для веб-дизайнеров, которые хотят иметь быстрое решение для поставленной перед ними задачи и у которых нет своего собственного базового комплекта на CSS; или же для таких дизайнеров, которые просто не хотят понимать, как работает CSS. В любом случае, фреймворки созданы для тех, кто ищет быстрое легкое решение и не хочет сильно “заморачиваться”.

Но существует одна вещь, которую я не люблю - это пуристы, которые не открыты для чужих идей; которые никогда не готовы изменить свое собственное мировоззрение. Я люблю CSS и могу быть пуристкой в некоторых случаях. Но я также понимаю, что не может быть ничего совершенного и что таблицы стилей могут также быть неряшливыми. Мы все стремимся создавать красивый и чистый код, который будет одновременно валидным и семантичным; но при этом который прекрасно работает в реальном проекте; который может быть легко обновлен; который может редактироваться несколькими людьми с разным представлением о “совершенстве” и имеющим разный опыт работы, а также квалификации.

Но я отвлеклась от темы. Что я хотела сказать, так это то, что все мы иногда используем странные имена классов и никто от этого еще не пострадал. Это та вещь, за которую часто критикуют CSS-фреймворки. Имена классов наподобие

1

grid_16

1

span-8

Несемантичность имен классов может компенсироваться “хорошими” именами идентификаторов (например,

1

class="span-8" id="aside"

1

aside

1

section

Когда я пробовала работать с фреймворками, я задавала несколько вопросов в Twitter чтобы разобраться с ними (большей частью это были жалобы, если быть честной). Не нужно быть волшебником, чтобы догадаться - многие люди упрекали меня за использование фреймворков. Я получила много негативных комментариев и помню даже, как один из пользователей сказал, что фреймворки бесполезны. Один или два человека сказали, что они все же используют фреймворки и очень довольны этим фактом (мнения при этом могут расходиться).

Каркасность фреймворков

Мое мнение всегда было таково, что фреймворки полезны хотя бы тем фактом, что могут создавать каркасы страниц под браузеры. Поэтому я решила создать одну и ту же очень простую разметку в трех фреймворках - Blueprint, 960gs и YUI 3 Grids - для того, чтобы сравнить.

Фреймворк CSS Blueprint

Фреймворк CSS Blueprint был создан в 2007 году автором Olav Bjørkøy. Этот фреймворк считается наиболее всесторонним, так как в нем уделено внимание не только созданию разметки на основе модульной сетки, но и продуманной системе типографики, учитывающей такой важный момент веб-дизайна, как вертикальный ритм. Во фреймворк также включена таблица сброса стилей (reset) и таблица стилей для вывода на печать (print), а также основные стили для веб-форм:

Этот фреймворк использует 24-колоночную сетку (каждая колонка шириной 30 пикселей и у каждой колонки есть правый

1

margin

Использовать Blueprint очень просто, так как в нем применяется “обертка” с классом

1

container

Например, класс

1

span-24

1

span-8

1

last

1

margin

Рабочий пример HTML-разметки, созданной в этом фреймворке, показан ниже:

<div class="container">
  <div class="span-24 b">
  </div>
  <div class="span-6 b">
  </div>
  <div class="span-18 last">
    <div class="span-15">
      <div class="span-15 last b">
      </div>
      <div class="span-9 b">
      </div>
      <div class="span-6 last b">
      </div>
    </div>
    <div class="span-3 last">
    </div>
    <div class="span-18 last b">
    </div>
  </div>
</div>

Мною в коде также добавлено имя класса

1

b

1

margin

.b { background:#d4d4d4; margin-bottom:10px; }

Ниже показана картинка уже готового каркаса, созданного во фреймворке “CSS Blueprint”:

Создание этого фреймворка заняло у меня меньше 10 минут (я знаю, что каркас получился очень простым), включая быстрое чтение “Руководства пользователя”.

960gs

Фреймворк 960 Grid System был создан в марте 2008 года автором Nathan Smith. При его разработке особое внимание уделялось модульной сетке; несмотря на то, что этот фреймворк также предоставляет поддержку основных типографских стилей, основная его задача - создание кросс-браузерного каркаса страницы (имеющего полную поддержку браузерами и идентификатор A-Grade [по классификации Yahoo][6]). А также самых разных модификаций, основанных на общем шаблоне модульной сетки.

В этой статье для фреймворка 960gs был создан еще более проста разметка, так как основная идея была показать разницу между именованием классов и вложенностью между различными фреймворками.

Фреймворк 960 Grid System по умолчанию работает с двумя типами модульных сеток - 12-колоночной или 16-колоночной. Для блока-обертки, включающего в себя все внутренние элементы сетки, необходимо добавить класс с именем

1

container_16

1

container_12

1

grid_16

1

grid_14

Ниже показана окончательная HTML-разметка, созданная в этом фреймворке:

<div class="container_16">
  <div class="grid_16 b">
    Header
  </div>
  <div class="grid_4 b">
    Sidebar
  </div>
  <div class="grid_12 b">
    Main content
  </div>
  <div class="grid_16 b">
    Footer
  </div>
</div>

И вот как будет выглядеть эта разметка в окне браузера:

Также, как и с Blueprint, для фреймворка 960 Grid System существует несколько online-сервисов для дополнительной настройки этого фреймворка. Сервис [Fluid 960 Grid System][9] основан на оригинальном 960gs, но позволяет создавать как фиксированные, так и резиновые макеты; а также включает в себя основные стили для таких элементов, как навигация, таблицы, формы, статьи и типографику.

YUI 3 Grids

Фреймворк YUI 3 Grids является частью библиотеки Yahoo! User Interface (YUI). В состав библиотеки, помимо CSS, входят скрипты на JavaScript. Этот фреймворк работает точно также, как и все остальные рассмотренные в этой статье фреймворки, но с одной лишь разницей: в нем нет контейнера-обертки с предустановленной шириной; есть только предустановленные “единицы”, в которых измеряется ширина контейнера и которые наследуют все остальные контейнеры, в него вложенные.

В этом случае, чтобы задать ширину для контейнера модульной сетки, эту ширину устанавливают для элемента

1

body

body {
  margin: auto;
  width: 960px;
}

Свойство

1

margin: auto

1

yui3-g

Например, если боковая панель занимает треть от общей ширины всей страницы, имя ее класса должно быть

1

yui3-u-1-3

1

yui3-u-2-3

Окончательная HTML-разметка имеет вид:

<div class="yui3-g">
  <div class="yui3-u-1 b">
    Header
  </div>
  <div class="yui3-u-1-3 b">
    Sidebar
  </div>
  <div class="yui3-u-2-3 b">
    Main content
  </div>
  <div class="yui3-u-1 b">
    Footer
  </div>
</div>

И готовый вид будет таким:

Обратите внимание, что фреймворк YUI 3 Grids не имеет промежутков (gutter) между колонками - я считаю это недостатком.

Вывод статьи

Из трех рассмотренных в этой статье фреймворков для меня однозначным победителем является CSS Blueprint. Руководство пользователя по этому фреймворку размещено на главной странице сайта (не нужно искать); оно написано простым и ясным языком, со множеством примеров. А тот факт, что в него включена хорошая поддержка типографики, добавляет этому фреймворку большой плюс.

Еще одним плюсом CSS Blueprint является развитое сообщество, которое постоянно создает под него новые плагины, темы и другие инструменты, которые расширяют возможности данного фреймворка.

Для меня фреймворк 960gs оказался гораздо более трудным для понимания; у меня заняло более получаса усилие понять, как работает этот фреймворк и создать в нем макет страницы. В противоположность сайту Blueprint, домашняя страница 960gs не имеет ясного и простого руководства пользователя, поэтому мне пришлось искать “на стороне” описания по использованию этого фреймворка. Мне понравился фреймворк Fluid 960gs, но у меня сложилось впечатление, что он является подобием Blueprint.

Большинство людей, с которыми я общалась во время своих экспериментов с фреймворками, сказали, что они вообще не пользуются ими. Но те, которые говорили, что пользуются, упоминали именно фреймворк 960gs. Поэтому, возможно, я в его изучении зашла “не с той стороны”. Существует множество красивых сайтов, построенных на этом фреймворке (для этого просто посмотрите на домашнюю страницу проекта) наподобие великолепного Black Estate Vineyard:

Тот факт, что фреймворк YUI является подстраиваемым под любую ширину - это большой плюс. Но уменьшенное количество комбинаций с “единицами” делает использование этого фреймворка несколько неудобным; мне показалось немного неправильным, что существуют какие-то ограничения при работе с разметкой страницы. Если мое утверждение неверное, прошу меня исправить, так как я не нашла объяснения данного момента в руководстве пользователя.

Заключение

Прим. переводчика: схалтурил - заключение мною переведено только частично; ну любит девушка многословные выводы …

Как уже упоминалось мною раньше, я считаю CSS-фреймворки “быстрым решением”. И я все еще считаю, что так оно и есть; но в то же время мне они не кажутся плохой штукой. Зачем тратить часы на создание прекрасного, но созданного вручную CSS-макета, когда существуют великолепные готовые решения, уже созданные за нас? Жизнь - это не только кодинг (это действительно так) и существуют более прекрасные вещи, которые я могу сделать за то время, которое я бы потратила на решение проблем, уже решенных за меня.

Однако, это не означает, что я призываю всех и всегда использовать какой-либо из фреймворков при создании проектов. В идеале вам следует работать со своим собственным фреймворком или шаблоном, адаптированным под собственные нужды.

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

И я, конечно, не осуждаю тех дизайнеров или дизайнерские агентства, которые используют “решения из коробки” наподобие Blueprint, так как выгоды использования превосходят такие незначительные минусы, как слишком раздутый код или несемантичные имена классов.

Мой вердикт: нет, фреймворки - это не зло.

Оригинал статьи - Are CSS Frameworks Evil?

При создании CSS-правил сталкивались ли вы с ситуацией, когда при откате (fallback) шрифта у последнего менялась пропорциональность и текст начинал выглядеть больше или меньше оригинального?

Возможно, новое замечательное свойство

1

font-size-adjust

Что делает свойство font-size-adjust

Первое, что нужно сделать - это использовать браузер Firefox для того, чтобы страница с примером отображалась правильно. Да, не Safari, а только Firefox!

Свойство

1

font-size-adjust

1

x-height

1

х

Давайте рассмотрим рисунок ниже:

Как видим на рисунке, шрифт Baskerville и Georgia имеют разный коэффициент пропорциональности. Если произойдет замещение шрифта (с учетом того, что шрифт Baskerville является главным), то в реальности размер шрифта визуально будет больше, при одинаковой величине.

Прим. переводчика. Еще раз - своими словами. На картинке видно, что одинаковые буквы А размером 320 пикселей у шрифта Baskerville и у шрифта Georgia на самом деле не одинаковые. Пропорции (о которых говорит Inyaili) букв у этих шрифтов разные! Теперь вспомним, как задается обычно шрифт в CSS-правилах.

К примеру, так:

font: bold 12px/18px Baskerville, Georgia, serif;

или же так:

font-family: Baskerville, Georgia, serif;

То есть, в правилах мы устанавливаем сначала главный шрифт Baskerville, который должен отображаться на странице; и вспомогательный шрифт Georgia, который должен отображаться, если браузер не найдет главный шрифт Baskerville (это и есть откат шрифта, о котором упоминается в этой статье). В принципе - это основы CSS .

Теперь, если принимать во внимание картинку “Сравнение двух шрифтов”, то нетрудно представить, что произойдет при такой замене (откате).

Шрифт Baskerville заменится шрифтом Georgia, у обоих при этом в правилах CSS установлена одинаковая высота в 320 пикселей. Но фактическая высота (точнее - пропорции) вспомогательного шрифта Georgia больше, чем у первостепенного Baskerville! Догадайтесь, что произойдет с готовым дизайном страницы при таком откате?

При использовании свойства

1

font-size-adjust

1

font-size

1

font-size-adjust

Не путайте свойство

1

font-size-adjust

1

-webkit-text-size-adjust

Как определить значение свойства font-size-adjust

Отрывок из спецификации W3C однозначен:

Коэффициент пропорциональности для выбранных шрифтов может быть высчитан путем сравнения одного и того же текста, но с разным значением

1	font-size-adjust

. Если значение свойства

1	font-size-adjust

подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.

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

1

span

p{
	font-family: Times New Roman;
	font-size: 400px;
}

span{
	border: 1px solid #ff0000;
}

.adjust{
	font-size-adjust: 0.5;
}

<p>
  <span>a</span>
  <span class="adjust">a</span>
</p>

Оба элемента

1

span

1

font-family

1

p

1

span

1

font-size-adjust

1

adjust

1

0.5

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

1

font-size-adjust

У вас все квадраты на странице примера имеют одинаковую высоту? Что я говорила?

После нескольких экспериментов я выбрала значение

1

0.455

p{
	font-family: Times New Roman;
	font-size: 400px;
}

span{
	border: 1px solid #00ff00;
}

.adjust{
	font-size-adjust: 0.455;
}

Если вы снова перейдете на страницу примера, то обнаружите, что квадраты с зелеными границами имеют одинаковую высоту (прим. переводчика - у меня они имели не совсем одинаковую высоту) - то есть теперь у нас величина свойства

1

font-size-adjust

Пример работы свойства font-size-adjust

Для того чтобы показать, как в действительности работает свойство

1

font-size-adjust

На этой странице

1

font stack

Браузер Safari генерирует эту страницу следующим образом:

А вот так генерирует эту страницу браузер Firefox:

Как видите, браузер Firefox поддерживает одинаковую x-высоту (

1

x-height

Мною не рассматривался вопрос выравнивания текста (свойство

1

text-align

1

font-size-adjust

Кроме того, даже не смотря на то, что первый блок

1

div

1

div

Заключение

Догадываюсь, что использование свойства

1

font-size-adjust

Признаюсь, что я не тестировала свойство

1

font-size-adjust

У Inyaili de Leon есть еще одна интересная статья, которую планируется мною прочитать - “Будущее CSS типографики” (The Future Of CSS Typography) на малоизвестном ресурсе для дизайнеров Smashing Magazine.

Примечание переводчика: интересная, как и всегда, у девушки получилась статья. Для меня свойство

1	font-size-adjust

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

1	font-size-adjust

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

Оригинал статьи расположен по адресу - “The Little Known font-size-adjust CSS3 Property”.