Search
Write a publication
Pull to refresh
0
0
G0RIK @G0RIK

User

Send message

Веб-шрифты на распутье

Reading time11 min
Views31K
Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.

Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила @font-face для привязки шрифтов. Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.

Для начала, обзор последних событий:
  1. 18-ого марта 2010 года была учреждена группа Web Fonts Working Group в W3C. Её первая задача была утвердить спецификацию WOFF как стандарт доставки sfnt (OTF и TTF) шрифтов в веб в «сжатом» виде.
  2. Была представлена отрисовка шрифтов в IE9 с помощью Windows’s DirectWrite в IE9 Platform Preview.
  3. Появились первые инструменты для подготовки веб шрифтов, такие как Font Squirrel’s @Font-Face Generator и EOTFAST.
  4. Пошла новая волна «шрифтохранилищ» в виде Typekit, Typotheque и бесплатного, опенсорсного Kernest.
  5. Появились первые “трастовые/кредитные” лицензии на веб-шрифты от дизайнеров коммерческих шрифтов.
  6. CSS3 Fonts Module включил в себя некоторые продвинутые свойства OpenType.
  7. Adobe Flash, когда-то надежная, кросс-платформенная среда замены текста (sIFR), сейчас выглядит абсолютно убогой.
  8. Google запустил бесплатный сервис шрифтов с растущей библиотекой. Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам…
Читать дальше →

Прикручиваем клевые шрифты с помощью @font-face

Reading time3 min
Views43K
Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:
  • сохраняется поиск по тексту, потому что это текст, а не картинка;
  • появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
  • никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

Читать дальше →

Дрессируем box-shadow

Reading time6 min
Views98K
Простой пример box-shadow Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому можно получать весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).
Читать дальше →

Улучшаем border-radius.htc

Reading time1 min
Views17K
Думаю многим верстальщикам известно решение, которое заставляет IE рисовать скругленные уголки: «curved-corner» (или border-radius.htc).

В этой статье я расскажу, как избавиться от ошибок «Invalid argument» при его использовании, а также как в разы ускорить его работу.
Читать дальше →

Еще один прибитый футер. Переменная высота, блочная верстка, JS опционально

Reading time2 min
Views3.2K
Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.
Читать дальше →

Extend Grid — делаем жизнь верстальщика немного проще

Reading time3 min
Views4.3K
Само понятие модульной сетки, за последние несколько лет стало чрезвычайно модным. В первую очередь у дизайнеров. И во-вторую очередь у верстальщиков.

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

Немного про модульные сетки

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.

Читать дальше →

Новая верстка страницы результатов поиска

Reading time2 min
Views5.3K

Большинство, конечно, не заметили, что под капотом страницы с результатами поиска уже несколько месяцев новая верстка.


Что же нового


Благодаря концепции независимых блоков, поддержка и разработка страницы с результатами поиска стали проще. Те, кто был на наших субботниках, посвященных верстке, или смотрел записи (1, 2), слушал наши доклады на других конференциях — знают, насколько это удобно.

Мы пошли дальше, развивая эту идею до концепции Абсолютно Независимых Блоков, что позволяет писать очень эффективный с точки зрения производительности CSS. Один элемент — одно правило.


Тут лирико-техническое отступление: дело в том, что браузеры читают CSS-правила справа-налево. Например, если у вас написано правило .b-my-block .title a {color: #f00;}, то браузер сначала выберет все элементы на странице, потом выберет все , у которых есть элемент-предок с классом title, потом только те , у которых элемент-предок с классом title, у которого есть элемент-предок с классом b-my-block.

Поэтому мы приняли решение, и вся новая верстка в Яндексе делается с АНБ. Правило выше должно быть записано как: .b-my-block__title__a. Двойное подчеркивание — признак того, что это элемент блока. Подробнее в клубе Блок, Элемент, Модификатор.


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


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

Делаем мы это с помощью маленькой утилиты jeanny, специально написанной верстальщиком поиска.


При изменении или добавлении элементов на странице существующая таблица замен сохраняется. Таким образом, закешированные стили не затрагиваются.


Отдельно про стили. Мы разделили весь CSS на ядро, которое подключается внешним файлом и кешируется, и опциональные элементы: различные колдунщики, спецсниппеты. Стили таких элементов подключаются inline в HTML-код страницы.


В результате


  • мы получили удобную в поддержке верстку, уменьшили в два раза размер CSS (было 22Кб, стало 12Кб),
  • уменьшили время отрисовки страницы, особенно это заметно в IE6/7, где скорость увеличилась более чем на 100%.

Впереди много планов и экспериментов. Следите за новостями.


<verstka/>.

Страничка для счастливых обладателей IE6

Reading time1 min
Views6.1K
Наконец-то и я решился… Все новые проекты отныне будут иметь спец-страницу для Internet Explorer 6.

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

Фиксим png в IE6 с помощью expression, одним классом и без использования однопиксельного gif'а

Reading time6 min
Views860
Это давно известная проблема. У этой проблемы существуют 1000 решений, правда все они используют в конечном счёте один и тот же, проверенный AlphaImageLoader. Я, скорее всего, не открою Америку, а лишь хочу рассказать вам об expression'е, которым с недавних пор пользуюсь и которого достаточно в 99% случаев, а также объясню как, почему и зачем я его написал.
Читать дальше →

Пишем кроссбраузерный UserJS. Пример №2: переопределяем alert()

Reading time1 min
Views2.6K
Начало: Пример №1: меняем логотип Яндексу

Прошлый раз меня спросили: "А из UserJS есть доступ к переменным страницы?".

Ответ: да.

Я покажу пример с функцией alert(). alert — переменная страницы, метод window. Заместо alert может быть любая другая переменная.

Читать дальше →

Вскрываем эксплоиты, шифрованный javascript, вредоносные iframe — русский мануал Malzilla

Reading time3 min
Views5.7K
Интересуясь информационной безопасностью, я часто имею дело с зараженными сайтами, содержащими фреймы на эксплоиты, шифрованный javascript, запутанные редиректы… Для облегчения работы я использую open source программу Malzilla. К сожалению на русских просторах интернета очень мало информации об этой тулзе, поэтому я хочу перевести официальный мануал к ней. Всего в нем 6 частей, ниже следует перевод первой из них.
Читать дальше →

Создание прототипа с помощью CSS-фреймворка Grid 960

Reading time10 min
Views24K
imageGrid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа.
Читать дальше →

Пол Грэм

Reading time2 min
Views56K
Paul GrahamСколько раз я уже перечитывал статьи Пола Грэма, столько раз я удивлялся его потрясающему умению открывать глаза на вроде бы обычные вещи. И потрясающей способности интересно описывать окружающий нас мир.

Да, это он в 1998 году продал свою компанию Viaweb интернет-гиганту Yahoo, которая впоследствии назвала этот продукт Yahoo Store. Да, это он основал венчурный фонд Y Combinator. Да, это его журнал BusinessWeek включил в список 25 наиболее влиятельных людей в Сети за 2008.

Хотите читать по-настоящему интересные аналитические статьи? Вам однозначно к Полу. Я настоятельно рекомендую прочитать его заметки. Особенно если вы it-шник. Особенно если вы собираетесь открывать свой бизнес.

Читать дальше →

1001-ый способ вертикального выравнивания

Reading time2 min
Views128K
О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).
Читать дальше →

Mozilla Firefox + Aero

Reading time1 min
Views4K
Не так давно на Хабре писали про будущие версии FireFox и их обновленный внешний вид, включающий в себя поддержку эффектов Aero:
Screen

Но многие не знают, что такой внешний вид можно реализовать в уже выпущенных версиях.
Вариант 1:
Установливаем дополнение StrataGlass, включающее поддержку Aero у панелей браузера и, специально заточеную для этого, тему Strata40 (такая же как на скриншоте).
Для скрытия строки меню можно использвать HideMenuBar или более гибкий Personal Menu (позволяет добавить кнопки Tools и тд).
Читать дальше →

Мой редактор BB кодов

Reading time1 min
Views3.3K
Некоторое время назад я опубликовал статью «Простейший редактор BB кодов». В запале обсуждения пообещал выполнить редактор в виде плагина. Вчера у меня выдалось несколько свободных часов, вот выполняю обещание.
Читать дальше →

Расширения Firefox — Работа с настройками

Reading time5 min
Views4.5K
Сегодня я хотел бы рассказать о том, как можно реализовать систему настроек для своего расширения. Начиная с определения опций и заканчивая добавлением в ваше расширение возможности менять настройки с помощью созданных вами диалоговых окон.

Первую статью, надеюсь из будущего цикла моих статей, можно найти здесь.

Итак, приступим

Разбираемся с анимацией в jQuery

Reading time4 min
Views31K
imageЗдравствуйте. Сегодняшний топик я хотел написать о том, что механизм анимации в jQuery не эффективен, создает кучу таймеров, каждый из которых работает по отдельности, что приводит к чрезмерно частой перерисовки контента и сильно тормозит браузер, и хотел описать некоторые приемы написания «правильной анимации». В ходе подготовки примеров я понял, что я ошибался. Механизм анимации jQuery действительно не эффективен, создает кучу проблем, но причины этих проблем вовсе не в создании большого количества таймеров, а в нечте совсем другом, и, кажется, я добился замечательных результатов в устранении этих проблем.
Читать дальше →

jQueryPad — мечта разработчика jQuery

Reading time1 min
Views1.6K
Доступен для бесплатной загрузки инструмент jQueryPad, который может значительно облегчить жизнь разработчикам использующим jQuery. Этот инструмент предлагает работу с целевым html, запросами jQuery и результатом запросов в одном окне:



Здесь, нижняя часть с текстом — это встроенный компонент Internet Explorer с результатом работы jQuery и возможностью посмотреть исходный код. jQueryPad так же находит другие установленные браузеры для организации просмотра результата в них. Пример найденных браузеров на скриншоте в блоге автора.

jQueryPad написан на WPF и требует для работы .NET Framework 3.5 Service Pack 1

Почитать анонс jQueryPad можно в блоге автора.
Прямая ссылка на архив с программой.

Information

Rating
Does not participate
Location
Минск, Минская обл., Беларусь
Date of birth
Registered
Activity