Pull to refresh
114
0
Ihor Zenich @Delka

Frontend Developer for EPAM Systems

Send message

Штрихи, штришки и штришочки

Reading time6 min
Views96K
Практика показывает, что если тире или кавычки — это первое, что изучают при появлении интереса к «типографике» (а на самом деле — к грамотному набору текста), то правильное употребление апостро́фа, знаков минут и секунд, знака ударения вызывает почему-то бо́льшие затруднения. На самом деле, всё очень просто, и статья будет довольно короткой. Всё, о чём будет сказано ниже, относится к современной русской традиции типографики.
Поехали!
Total votes 89: ↑80 and ↓9+71
Comments94

Всё ли так просто с многоточием?

Reading time7 min
Views94K

Отличие многоточия от трёх точек


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



Читать наиболее полное руководство по применению многоточия
Total votes 146: ↑129 and ↓17+112
Comments78

2+3

Reading time1 min
Views714
Маленькая заметка о том как запускать несколько разных версий Лиса. Простым пользователям нафиг ненадо, а вот вебразработчикам и кодерам пригодится.
Предположим у вас уже есть Лис версии 2.0.*, и вы стремясь к рекорду скачали 3.0. Не спешите ставить, если все пустить на самотек — установку по умолчанию то затрется ваш предведущий профайл. Поэтому запускаем уже установленую версию фокса с ключем -ProfileManager, примерно так firefox -ProfileManager.
Создаем дополнительный профайл, после чего начинаем установку третьей версии. Ее необходимо ставить отдельно не в туже директорию, я выбрал директорию рядом. Получилось примерно так, особой гениальностью я не блистаю потому и приставка к версии.

Версия Куда поставил Профиль
2.0.14 C:/Program Files/Firefox/2.0.14/ 2.0.14
3.0 C:/Program Files/Firefox/3.0/ 3.0


А теперь давайте создадим башскрипт firefox.bat который собственно и будет запускать фокс
@echo off
set MOZ_NO_REMOTE=1
start "" "C:\Program Files\Firefox\%1\firefox.exe" -p %1
set MOZ_NO_REMOTE=0


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

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



Спасибо за внимание.
Total votes 49: ↑37 and ↓12+25
Comments48

Картинки в теле страницы с помощью data: URL

Reading time1 min
Views4.9K
Примечание: ниже расположен перевод статьи «Inline Images with Data URLs», в которой рассматривается вопрос о внедрении картинки на веб-страницы при помощи data:URI. Эта схема позволяет вставить код картинок прямо в (X)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Мои комментарии далее курсивом.

Встроенные (inline) изображения используют схему data:URI для внедрения прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как «непосредственные» данные. Такие объекты должны рассматриваться так же, как и любые другие внешние файлы. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешних ресурсах.

Поддержка браузерами data:URL



Хотя Opera 7.2+, Firefox, Safari, Netscape и Mozilla поддерживают data:URI, Internet Explorer 5–7 совсем нет. Однако, сообщается, что Internet Explorer 8 будет поддерживать эту схему, так как проходит Acid2 тест, что позволяет использовать data:URL как реальную альтернативу для внедрения небольших декоративных изображений. Существует также несколько приемов для поддержки старых версий Internet Explorer.

читать дальше на webo.in →
Total votes 54: ↑50 and ↓4+46
Comments48

Вредная верстка

Reading time9 min
Views74K
Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:


  • О плохих приемах современной верстки;
  • О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.


Читать дальше →
Total votes 203: ↑175 and ↓28+147
Comments339

Оформление цитат на сайтах

Reading time8 min
Views94K
Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Читать дальше →
Total votes 108: ↑105 and ↓3+102
Comments59

Yahoo Search будет индексировать микроформаты

Reading time1 min
Views1.2K
В качестве очередного шага на пути к созданию открытой поисковой платформы, компания Yahoo объявила о поддержке микроформатов и других семантических веб-стандартов. Таким образом, разработчики могут смело внедрять в HTML-код данные hCard, hCalendar, hReview, hAtom и XFN, а также создавать структурированные фиды на RDF и eRDF. Поисковый робот Yahoo будет корректно распознавать перечисленные микроформаты и добавлять информацию в общую базу.

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

Было:

Будет:

Читать дальше →
Total votes 29: ↑28 and ↓1+27
Comments23

CSS только для Mozilla (в том числе — FireFox)

Reading time1 min
Views19K
У верстальщиков до сих пор возникает задача — подключить стили только для определённого браузера. Для IE проблема решаема — мало кто из верстальщиков не знает что такое conditional comments. Но исчезающе малое количество народу знает про per-site user stylesheet rules. Интересны они тем, что Mozilla FireFox поддерживет их через собственное правило — «@-moz-document».

Вообще, это правило позволяет подключать стили в зависимости от домена, URL или его префикса. Для нас важно, что эти правила увидит только FireFox.

Простой пример использования, из которого становится понятен общий принцип:

White in FireFox

У приведённого примера есть недостаток — такой CSS не пройдёт валидацию, что лично для меня определяющей целью не является, но для многих это как скаутский значок.

Принципы фильтрации по URL и доменам так же могут оказаться полезными, например, в случае, если CSS для нескольких поддоменов грузится с одного адреса, где располагается вся статика. О них можно почитать, например, в архиве W3C.

P.S. Если в статье что-то не так — подскажите. Это мой первый опыт.

Оригинал статьи опубликован в моём блоге.
Total votes 31: ↑27 and ↓4+23
Comments48

Делаем закругленные уголки с помощью псевдоэлементов: before и: after

Reading time1 min
Views3.4K
Внимание! Это все устарело, но публикацию не удаляю, чтобы все знали как мы мучались в 2007 году из-за IE6 :-)

Задача: сделать врезку с закругленными уголками с минимумом html-кода.

Читать дальше →
Total votes 62: ↑58 and ↓4+54
Comments147

Боремся с толстыми шрифтами на темном фоне в Сафари

Reading time1 min
Views1.4K
Всем известно, что на маках замечательный рендеринг шрифтов ;) Но, к сожалению, на темном фоне при сглаживании «Medium» текст выглядит очень жирным, что меня, мягко говоря, раздражает. Вот, например, кусочек меню Smashing Magazine с рендером по-дефолту:



К счастью, я нашел обходной путь этой проблемы. Заключается он в следующем: если указать тень (параметр text-shadow), то для текста с тенью включается «фотошоповский» рендеринг без субпиксельного сглаживания (Standard в System Preferences/Appearance). И никто не мешает нам сделать нулевую тень :)

Прописываем в CSS элементам такой параметр: text-shadow: #000 0 0;. Смотрим:



Вуаля! Надеюсь, этот трюк поможет эстетствующим любителям шрифтов и Сафари :)

UPD: Если вас смущает ругающийся валидатор, то могу сказать, что это баг самого валидатора, который проверяет CSS2.1, т.к. параметр text-shadow является валидным и присутствует в спецификации CSS2 и CSS3. Решение проблемы — в More Options валидатора выбрать Profile: CSS version 2 или CSS version 3.
Total votes 34: ↑34 and ↓0+34
Comments20
12 ...
22

Information

Rating
Does not participate
Location
Харьков, Харьковская обл., Украина
Date of birth
Registered
Activity