5 способов оптимизации CSS
Статья от 23.07.09 в категории CSS
Теги: CSS, оптимизация
Некоторые из нас, возможно, помнят времена, когда 30KB были рекомендованным максимумом размера веб-страницы, включая HTML, CSS, Javascript и изображения. На данный момент у многих достаточно больших сайтов только CSS-стили имеют размер более 30KB.
Но существуют некоторые принципы, которые помогут оптимизировать ваш CSS код. Оптимизация не просто уменьшает размер файла, она делает ваши CSS-стили более организованными и эффективными. Использование оптимальных методов CSS неизбежно приведет к уменьшению размера CSS-файлов.
1. Используйте сокращенные формы
Используйте сокращенные формы таких свойств как margin, border, padding, background, font, list-style. Это самый простой способ оптимизации CSS-стилей. Если вы ещё не применяете этот метод – начните сегодня.
Сокращенная форма означает, что вместо использования различных деклараций для соответствующих свойств…
p { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }
… вы используете их комбинацию:
p { margin: 10px 20px 30px 40px; }
Правила, по которым браузеры интерпретируют сокращенную запись показаны на следующих иллюстрациях.
Аналогичные правила выполняются для padding и border-weight.
По следующим правилам можно сократить свойство font
Это лишь два примера использования сокращенной формы CSS-свойств. Их использование сделает ваш код гораздо более кратким.
Более подробную информацию о сокращенной форме я нашел в . Возможно, я коснусь этого вопроса более подробно в своих следующих статьях.
Обзор CSS библиотек.
Статья от 13.07.09 в категории CSS
Теги: CSS, библиотеки
В данный момент CSS является основой современной вёрстки, и время, которое верстальщик тратит на разработку CSS стилей увеличивается с каждым днем. И сложность CSS стилей будет расти с прогрессом веб-технологий браузеров. Для того, чтобы облегчить труд веб-разработчика были придуманы CSS библиотеки.
Правильные размеры шрифта
Статья от 23.06.09 в категории CSS
Теги: CSS, типография
В большинстве случаев базовый размер шрифта – 16px. Будем отталкиваться от него.
Создаем красивые формы с помощью NiceForms
Статья от 10.06.09 в категории CSS, Javascript
Теги: CSS, Javascript, niceforms, формы
Niceforms позволяет создавать красивые формы путем замены элементов формы графическими элементами. Это полностью автономный скрипт, для его работы не требуется дополнительные библиотеки, такие как jQuery либо Prototype. Niceforms разбирает DOM-дерево страницы, находит элементы формы, скрывает их, а на их место ставит их графические аналоги. Скрипт ищет формы с классом niceform.
Изменённые формы работают так же как и обычные. Поля и кнопки созданные Niceforms полностью масштабируемые. Вы можете задать их ширину и высоту с помощью HTML-свойства. Поддерживается использование клавиатуры для навигации между элементами формы.
Более подробнаую информацию вы можете найти на сайте .
CSS-меню в стиле Mac OS
Статья от 06.06.09 в категории CSS
Теги: CSS, html, mac os, меню
Вы прошлых статьях было рассказано как сделать меню в стиле Mac OS используя Javascript, теперь сделаем примерно тоже самое используя исключительно HTML-разметку и CSS.
Основой для меню будет неупорядоченный список. Создадим две версии: расширяющееся кверху и книзу.
Для создания меню будем использовать псевдо-класс :hover на тег <li> и селектор “+” для изменения стилей пунка меню, находящихся справа.
CSS Оптимизатор
Статья от 03.06.09 в категории Новости
Теги: CSS, оптимизатор
C сегодняшнего дня на сайте доступен , разработанный csstidy.sourceforge.net.
Проблемы со шрифтами в формах и таблицах
Статья от 03.06.09 в категории CSS, Браузеры
Теги: CSS, Браузеры
Формы
Проблема состоит в том что некоторые браузеры отображают форму неправильно. Это объясняется тем, что по умолчанию форма не наследует CSS-стили семейства и размера шрифта.
Следующий CSS исправляет эту ошибку:
input, textarea, select{ font-family:inherit; font-size:inherit; font-weight:inherit; }
Таблицы
В некоторых браузерах таблицы также имеют свои стили. Вы наверно сталкивались с тем, что текст в ваших таблицах больше чем остальной на странице. Проблема таже – таблицы не наследуют свойства шрифта как и формы.
Проблема решается следующим CSS:
table{ font-family:inherit; font-size:inherit; font-weight:inherit; }
8 простых способов улучшить типографию на вашем сайте
Статья от 02.06.09 в категории CSS
Теги: CSS, html, дизайн, типография
Тут собраны 8 простых способов, которые вы можете использовать для улучшения типографии и, следовательно, сделать ваш дизайн удобней для пользователя.Многим дизайнерам кажется, что типография состоит только в выборе шрифта, размера и толщины. Но это далеко не всё. Есть множество деталей, облегчающих чтение, которыми дизайнеры зачастую пренебрегают.
Делаем кнопку как в Skype с помощью jQuery
Статья от 02.06.09 в категории CSS, Javascript, jQuery
Теги: CSS, jQuery, skype
Если вы пользуйтесь Skype, я уверен, что вы заметили анимированные кнопки для добавления большего числа людей. При нажатии на нее значок слева “прыгает” по несколько раз. Мне нравится эта анимация. Я покажу вам, как создать ту же кнопку с помощью jQuery и CSS.