(обн. )
Карманное руководство по написанию SVG. Глава 3
9
Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.
|
|
|
Cтатьи по тегу «перевод»
Заметки о черновике CSS-свойства «alt»
Перевод статьи Брюса Лоусона «Notes on draft CSS “alt” property» с сайта brucelawson.co.uk.
Недавно в Рабочей группе CSS была дискуссия про свойство alt, которое должно было быть добавлено в CSS. Цель этого свойства – помочь вспомогательной технологии понять значение символов юникода, встроенных в визуальное представление документа с помощью сгенерированного контента CSS. Проблема описана Джеймсом Крейгом – славным малым по доступности контента из Apple.
Вот уже год как это свойство поддерживается в виде -webkit-alt и только что было добавлено в черновик спецификации CSS-модуля псевдоэлементов 4-го уровня. Представим, что вы используете символ звездочки, чтобы показать что что-то является «Новым» при помощи генерации CSS-контента, используя в качестве селектора класс .new.
Карманное руководство по написанию SVG. Глава 2
Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.
|
|
|
Расширение jQuery UI для вертикальных табов
Одна из самых крутых вещей в jQuery – это механизм расширения, встроенный в фабрику виджетов. В моей будущей книге про jQuery UI я посвящаю целую главу созданию расширений и, теперь, когда книга почти что готова, я хочу публично поделиться несколькими расширениями, которые я написал для всеобщего использования.
(обн. )
Карманное руководство по написанию SVG. Глава 1
Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.
|
|
|
(обн. )
Карманное руководство по написанию SVG. Введение
Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.
|
|
|
Почему viewport — метатег?
Адам Брэдли спросил:
Брюс, <meta> — это ведь данные о данных, так почему же viewport — метатег, если он командует браузеру, что делать, а не описывает себя?
Маркос Касерес ответил:
Адам, Брюс, это единственный элемент, который можно использовать в голове документа, не нарушая обратной совместимости. Семантика ни при чем.
HTML никогда не требовал наличия элементов <html>, <head> и <body> (только валидатор XHTML требовал этого). Так что если открыть тест 1 в любом браузере и просмотреть исходник, вы увидите, что этих трех элементов там нет. Но если изучить DOM в любом соотв. инспекторе, вы увидите, что браузер вставил эти элементы.
(обн. )
Руководство по SVG-анимациям (SMIL)
Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суайдан. Публикуется с разрешения автора.
Перед вами гостевой постинг Сары Суайдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.
Введение
SVG-графику можно анимировать с помощью анимационных элементов. Эти анимационные элементы изначально были определены в спецификации анимаций SMIL. В их число входят:
<animate>— позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;<set>— являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойстваvisibility;<animateMotion>— позволяющий двигать элемент по заданной траектории;<animateColor>— изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент<animateColor>устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.
В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят:
(обн. )
Идеальная ширина столбца для веба
Недавно я создал инструмент, который может помочь вам установить идеальную длину строки текста на веб-странице. Вы можете регулировать несколько таких переменных, как font-family и язык. При перемещении ползунка можно увидеть, какое количество слов или символов находится в строке. Теперь вы можете выбрать идеальный размер, основываясь на той теории, которая вам больше нравится (10 слов или что-нибудь между 45 и 75 символов). Согласно мнению типографа Роберта Брингхёрста это самый лёгкий способ определить идеальный размер.
Шпаргалка по шпаргалке по Flexbox
Хотя я и не новичок в магии Flexbox, я понимаю, что пока ещё не использую её очень часто. Как результат, в конечном итоге я останавливаюсь и возвращаюсь к этой статье на CSS-Tricks, всякий раз, когда появляется возможность использовать силу Flexbox.
Я задалась целью создать наглядный материал, чтобы быстро получать краткую справку по Flexbox, когда я буду натыкаться на такие моменты неясности в будущем. Мне нравится думать об этом, как о маленькой диаграмме (блок-схеме? чем-то вроде дерева решений?), которая является шпаргалкой… основанной на шпаргалке.
Посередине с элементом <center>
Недавно я написал пост в твиттере, чем озадачил некоторых людей. Они, возможно, подумали, что это был троллинг или сарказм!
Элемент <center> — это потрясающе. Почему я избегал его все эти годы?
Это легче
Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:
- Я использую элемент <center>.
- Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.
(обн. )
Список псевдоэлементов для стилизации элементов управления формы
Стилизация элементов формы является больной темой при разработке веб-приложений. Исторически, веб-разработчикам приходилось принимать те элементы управления форм, которые предоставлял браузер, не надеясь на кастомизацию.Тем не менее, браузерные движки добавляют всё больше и больше разных зацепок через псевдоэлементы, дающие автору некоторый контроль над отображением.
Несмотря на то, что все эти псевдоэлементы специфичны для каждого браузерного движка (и поэтому требуют браузерных префиксов), они всё равно могут быть полезными для кастомизации отображения в каждом из них. Эта статья – моя лучшая попытка составить полный список псевдоэлементов, доступных в движках Trident, Gecko, и WebKit. На момент написания этой статьи движок Blink с недавних пор является ответвлением WebKit, так что псевдоэлементы в них идентичны. Я не в курсе на счёт псевдоэлементов, которые поддерживает Presto.
Руководство по внедрению CSS-колонок в адаптивный дизайн
Следующяя статья написана приглашённым автором Кэти Декора (под редакцией Джеймса Моррисона). Кэти исследовала колонки CSS и их отзывчивость в работе. Но, к сожалению, она не смогла найти много информации на эту тему. Поэтому, как истинный герой, она написала об этом сама. Давай, Кэти:
С помощью колонок CSS вы можете создавать макеты в стиле журнальной верстки с небольшим добавлением разметки, которая будет адаптироваться к любой, даже к не фиксированной ширине. Браузеры, которые поддерживают CSS-columns, сделают нужные расчеты, чтобы вписать и распределить содержимое по аккуратным колонкам. Если вы уже работаете с резиновым макетом, то колонки в этом случае будут подстраиваться автоматически. С правильной комбинацией свойств, колонки CSS являются интересным вариантом для создания макета, который может быть отзывчивым и поддерживает изящную деградацию.
Поведение курсора при наведении на текст
По умолчанию, во всех основных браузерах, при наведении курсора мышки на текст на веб-странице, оный изменяется с обычного указателя (курсора «по умолчанию») на «текстовый» курсор. Вы можете наблюдать это на демонстрационном гиф-изображении ниже или просто протестировав это на почти что любой веб-странице.
(обн. )
Небольшой календарь на CSS
Небольшой календарь на CSS
