При верстке HTML-шаблонов часто ловил себя на мысли, что редактору Sublime Text не хватает одной удобной вещи - инструмента для выбора цвета в процессе кодинга.

Допустим, есть блок

1

div

1

background-color

В ходе своей деятельности я постоянно пробую новые HTML-редакторы, платные и бесплатные. Платные редакторы, конечно, более “отшлифованные” и удобные в работе. Так вот, в таких редакторах, как JetBrains WebStorm, Adobe Dreamweaver, EmEditor есть функция автоматического перехвата события, когда в процессе кодинга я пытаюсь добавить цвет для элемента:

Классная и удобная штучка, не правда ли? Почему бы и для редактора Sublime Text не прикрутить подобную (ведь изначально в нем нет такой надстройки)? Совсем недавно я зарегистрировался на сервисе Toster.ru, который является детищем Харба и сделан аналогом известного StackOverflow.

Незаменимая вещь для кодера - там можно найти ответы на все вопросы, причем вопросы практического характера, что особенно ценно. То есть, другими словами, Toster.ru - это русский StackOverflow. И вот, один из вопросов на этом сервисе был посвящен возможности выбора цвета в редакторе Sublime Text. Ответили там кратко, но точно - это плагин “ColorPicker”.

Ставится “ColorPicker” быстро и стандартно для Sublime Text - через менеджер пакетов. Кстати, есть достаточно интересный адрес - https://sublime.wbond.net/, который является online-репозиторием для редактора Sublime Text. Чем удобен этот адрес - можно найти и почитать о любом из плагинов под этот редактор.

Если интересно почитать более подробно об плагине “ColorPicker”, можно зайти на страницу этого проекта на GitHub - https://github.com/weslly/ColorPicker. После установки плагин “ColorPicker” не слышно и не видно в редакторе Sublime Text.

Чтобы вызвать его для выбора цвета, нужно нажать сочетание клавиш:

• для Windows: Ctrl+Shift+C
• для OS X: Cmd+Shift+C
• для Linux: Ctrl+Shift+C

Появится стандартное окно выбора цвета под операционную систему Windows (на Mac OS X я еще не заработал):

Выбираем и вставляем нужный цвет. На странице проекта на GitHub https://github.com/weslly/ColorPicker можно увидеть скриншоты окна плагина под другие операционные системы - OS X, Linux OS, так как этот плагин можно установить и под эти платформы.

Все прекрасно. Только один момент - вызывать этот плагин придется все же “вручную”, через сочетание клавиш.

Наверное, как-то и можно “повесить” плагин “ColorPicker” на определенное событие в редакторе Sublime Text, как это сделано в том же JetBrains WebStorm. Но как это сделать - я пока не знаю. Наверное, наподобие создания сниппетов в Sublime Text?

На этом все.

В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.

На этот раз вопрос будем касаться свойства

1

-webkit-font-smoothing

Конечно, это не объяснение свойства

1

-webkit-font-smoothing

Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.

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

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

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

Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:

В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS

1

-webkit-font-smoothing

Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени - Opera). Но, чтобы свойство

1

-webkit-font-smoothing

Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):

Ну, хватит про браузеры - перейдем к CSS и свойству

1

-webkit-font-smoothing

• 1

  none

  - сглаживание вообще отключено;

• 1	antialiased

  - средняя степень сглаживания;

• 1	subpixel-antialiased

  - сильная степень сглаживания.

И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства

1

-webkit-font-smoothing

Для первого случая

1

-webkit-font-smoothing: none

Второй случай

1

-webkit-font-smoothing: antialiased

Третий случай

1

-webkit-font-smoothing: subpixel-antialiased

Вывод:

1

-webkit-font-smoothing: antialiased

Из браузерного префикса

1

-webkit-

1

font-smoothing

1

-webkit-font-smoothing

-webkit-font-smoothing: antialiased;

… дела ушли не намного вперед.

На этом все.

Продолжение темы препроцессоров для CSS, которая для меня намного интереснее всех остальных.

На этот раз остановимся на препроцессоре LESS, ибо было бы странно рассказать о SASS (SCSS) и не упомянуть о не менее популярном его аналоге. Преимуществ у LESS столько же, сколько и недостатков.

Эта статья является моей попыткой на личном опыте познакомиться с LESS Hat и сравнить ее с Compass. Про сам LESS и его синтаксис я рассказывать не буду - это глупо, ибо документация для этого препроцессора прекрасно оформлена и переведена на русский язык на оф. сайте проекта.

Плюсы - этот препроцессор развивается более динамично, это более молодой проект. Синтаксис LESS интуитивно понятный и максимально приближен к CSS, поэтому новички могут освоить его совсем без труда. Документация для LESS гораздо более подробная, с примерами и переведена на множество языков, что облегчает его изучение (для SASS это серьезный недостаток, я сам с этим сталкиваюсь постоянно, когда изучаю Compass).

Ну и последний немаловажный момент, который оказывает существенное влияние на распространенность LESS, это тот факт, что он включен в состав модного и известного фреймворка Bootstrap. То есть, все компоненты этого фреймворка созданы с использованием данного препроцессора. А если учесть, что один из трех китов CMS - Joomla 3 - создана на Bootstrap, то можно только гадать, куда заведет этот процесс.

К недостаткам LESS лично я могу отнести такой факт, как большое время для компиляции (хотя на оф. сайте один из создателей Bootstrap отвечал на вопрос, что им выбран препроцессор LESS как раз из-за высокой скорости компиляции, ибо он написан на языке Javascript). Еще один момент в минус LESS - файл с расширением .less компилируется каждый раз при обращении к нему браузера.

В SASS производится создание файла

1

.css

1

.scss

Итак, мы уже выяснили, что LESS Hat - аналог Compass под SASS (SCSS). Библиотека LESS Hat была создана командой, которая разработала плагин под Adobe Photoshop с названием CSS Hat. Этот плагин выполняет автоматизированные операции по переводу свойств любого элемента на psd-макете в свойства CSS.

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

Проект LESS Hat на сегодняшний момент является самой большой и популярной библиотекой готовых миксинов под препроцессор LESS. В отличие от плагина CSS Hat, библиотека LESS Hat бесплатная для использования. На момент написания статьи самая свежая версия этой библиотеки - v2.0.7, которую я и забираю со страницы проекта для своих собственных экспериментов. Архивчик .zip весит около 200Kb, что прилично для подобной библиотеки. Но пугаться не стоит - из всего архива нам потребуется только один файлик, а все остальное - это сопутствующая информация. Если распаковать архив, то увидим следующий список файлов и папок:

build\
  mixins\
  .gitignore
  .travis.yml
  bower.json
  Gruntfile.js
  LICENSE
  package.json
  README.md
  README-template.md

Первая папка

1

build

1

lesshat.less

1

lesshat-prefixed.less

Вторая папка

1

mixins

Теперь создаю шаблон для будущей площадки экспериментов под LESS и LESS Hat. Все как обычно - подключаю файл стилей в формате

1

.less

1

less-1.3.3.min.js

Затем вытаскиваю из папки файлик lesshat.less и кидаю его в папочку

1

css

1

style.less

Файл

1

lesshat.less

1

style.less

1

@import

1

.less

...

/* Imports
------------------*/
@import "lesshat.less";

...

Все готово для того, чтобы опробовать библиотеку LESS Hat. Применю оттуда готовый миксин

1

.border-radius(10)

1

border-radius

1

px

Также вспомним функции для работы с цветами в LESS. И воспользуемся еще двумя миксинами из LESS Hat:

1

.background-image()

1

.box-shadow()

Рабочий файлик

1

style.less

/* Imports
  ------------------*/
  @import "lesshat.less";

  /* Variables
  ------------------*/
  @width: 200px;
  @color: #778899;

  /* Block
  ------------------*/
  div{
    float: left;
    margin: 10px;
    text-align: center;
    width: @width;
    height: @width/2;
    .border-radius(10);
  }

  /* Colors
  ------------------*/
  .color{
    background-color: @color;
  }
  .lighten{
    background-color: lighten(@color, 20%);
  }
  .darken{
    background-color: darken(@color, 20%);
  }
  .saturate{
    background-color: saturate(@color, 20%);
  }
  .desaturate{
    background-color: desaturate(@color, 20%);
  }
  .fadein{
    background-color: fadein(@color, 20%);
  }
  .fadeout{
    background-color: fadeout(@color, 20%);
  }
  .spin-plus{
    background-color: spin(@color, 20);
  }
  .spin-minus{
    background-color: spin(@color, -20);
  }
  .gradient{
    .background-image(linear-gradient(to bottom, lighten(@color, 20%) 0%, darken(@color, 20%) 100%));
    .box-shadow(2, 2, 3, lighten(@color, 10%));
  }

Результат работы препроцессора LESS и его библиотеки миксинов LESS Hat показан ниже. Вот это да - работает!

Список всех миксинов, доступных в этой библиотеке, представлен в начале файла

1

lesshat.less

Подробное описание и примеры использования каждого из миксинов библиотеки LESS Hat доступно на GitHub в файле

1

README.md

В принципе - больше и сказать нечего. Подключайте и используйте LESS Hat - только так можно освоить и оценить эту библиотеку. Для себя я сделал вывод, что мне пока удобнее работать с SASS/Compass и возможностей у последнего больше, чем у LESS/LESS Hat.

На этом все.

Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов

1

li

1

ul

1

li

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов

1

li

<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
  <li>Колонка 3</li>
  <li>Колонка 4</li>
  <li>Колонка 5</li>
  <li>Колонка 6</li>
  <li>Колонка 7</li>
  <li>Колонка 8</li>
  <li>Колонка 9</li>
  <li>Колонка 10</li>
  <li>Колонка 11</li>
</ul>

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс

1

.clearfix

1

ul

1

li

1

ul

ul{
  list-style-type: none;
  width: 398px;
  margin: 100px auto;
  border: 1px solid #000;
  font: bold italic 16px/30px Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

Вот теперь немного интереснее, когда приступим к элементу

1

li

1

display: block

1

width: 45%

Все элементы сделаем плавающими влево

1

float: left

1

display: block

1

li

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила

1

padding-bottom: 10px

1

text-align: center

1

background-color: #556677

ul li{
  display: block;
  float: left;
  width: 45%;
  padding-bottom: 10px;
  text-align: center;
  background-color: #556677;
}

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом

1

nth-child

1

even

li:nth-child(even){
  margin-left: 10%;
  background-color: #667788;
}

На этом все.

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

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

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.

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

Размер шрифта в rem

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

Наиболее популярны два метода определения размера шрифта:

• размер шрифта в пикселях

  1

  px

• размер шрифта в

  1

  em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.

Размер шрифта в

1

px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в

1

em

Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения

1

em

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для

1

body

1

1em

1

10px

1

16px

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

1

14px

1

1.4em

body { font-size: 62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */

Проблема с размерами шрифта в

1

em

1

li

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

body { font-size:62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */
  li li, li p /* etc */ { font-size: 1em; }

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в

1

rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является

1

rem

Единица измерения

1

em

1

rem

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах (

1

rem

html { font-size: 62.5%; }
  body { font-size: 1.4rem; } /* =14px */
  h1   { font-size: 2.4rem; } /* =24px */

В примере, показанном выше, базовый размер шрифта установлен в процентах

1

62,5%

1

em

1

rem

1

em

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка

1

rem

1

rem

1

rem

Как же нам поступить с браузерами, которые не поддерживают единицы измерения

1

rem

1

fallback

1

px

1

px

1

rem

html { font-size: 62.5%; } 
  body { font-size: 14px; font-size: 1.4rem; } /* =14px */
  h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

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

Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения

1

rem

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

1

rem

В частности, на нем приведены удобные

1

mixin

1

rem

1

fallback

1

px

html{
  font-size: 62,5%;
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Пример использования этого SASS-mixin’а:

p{
  @include font-size(1.8);
}

… что при компиляции в CSS будет выглядеть следующим образом:

p{
  font-size: 18px;
  font-size: 1.8rem;
}

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

@mixin fontSize($sizeValue: 12 ){
    font-size: $sizeValue + px; //fallback for old browsers
    font-size: (0.125 * $sizeValue) + rem;
  }

  /* Как подключать
  --------------------*/
  p{
    @mixin fontSize(20);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 20px;
    font-size: 2.5rem;
  }

@mixin lineHeight($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin lineHeight(18);
  }

  /* Результат компиляции в CSS
  --------------------------------*/
  p{
    line-height: 18px;
    line-height: 2.25rem;
  }

А здесь представлен “полный”

1

mixin

1

line-height

1

rem

@mixin fontsize($size:1.6, $line: $size * 1.5){
    font-size:   ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size:   $size + rem;
    line-height: $line + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin fontsize(1.8);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 18px;
    line-height: 27px;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл

1

style.css

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

$rembase:     14;
$line-height: 24;

… в единицах измерения

1

rem

1

fallback

1

px

В самом конце две ссылки по тематике

1

rem