Збереження розмітки коду CSS3 Slim
Веб-розробники можуть заощадити багато часу, використовуючи більш складний синтаксис CSS3. Користувачі, які відвідали вашу сторінку, очікують якнайшвидшого завантаження, що обумовлює обмеження розміру файлів. Існує велика кількість стенографічних трюків з CSS і особливо за новою моделлю CSS3.
Я поклав декілька з цих ідей у посібнику нижче. Ми також повинні торкатися інших областей, таких як зменшення вашого коду CSS. Є інструменти браузера, доступні для допомоги розробникам у процесі стилізації, але ви хочете поєднати шорткоди з цим зменшенням розміру файлу, щоб в кінцевому рахунку спростити процес візуалізації вашого веб-сайту..
Основні поради щодо форматування
Перш ніж ми перейдемо до фактичного синтаксису CSS, я хочу перейти до теми як написати свій CSS. Якщо ви трохи знайомі з веб-дизайном, ви, ймовірно, бачили таблицю стилів раніше, ймовірно, не один раз. Перша частина кожної команди називається селектора. Це націлюється на тип елемента, який отримає стилі, додані в фігурні фігурні дужки, також відомі як властивості.
Вбудований рівень
З вбудованими стилями кожна властивість записується один за іншим, тільки для розділення їх. Цей метод найкраще застосовувати на селекторах, де потрібно лише кілька властивостей. Це заощадить вам простір на сторінці, а прокрутка стилів буде набагато швидше. Якщо ви ніколи раніше не стикалися з вбудованим CSS, я додав нижче невеликий приклад націлювання на посилання для прив'язки HTML.
a color: # 648cc8; font-weight: bold; a: hover color: # 739cda; текст-прикраса: немає; a.alt color: # bd4949! важливо;
Рівень блоку
З іншого боку, властивості блочного стилю вводяться в один рядок на пару ключ / значення і часто мають відступ для більш швидкого редагування при скануванні коду. Приблизно 99% чистих таблиць стилів, я використовую це форматування, і він став промисловим стандартом для багатьох дизайнерів. Якщо ваш селектор використовує більше 6 або 7 властивостей, це найкраще форматування.
Коли ви враховуєте багато нових властивостей CSS3, ви також розумієте, наскільки швидко ваші таблиці стилів заповнюються. І багато з цих властивостей підтримують копії, специфічні для браузера, які вимагають майже дублікатів записів коду (наприклад, радіусу кордону). Ви можете перевірити мій приклад властивості блоку, вказаного нижче, націлювання на зразок div-обгортки.
.wrap display: block; оббивка: 6px 10px; фон: #FFF; кордон-радіус: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -о-прикордонний радіус: 4px;
Жоден із способів написання CSS не є кращим, ніж інший. Зрештою, це ваш вибір як розробника, стиль якого ви віддаєте перевагу, і навіть це буде відповідно до проекту, над яким ви працюєте. Навіть звичайно можна знайти CSS, в якому дизайнери змішувалися разом! Я особисто це відчуваю “триває робота” як правило, простіше з блоковими стилями, оскільки я постійно вивчаю таблицю стилів, щоб вносити зміни або доповнення. Але для доменів з важким трафіком, які знищують ваш CSS-файл, це найкращий спосіб.
Зберігаючи їх Slim
Використовуючи безліч коротких кодів, доступних у CSS3, ви можете заощадити багато часу на розробку. Редагування елементів HTML стане набагато простішим, оскільки ви розумієте цей економічний час. Крім того, ваш код буде більш чистим і легшим для перегляду.
Єдиним недоліком є те, що не всі браузери повністю підтримують ці властивості. Існують обхідні шляхи для багатьох існуючих проблем, наприклад, в Internet Explorer і Netscape. На щастя, Web завжди просувається вперед, і, як CSS3 зростає популярність, ми, безсумнівно, переживемо і зростання сумісності браузерів..
RGBa Кольорова прозорість / непрозорість
Новий RGBavalue не є саме CSS3 власності, але Альфа-прозорість специфічна лише для CSS3. Замість загальноприйнятих "Red Green Blue" значень, які ви переходите до кольору, ви можете зараз включають четвертий варіант прозорості кольору. Через це веб-розробники майже повністю виконують прозорі PNG-файли.
Основний синтаксис вимагає значення від 0-255 в перших трьох (3) слотах і 0-1,0 в альфа-позиції. Колірний діапазон є специфічним для того, скільки кожного відтінку (RGB) видно, якщо 0 - нічого, а 255 - повного.
/ ** синтаксис ** / фон: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** приклад ** / div background: rgba (255, 255, 255, 0.3);
Сумісність між браузерами
Інше майно непрозорість може використовуватися в деяких обставинах. Однак це вплине на весь HTML-елемент і внутрішній контент, а не тільки на фон, який ви бачили в моєму прикладі.
На жаль, Internet Explorer ще не підтримує значення кольору RGBa. Як правило, слід включати резервне властивість з повною непрозорістю для цих менш стандартних браузерів. Ви встановили це значення з тими ж значеннями, але виключаючи 4-у (непрозорість). Це виглядало б приблизно так rgba (255, 255, 255)
Крім того, Internet Explorer може бути оброблений трохи більш витончено через conditionals. Ви можете насправді перевірити, чи працює браузер IE і відображати власний фільтр Microsoft CSS за командою. Це показано в наведеному нижче прикладі (зауважте, що це буде показано у вашому HTML-файлі):
Радіус кордону CSS3
Я прочитав кілька заплутаних тем у форумі про створення округлих кордонів з CSS3 - не стільки на стороні того, як це робиться, але з підтримкою переглядача, веб-розробники шукають найпростіший код, який потрібно ввести і функціонувати як очікується.
/ ** синтаксис ** / кордон-радіус: верхній лівий верхній правий нижній правий нижній лівий;
The кордон-радіус властивість поділяє подібний синтаксис на створення стандартного кордону, за винятком випадків, коли ми націлюємо кути вікна. Це властивість дійсно прийме значення 1 - 4, і кожен з них має на меті іншу настройку кутів.
- 1 значення: Всі чотири кути округлені до одного значення
- 2 значення: Перше значення стосується
зверху ліворучівнизу праворучв той час як друге значення вражаєправоручівнизу зліва - 3 значення: Перше стосується
зверху ліворучкут, другий - обидвавнизу зліва&праворучв той час як третє і остаточне значення застосовується довнизу праворуч - 4 значення: Всі 4 значення задають кути в наступному порядку: зверху-вліво, вгорі праворуч, знизу праворуч, знизу ліворуч
/ ** Наприклад ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Таким чином, у наведеному вище коді ми використовуємо кордон-радіус застосувати округлий ефект 4px на все, крім внизу праворуч межа, яка отримує згладжену криву 8px. Якщо ви помітили, обидва ці коди дійсно застосовуватимуть один і той же стиль.
Сумісність між браузерами
Тепер головна проблема полягає в тому кордон-радіус підтримується лише в декількох браузерах. Internet Explorer 9 нещодавно додав велику підтримку, і Opera зробить це також. Проте навіть Opera створила власну власність -o-кордон-радіус націлювання на певний механізм веб-переглядача Додатково -moz-border-radius підтримується програмним забезпеченням Firefox / Gecko і -webkit-border-radius для Google Chrome / Safari.
Наведений нижче приклад є прикладом мого оголеного шаблону для створення округлих кутів з найбільшою підтримкою глобального браузера.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -о-прикордонний радіус: 4px 4px 8px 4px;
Приваблива крапля тіні?
Інший дійсно дивним аспектом CSS3 є підтримка коробка і текстові тіні. Це було такою проблемою для розробників у минулому, оскільки фонові зображення були єдиним реалістичним варіантом. Цей синтаксис насправді відповідає скороченої ролі, що набагато простіше, ніж інші властивості, які ми розглянули. На першому етапі важко запам'ятати належний порядок ключових значень - але чим більше практик ви покладете, тим легше він стане.
На жаль, Internet Explorer знову є незвичайним. Кожен інший основний браузер, включаючи Firefox, Google Chrome, Safari та Opera, повністю підтримує text-shadow власності. Розробники спробували побудувати власну підтримку 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 значення, які ви також можете розбити на властивості. Вони відповідають переходу власності(який ефект), тривалість(скільки часу потрібно витягти), функція синхронізації(зміни швидкості над анімацією), і затримка(кількість секунд очікування перед анімацією).
/ ** синтаксис ** / перехід: затримка функції тривалості часу; / ** приклад ** / img перемикач-властивість: непрозорість; перехід-тривалість: 2s; функція переходу-синхронізації: простота; затримка переходу: 0,5 с;
Вам слід інтуїтивно зрозуміти мету для більшості цих властивостей, крім можливостей функції синхронізації. Незважаючи на перше, це властивість просто анімує ваш перехід, тому ефект почнеться повільніше, закінчуватиметься повільніше, або щось подібне.
W3 Schools має в режимі онлайн-функцію синхронізації, в якій перераховані всі можливі значення, які ви можете спробувати. Я постійно знаходжу себе в Google для цих путівників, але вони роблять такі зручні закладки.
Сумісність між браузерами
Тепер давайте приведемо в повному обсязі підтримку браузера. За замовчуванням властивість переходу є тільки підтримується новими версіями Safari. Проте багато користувачів все ще потребують -webkit префікс, який також застосовується до Google Chrome і подібних механізмів рендеринга. Нижче “завершено” Шаблон блоку коду Рекомендую зберігати та використовувати, якщо вам потрібна підтримка переходу від більшості веб-браузерів.
img перехід: непрозорість 2s, легкість у 1s; -webkit-перемикання: непрозорість 2s простота в 1s; / * chrome, safari, flock * / -moz-перемикання: непрозорість 2s простота в 1s; / * mozilla + gecko * / -o-transition: непрозорість 2s у простоті 1s; / * opera * /
Ефекти обведення тексту
Ця властивість не величезна, і ви не знайдете багато веб-дизайнерів, які використовують її сьогодні. Але можна використовувати обведення тексту створити справді акуратні ефекти за допомогою шрифтів. Браузери Webkit, такі як Safari і Chrome, є єдиними справжніми прихильниками цієї властивості. Opera та Firefox мають труднощі з відображенням текстових об'єктів з тими самими контурами.
/ ** синтаксис ** / p -webkit-text-stroke: ширина кольору; / ** приклад ** / p -webkit-text-stroke: 1px # 222;
Сумісність між браузерами
Якщо ви відчуваєте потребу в ефектах обведення тексту, завжди слід включати резервний колір. Mozilla і Opera можуть пройти, однак користувачі Internet Explorer не мають інших опцій. На жаль, це одна з нових властивостей CSS3, яка просто не отримала достатньої підтримки від спільноти розробників веб-браузера. Ви повинні витратити деякий час на гру з цим великим веб-інструментом, спеціально створеним для створення цих текстових контурів CSS3.
Коробка розмірів
Властивість визначення розмірів вікна надає більше контролю над загальною шириною / висотою будь-якого елемента блоку. За замовчуванням ширина / висота + межа + маржа + додання складають загальний розмір вікна. Проте за допомогою полів на кордоні на вашому вмісті ви наближаєте всі ваші відступи та поля всередину щоб зберегти ширину точно такою ж. Є тільки два значення для цього властивості, з content-box за замовчуванням.
div ширина: 550px; заповнення: 9px; розмір коробки: кордон; / * ширина залишиться на рівні 550px * /
Як ви можете собі уявити, це стане в нагоді в певний момент вашої кар'єри CSS. Накладення та поля можуть бути справжніми болями, а коли ви додаєте межі, ви втрачаєте пікселі.
Сумісність між браузерами
Opera та IE 8 підтримують цю нову властивість за замовчуванням. IE7 і нижче відображаються налаштування вікна вмісту, якщо ваші відвідувачі не використовують режим примрів. Єдині доповнення, які ви повинні знати про спеціально орієнтовані веб-сайти та двигуни веб-переглядача з Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: кордон; / * Firefox * / розмір вікна: кордон; / * Opera / IE8 + * /
Чисті стовпці CSS3
Стовпці з CSS3 трохи складніше, але можуть бути виконані з мінімальним кодом. Два властивості, на які потрібно зосередитися, - це Колонка-кол і розрив стовпців. Лічильник посилається на загальну кількість стовпців, які ви хочете застосувати, тоді як розрив створює маржу між кожним.
div # cols кол-кол: 3; розрив стовпців: 10px;
У нашому прикладі ми бачимо, що ID #cols використовується як контейнер. Усередині ми розділимо div на 3 колонки з 10px розривом між кожним. Далі ви можете встановити ширина колонки яка використовується для встановлення загальної ширини кожного стовпчика замість переліку суцільного числа.
Сумісність між браузерами
Все, що до того, як IE8 просто не зможе скористатися цією власністю. Але, як ми бачили в кожному прикладі, Mozilla і Webkit пропонують свої власні рішення для декількох браузерів. Якщо вам потрібен шаблон, ознайомтеся з наведеним нижче кодом невеликого прикладу:
div # sidebar width: 210px; -moz-count-count: 3; -moz-column-gap: 7px; -webkit-колонка-кол: 3; -webkit-column-gap: 7px; кількість стовпців: 3; розрив стовпців: 7px;
Custom @ font-face
Ви, мабуть, чули про хвилювання щодо користувацьких шрифтів CSS3. Використовуючи властивість @ font-face, ми можемо імпортувати зовнішні стилі шрифтів і використовувати їх так само, як і будь-яку іншу родину. Синтаксис є дещо заплутаним, і вам доведеться витратити деякий час на його отримання. Блок для @ font-face використовується для визначення прізвища, після чого ви можете використовувати це у своєму сімейство шрифтів властивості, де б!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Тільки Internet Explorer * / Таким чином, ви бачите вище, я не націлююсь на певний тип шрифту, але синтаксис - це те, що має виділятися. Зверніть увагу, що Internet Explorer підтримує тільки .eot типів шрифтів, в той час як .ttf і .otf популярні варіанти для інших браузерів. Також важливо, ви повинні розуміти, що ви можете передати шрифти URL з прямих посилань, тобто. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Існує ніякої реальної крос-браузерної проблеми з цією установкою, оскільки всі двигуни рендеринга можуть аналізувати ці типи файлів шрифтів. Просто пам'ятайте, що для підтримки IE ви повинні включати версію eot, а також оригінал. Я вважаю, що стаття W3 Schools має каталог найбільш важливої інформації, яку ви повинні перевірити.
Перетворення на мініатюрний CSS
Ця тема часто обговорюється, оскільки вона виконує різні цілі для кожного проекту. З одного боку, веб-розробники витрачають багато часу на написання своїх таблиць стилів. Існує жодного способу шифрування даних цього типу і приховування його від перехоплюючих очей. Якщо ви намагаєтеся утримати інших від кричущого викрадення вашого коду, краще всього це зробити, це засмітити стилі і видалити всі рядки / пробіли.
Цей процес можна позначити як мініатюризація код. Взагалі розробники будуть писати CSS в стандартному форматі, а потім видалити всі пробіли перед завантаженням на веб-сервер. Потім ви маєте локальну копію для швидкого редагування, одночасно надаючи меншу версію проекту в реальному часі. Цей метод, очевидно, може бути корисним для зменшення навантаження на сторінку разом з утриманням викрадачів коду.
Посилання, яке я опублікував вище, що призводить до мінімізації CSS, має чудовий матеріал для читання з цього питання. Сайт також надає інструмент для видалення таких пробілів на основі веб-переглядача і повертає ключ з вашого коду. CSS Compressor - це ще один варіант, який має простий інтерфейс, який працює безпосередньо у вашому веб-браузері. Я також почув гарні речі про чистий CSS, хоча я ніколи не використовував цю програму самостійно.
Пов'язані посилання
Для того, щоб тримати вас вперед, я надав шість зручних посилань з Інтернету. До них відносяться не тільки стенографічні позначення, але й корисні довідники та навчальні посібники для доступу до цього нового кодового коду CSS.
- Посібник для початківців до CSS3
- Короткий посібник CSS
- Ви використовуєте CSS3 належним чином?
- Зміст CSS і діаграма сумісності браузера
- CSS3 + Progressive Enhancement = Розумний дизайн
- Повний CSS / CSS3 Індекс Властивості
Висновок
Це вимагає багато самовідданості і практики написання CSS-коду, щоб побудувати конкретний графік, який ви можете стежити за кожним проектом. Більшість веб-дизайнерів раді підібрати нові проекти та ідеї, тому ви обов'язково знайдете час, щоб практикувати ці корисні поради щодо кодування. Спробуйте скопіювати невеликий довідковий лист для вашої власної зручності у випадку, якщо ви не знайдете жодних чит-листів, або ще гірше ви втратите підключення до Інтернету!
Чи знаєте ви будь-які інші зручні властивості CSS3 або ярлики? Ми хотіли б почути ваші думки та ідеї в коментарях до обговорення. Веб-розробники наполягають на більшій стандартизації в W3C і зрозуміло, що перехід стає простішим. CSS3 надає фантастичні переваги, і якщо ви можете освоїти скорочене кодування, це дозволить вам утримати розміри файлів на низькому рівні і утримати копійки від крадіжки вашого коду..
