Сохранение вашей разметки кода CSS3 Slim
Веб-разработчики могут сэкономить много времени, используя более сложный синтаксис CSS3. Пользователи, которые посещают вашу страницу, ожидают максимально возможного времени загрузки, поэтому вы несете ответственность за уменьшение размеров файлов. Существует множество сокращенных приемов с использованием CSS, особенно в новой модели CSS3..
Я собрал некоторые из этих идей в руководстве ниже. Мы также должны коснуться других областей, таких как минимизация вашего кода CSS. В браузере есть инструменты, помогающие разработчикам в разработке стилей, но вы хотели бы объединить шорткоды с этим уменьшением размера файла, чтобы в конечном итоге упростить процесс рендеринга вашего сайта..
Основные советы по форматированию
Прежде чем мы перейдем к фактическому синтаксису CSS, я хочу перейти к теме как написать свой CSS. Если вы немного знакомы с веб-дизайном, вы наверняка уже видели таблицу стилей раньше, возможно, не раз. Первая часть каждой команды называется селектор. Это предназначается для типа элемента, который получит стили, добавленные в фигурных скобках, также известный как свойства.
Встроенный уровень
При использовании встроенных стилей каждое свойство записывается одно за другим с использованием только пробелов для их разделения. Этот метод лучше всего применять к селекторам, где вам нужна только пара свойств. Это сэкономит вам место на странице, и прокрутка таблицы стилей будет намного быстрее. Если вы никогда раньше не сталкивались с встроенным CSS, я добавил ниже небольшой пример, предназначенный для ссылок на якорь HTML..
color: # 648cc8; вес шрифта: полужирный; a: hover color: # 739cda; текстовое оформление: нет; a.alt color: # bd4949! важный;
Уровень блока
С другой стороны, свойства стиля блока вводятся в одну строку для каждой пары ключ / значение и часто имеют отступ для более быстрого редактирования при сканировании кода. Около 99% чистых таблиц стилей, с которыми я столкнулся, используют это форматирование, и оно стало отраслевым стандартом для многих дизайнеров. Если ваш селектор использует более 6 или 7 свойств, это лучший формат для применения.
Принимая во внимание множество новых свойств CSS3, вы также понимаете, насколько быстро заполняются ваши таблицы стилей. И многие из этих свойств поддерживают специфичные для браузера копии, которые требуют почти повторяющихся записей кода (таких как радиус границы). Вы можете проверить мой пример свойства блока, установленного ниже, для примера div.
.wrap display: block; обивка: 6px 10px; фон: #FFF; радиус границы: 4 пикселя; -moz-border-radius: 4px; -webkit-border-radius: 4 пикселя; -o-border-radius: 4px;
Ни один из способов написания CSS не является лучше, чем другой. В конечном счете, вы, как разработчик, выбираете, какой стиль вы предпочитаете, и даже это зависит от проекта, над которым вы работаете. Даже часто можно встретить CSS, где дизайнеры смешали вместе! Я лично чувствую, что “работы в процессе” как правило, с блочными стилями легче, так как я постоянно изучаю таблицу стилей, чтобы внести изменения или дополнения. Но для доменов с интенсивным трафиком минимизация вашего CSS-файла - это лучший способ.
Держать их стройными
Используя множество коротких кодов, доступных в CSS3, вы можете сэкономить много времени на разработку. Редактирование HTML-элементов станет намного проще, если вы поймете этот жаргонный язык. Кроме того, ваш код будет выглядеть более четким и простым для просмотра.
Единственным недостатком является то, что не все браузеры полностью поддерживают эти свойства. Для многих из существующих проблем, таких как Internet Explorer и Netscape, есть обходные пути. К счастью, Интернет постоянно прогрессирует, и по мере роста популярности CSS3 мы, несомненно, также испытаем рост совместимости с браузерами..
RGBa Цвет Прозрачность / Непрозрачность
Новый RGBavalue не совсем CSS3 имущество, но альфа-прозрачность относится только к CSS3. Вместо общих значений «красный, зеленый, синий», которые вы передаете для цвета, вы можете теперь включить четвертый вариант прозрачности цвета. Из-за этого веб-разработчики почти полностью используют прозрачные PNG.
Базовый синтаксис требует значения от 0 до 255 в первых трех (3) слотах и от 0 до 1,0 в альфа-позиции. Цветовой диапазон зависит от того, какая часть каждого оттенка (RGB) видна: 0 - это ничто, а 255 - полное..
/ ** синтаксис ** / background: rgba (имя-значения, имя-значения, имя-значения, имя-значения, значение-непрозрачность); / ** пример ** / div background: rgba (255, 255, 255, 0,3);
Кросс-браузерная совместимость
Другое свойство помутнение может быть использован в некоторых обстоятельствах. Однако это повлияет на весь элемент HTML и его внутреннее содержимое, а не только на фон, как вы видели в моем примере..
К сожалению, Internet Explorer пока не поддерживает значение цвета RGBa. Как правило, для этих нестандартных браузеров вы должны включать резервное свойство с полной непрозрачностью. Вы устанавливаете это с теми же значениями, но исключая 4 (непрозрачность). Это будет выглядеть примерно так RGBA (255, 255, 255)
Кроме того, Internet Explorer может обрабатываться более изящно через условные выражения. На самом деле вы можете проверить, работает ли браузер IE, и отобразить собственный фильтр Microsoft CSS по команде. Я продемонстрировал это в своем примере ниже (обратите внимание, что это будет где-то в вашем HTML-файле):
CSS3 пограничный радиус
Я читал несколько запутанных веток на форуме о создании закругленных границ с помощью CSS3 - не столько по сравнению с тем, как это делается, но с помощью привередливой поддержки браузера, веб-разработчики пытаются найти самый простой код, который будет работать и работать так, как ожидалось..
/ ** синтаксис ** / border-radius: верхний левый верхний правый нижний правый нижний левый;
граница радиуса Свойство имеет схожий синтаксис с созданием стандартной границы, за исключением того, что в этом случае мы нацеливаемся на углы рамки. Это свойство будет фактически принимать 1 - 4 значения, и каждое из них предназначено для различных настроек углов.
- 1 значение: Все четыре угла округлены до одинакового значения
- 2 значения: Первое значение относится к
верхний левыйа такжеНижний правыйв то время как второе значение поражаетв правом верхнем углуа такжеНижний левый - 3 значения: Сначала относится к
верхний левыйугол второйНижний левый&в правом верхнем углув то время как 3-е и последнее значение применяется кНижний правый - 4 значения: Все 4 значения нацелены на углы в следующем порядке: верхний левый, верхний правый, нижний правый, нижний левый
/ ** пример ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Итак, в приведенном выше коде мы используем граница радиуса применить закругленный эффект 4px на все, кроме Нижний правый граница, которая получает сглаженную кривую 8px. Если вы заметили это, оба этих кода на самом деле будут применять один и тот же стиль.
Кросс-браузерная совместимость
Теперь главная проблема в том, что граница радиуса поддерживается только в нескольких браузерах. Internet Explorer 9 недавно добавил отличную поддержку, и Opera также сделает это. Однако даже Опера создала свою собственную собственность с -о-граница радиуса нацеливание на их конкретный браузерный движок. Дополнительно -Мос-граница радиуса поддерживается программным обеспечением Firefox / Gecko и -WebKit-границы радиуса для Google Chrome / Safari.
Приведенный ниже код является примером моего простого шаблона для создания закругленных углов с самой большой глобальной поддержкой браузера..
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Другой действительно замечательный аспект CSS3 - поддержка коробка а также тени текста. Это было такой проблемой для разработчиков в прошлом, так как фоновые изображения были единственным реалистичным вариантом. Этот синтаксис фактически выполняет сокращенную роль, которая намного проще, чем другие свойства, которые мы рассмотрели. Сначала сложно запомнить правильный порядок значений ключей, но чем больше вы будете практиковаться, тем легче будет.
К сожалению, Internet Explorer снова лишний. Все другие крупные браузеры, включая Firefox, Google Chrome, Safari и Opera, полностью поддерживают текст-тень имущество. Разработчики пытались встроить свою собственную поддержку IE, но все еще очень ограничивают. Основной синтаксис записывается следующим образом:
/ ** синтаксис ** / text-shadow: x-offset y-offset цвет радиуса размытия; / ** пример ** / div text-shadow: 2px 2px 1px # 111;
Смещение по осям X и Y говорит браузеру, как далеко над правой и нижней точкой должна появиться тень. Вы можете использовать отрицательные значения, чтобы расположить тень выше и выше слева соответственно. Но это выглядит очень неловко, поэтому я рекомендую натуральные числа. Также значение радиуса размытия можно использовать для сглаживания жестких краев, если тень текста кажется неестественной.
Этот синтаксис просто смотрит на основную нотацию при создании одного эффекта тени. Высокоразвитые дизайнеры научились даже создавать несколько теней одновременно! Я ссылаюсь на этот удивительный пост в блоге еще в апреле 2011 года, в котором подробно рассматриваются наложения текстовых теней. Если у вас есть время, просмотрите содержимое, чтобы получить представление о более продвинутых функциях, и обязательно добавьте его в закладки в будущем.!
Кросс-браузерная совместимость
Самый большой недоброжелатель, с которым мы сталкиваемся, - Internet Explorer. Снова и снова Microsoft выпускает свой собственный движок рендеринга браузера, который в лучшем случае работает на уровне ниже. Теперь, даже когда CSS3 берет верх над текстовыми тенями, IE все еще отстает. Существует отличный демонстрационный сайт, где вы можете найти примеры кода и традиционные условные комментарии CSS.
По сути, вы хотите проверить, соответствует ли браузер вашего пользователя какой-либо версии Internet Explorer 9 или ниже. Затем, используя фильтры MS, мы можем применить тень к любому текстовому элементу (выше, мы используем абзац)..
Облегчение переходов
CSS3 переход самая популярная недвижимость на рынке дизайна со времен бабушкиных блинчиков! Веб-дизайнеры суетятся о чистых переходах CSS, хотя поддержка в основном ограничивается браузерами Webkit. Конечно, вы можете использовать вторичные свойства для Mozilla и Opera и тому подобное. Но сокращенная запись действительно подкупает, особенно если вы по какой-то причине противитесь анимации JavaScript.
Во-первых, давайте посмотрим на исходное свойство перехода. Для этого потребуется 4 значения, которые вы также можете разбить на сами свойства. Они соответствуют с переходом имущество(каков эффект), продолжительность(как долго это вытягивать), временная функция(изменения в скорости по анимации), и задержка(количество секунд ожидания перед анимацией).
/ ** синтаксис ** / transition: задержка функции времени действия свойства; / ** пример ** / img transition-property: opacity; длительность перехода: 2 с; функция времени перехода: легкость в работе; задержка перехода: 0,5 с;
Вы должны интуитивно понимать назначение большинства этих свойств, кроме, возможно, функции синхронизации. Хотя это свойство сначала сбивает с толку, оно просто по-разному анимирует ваш переход, поэтому эффект начнется медленнее, закончится медленнее или что-то подобное..
В W3 Schools есть функция онлайн-синхронизации, в которой перечислены все возможные значения, которые вы можете попробовать. Я постоянно нахожу себя в поисках этих руководств, но они делают такие удобные закладки.
Кросс-браузерная совместимость
Теперь давайте введем полную поддержку браузера в игру. По умолчанию свойство перехода только поддерживается более новыми версиями Safari. Тем не менее, многие пользователи по-прежнему требуют -WebKit Префикс, который также применяется к Google Chrome и аналогичным движкам рендеринга. Ниже “доработан” Шаблон блока кода, который я рекомендую сохранить и использовать, если вам нужна поддержка переходов из большинства веб-браузеров.
img transition: непрозрачность 2s, легкость в 1с; -webkit-transition: непрозрачность 2s, легкость в 1с; / * chrome, safari, flock * / -moz-transition: непрозрачность 2s, легкость в 1с; / * mozilla + gecko * / -o-transition: непрозрачность 2s, легкость в 1с; / * опера * /
Текстовые эффекты
Это свойство не велико, и вы не найдете много веб-дизайнеров, использующих его сегодня. Но вы можете использовать текст-тактный создать действительно аккуратные эффекты с вашими шрифтами. Браузеры Webkit, такие как Safari и Chrome, пока являются единственными настоящими сторонниками этого свойства. Opera и Firefox испытывают трудности с отображением текстовых объектов с такими же контурами.
/ ** синтаксис ** / p -webkit-text-stroke: width color; / ** пример ** / p -webkit-text-stroke: 1px # 222;
Кросс-браузерная совместимость
Если вам нужны эффекты обводки текста, вы всегда должны включать резервный цвет. Mozilla и Opera могут обойтись, однако у пользователей Internet Explorer других вариантов нет. К сожалению, это одно из новых свойств CSS3, которое просто не получило достаточной поддержки со стороны сообщества разработчиков веб-браузеров. Вы должны потратить некоторое время на игру с этим замечательным веб-инструментом, специально созданным для создания этих текстовых контуров CSS3..
Box-проклейки
Свойство box-sizing дает вам больший контроль над общей шириной / высотой любого элемента блока. По умолчанию ширина / высота + рамка + поля + отступы составляют общий размер поля. Однако использование рамки в вашем контенте увеличивает все ваши отступы и поля внутрь сохранить ширину точно такой же. Есть только два значения для этого свойства, с Содержание ящика быть по умолчанию.
div ширина: 550 пикселей; набивка: 9px; размер коробки: бордюр; / * ширина останется на уровне 550px * /
Как вы можете себе представить, это пригодится в какой-то момент вашей карьеры CSS. Отступы и поля могут быть настоящей болью, и когда вы добавляете границы, вы, как правило, теряете количество пикселей..
Кросс-браузерная совместимость
Opera и IE 8 поддерживают это новое свойство по умолчанию. IE7 и ниже застряли с настройками окна контента, если ваши посетители не используют режим причуд. Единственные дополнения, которые вы должны знать о целевом webkit и движках браузера Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /
Чистые CSS3 столбцы
Столбцы немного сложнее с CSS3, но могут быть выполнены с минимальным кодом. 2 свойства, на которых вы хотите сосредоточиться колонка подсчета а также Колонка зазор. Количество указывает на общее количество столбцов, которые вы хотите применить, в то время как разрыв создает поле между каждым.
div # cols column-count: 3; пробел в колонке: 10px;
В моем примере мы можем видеть ID #cols, используемый в качестве контейнера. Внутри мы делим div на 3 столбца с промежутком в 10 пикселей между каждым. Дальше вы можете установить ширина колонки который используется для установки общей ширины каждого столбца вместо перечисления сплошного числа.
Кросс-браузерная совместимость
Все, что до IE8, просто не сможет использовать это свойство. Но, как мы видели в каждом примере, Mozilla и Webkit предлагают свои собственные решения для нескольких браузеров. Если вам нужен шаблон, посмотрите мой небольшой пример кода ниже:
div # sidebar ширина: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; количество столбцов: 3; пробел в колонке: 7px;
Custom @ font-face
Вы, наверное, слышали об волнении, касающемся пользовательских шрифтов CSS3. Хорошо используя свойство @ font-face, мы можем импортировать внешние стили шрифтов и использовать их, как и любое другое семейство. Синтаксис несколько запутанный, и вам придется потратить некоторое время на то, чтобы сделать это правильно. Блок для @ Шрифт-лицо используется для определения фамилии, после чего вы можете использовать это в своем семейство шрифтов свойства везде!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Только Internet Explorer * / Итак, вы видите выше, я не нацеливаюсь на какой-либо конкретный тип шрифта, но синтаксис должен выделяться. Обратите внимание, что Internet Explorer поддерживает только .СРВ типы шрифтов, в то время как .TTF а также .OTF популярные варианты для других браузеров. Также важно понимать, что вы можете передавать URL-адреса шрифтов из прямых ссылок, т.е.. URL ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
В этой настройке нет реальной кросс-браузерной проблемы, поскольку все механизмы рендеринга могут анализировать эти типы файлов шрифтов. Просто помните, что для поддержки IE вы должны включить как eot-версию, так и оригинал. Я чувствую, что статья W3 Schools содержит каталог самой важной информации, которую вы должны проверить.
Преобразование в миниатюрный CSS
Эта тема часто обсуждается, поскольку она служит разным целям для каждого проекта. С одной стороны, веб-разработчики тратят много времени на написание своих таблиц стилей. Нет никакого способа зашифровать этот тип незашифрованных данных и спрятать их от слежки. Если вы пытаетесь удержать других от явного кражи вашего кода, лучшее, что вы можете сделать, - это загромождать стили и удалять все разрывы / пробелы.
Этот процесс может быть помечен как миниатюризации ваш код. Обычно разработчики пишут CSS в стандартном формате, а затем удаляют все пробелы перед загрузкой на веб-сервер. Затем у вас есть локальная копия для быстрого редактирования, а также небольшая версия для живого проекта. Этот метод, очевидно, может быть полезен для уменьшения загрузки страниц и предотвращения угонщиков кода..
Ссылка, которую я привел выше, ведущая к Minify CSS, содержит несколько потрясающих материалов для чтения на эту тему. Сайт также предоставляет браузерный инструмент для удаления таких пробелов и возврата ключей из вашего кода. CSS Compressor - это еще один вариант с простым интерфейсом, который запускается непосредственно в вашем веб-браузере. Я также слышал хорошие вещи о чистом CSS, хотя я никогда не использовал приложение сам.
Ссылки по теме
Чтобы продвигать вас вперед, я предоставил шесть удобных ссылок со всего Интернета. Они включают в себя не только сокращенную запись, но и полезные руководства и учебные пособия, к которым можно получить доступ при отработке этого нового сокращенного кода CSS..
- Руководство для начинающих по CSS3
- Краткое руководство по CSS
- Используете ли вы CSS3 соответственно?
- Содержимое CSS и таблица совместимости браузера
- CSS3 + прогрессивное улучшение = умный дизайн
- Полный индекс свойств CSS / CSS3
Заключение
Требуется много преданности и практики написания CSS-кода, чтобы построить конкретный график, которому вы можете следовать для каждого проекта. Большинство веб-дизайнеров рады новым проектам и идеям, поэтому вы наверняка найдете время, чтобы применить эти полезные советы по программированию. Попробуйте скопировать небольшой справочный лист для вашего удобства, если вы не можете найти какие-либо шпаргалки или, что еще хуже, теряете подключение к Интернету!
Знаете ли вы какие-либо другие удобные свойства CSS3 или ярлыки? Мы хотели бы услышать ваши мысли и идеи в комментариях к дискуссии. Веб-разработчики стремятся к большей стандартизации в W3C, и очевидно, что переход стал легче. CSS3 предоставляет фантастические преимущества, и если вы сможете освоить сокращенное кодирование, это сохранит ваши размеры файлов на низком уровне и не позволит копиракам украсть ваш код..
