CSS3 vs CSS - Каскадні таблиці стилів або CSS є ключовим елементом веб-дизайну. Як веб-розробник або дизайнер, ви повинні добре розуміти CSS, особливо різницю між CSS3 та CSS.

Можливо, ви чули або стикалися з терміном CSS3, якщо читали про веб-розробку чи веб-дизайн. Якщо ви коли-небудь думали, що може бути різним між CSS3 та CSS, ось тут будуть закладені всі ваші сумніви: вони обоє однакові.

Правильно: CSS3 та CSS настільки ж відрізняються один від одного, як HTML та HTML5. CSS3 - це просто остання ітерація CSS. Люди, які зараз говорять про кодування CSS, насправді лише посилаються на CSS3.

І HTML5, і CSS3, як правило, стають модними словами, які мають значення, що перевищують їхні фактичні технології. Вони символізують дотримання певних основних стандартів у веб-розробці замість використання власного програмного забезпечення. Здебільшого, галас навколо цих мовних слів уже згас. Більшість компаній, навіть ті, які присягаються, зберігаючи все вдома, погоджуються, що дотримання цих основних стандартів значно полегшує життя для всіх.

Зараз минуло досить багато часу, коли CSS3 був запущений і прийнятий усіма. Це принесло багато чудових речей для галузі та ознаменувало досить великий крок уперед для розвитку веб-сторінок загалом. Попередня версія, CSS2, була запущена ще в 1998 році. Це майже 20 років тому. Єдина редакція, яку вона отримала після запуску, була в 2011 році, під назвою CSS2.1. Ще з переглядом більшість експертів вже почали говорити, що CSS3 неминучий. CSS3 оснащений низкою функцій та можливостей, які до цього часу стали цілком необхідними.

Те, що ви, можливо, не знали про CSS3, це те, що він розпочав розробку лише через рік після подання попередньої версії. Це означає, що W3C працював над вдосконаленою версією з 1999 року. Щоб випустити першу стабільну версію CSS3, знадобилося більше 12 років.

Існують величезні відмінності між CSS3 і CSS (до яких ми незабаром дістанемося). Але справа в тому, що веб-браузери вже готові до доповнень до CSS3 до моменту його виходу. Як результат, вони досить швидко адаптувались до нового випуску. Кожен великий веб-браузер тепер підтримує CSS3, навіть Internet Explorer!

Звичайно, W3C все ще продовжує розробляти CSS3 та HTML5, тому остаточна версія навряд чи. Справедливості, остаточна версія наразі також не є необхідністю, враховуючи те, наскільки швидко просувається Інтернет. Оскільки вимоги до Інтернету та сама галузь зростає та змінюється так швидко, кодування має рухатися вперед так само швидко, якщо не більше.

CSS3 vs CSS Інфографіка

Визначено відмінності CSS3 проти CSS

Тепер, коли ви трохи знаєте про фон за CSS3, давайте докладніше розглянемо, що воно змінилося. Мабуть, найбільша різниця між CSS3 та попереднім випуском, який він замінив, - це розділення модулів. У CSS2 все було однією великою специфікацією, яка визначала різні функції. Однак CSS3 змінив це, ввівши кілька документів, що називаються модулями. У кожного модуля є свої нові можливості, які не впливають на сумісність попереднього стабільного випуску CSS.

Медіа-запити

Доступно багато модулів, але лише чотири опубліковані як формальні рекомендації W3C. Ці великі чотири модулі:

  1. Колір, опублікований 2011 рік
  2. Селектори 3 рівня, опубліковано 2011 р
  3. Простори імен, опубліковано 201
  4. Медіа-запити, опубліковані 2012 року

Серед них найважливішим модулем є медіа-запити. Насправді цей модуль, мабуть, може бути найважливішим доповненням, яке CSS3 вносив до CSS загалом. Запити медіа - це досить просто: він дозволяє застосовувати певні умови до різних таблиць стилів. Це дозволяє веб-сайтам бути чіткими або "чуйними" до різних розмірів екрана. Іншими словами, веб-сайти можуть коригувати свої розміри та елементи, щоб відповідати різним пристроям. Сьогодні чуйний веб-дизайн - це, мабуть, найбільша модна мова. З огляду на те, що більшість користувачів Інтернету зараз використовується на мобільних пристроях, адаптивний дизайн абсолютно необхідний, а медіа-запити допомагають досягти цього. Модуль також дозволяє розробникам налаштувати веб-сайти під різні резолюції, не змінюючи і не видаляючи вміст.

Медіа-запити також досить легко з'ясувати та додати. Отримавши їх декілька разів, ви зможете розібратися з рештою. Ось кілька прикладних рядків коду:

екран @media та (максимальна ширина: 600 пікс.) (

фон: #FFF;

)

Здається, досить просто, чи не так? За допомогою цих кількох рядків коду ви можете ввімкнути стилізацію для екранів із максимальною шириною 600 пікселів. Це означає, що на всіх екранах з максимальною шириною 600 пікселів буде відображатися білий фон. Максимальна ширина - лише одне з декількох умов, які можна застосувати до таблиці стилів у CSS3. Ще один - максимальна ширина пристрою. Це роздільна здатність екрана, а не область перегляду. Також замість максимального можна вказати мінімальне значення; просто використовуйте "min" замість "max". Ви також можете комбінувати два, як нижче:

екран @media і (мінімальна ширина: 600 пікс.) та (максимальна ширина: 900 пікселів) (

фон: #FFF;

)

Тут стиль стосується лише екранів із шириною перегляду 600-900 пікселів. CSS3 постачається з попередньо визначеними таблицями стилів для популярних мобільних пристроїв, таких як Apple iPad та iPhone. Ось деякі з них:

Наразі повинно бути досить зрозуміло, наскільки важливі медіа-запити. Цей модуль дуже зручний для розробників, які хочуть створити чуйний веб-дизайн із мінімально можливою кількістю кодування.

Округлені межі

CSS3 також має деякі ключові міркування щодо веб-дизайну. Наприклад, рамки можуть бути округлені без злому, а CSS3 запроваджує округлі межі. Це був величезний плюс для веб-розробників та дизайнерів, які раніше боролися з межами CSS. Не дивно, що деякі з цих функцій все ще не працюють у старих версіях Internet Explorer. Єдиний додатковий код, який потрібно додати до певного класу в таблиці стилів, наприклад:

-моз-кордон-радіус: 5px;

-webkit-border-radius: 5px;

облямівка: 2px суцільний # 897048;

Таким чином, CSS3 значно полегшує життя веб-розробнику та дизайнеру. Випуск також вийшов з градієнтами, що напрочуд було недоступним у попередніх випусках.

Рекомендовані курси

  • Інтернет-навчання з веб-сервісів на Java
  • Професійний розвиток ігор у навчанні C ++
  • Програма етичного злому
  • Вегас Про 13 навчальний комплект

Прикордонні зображення, текстові тіні

Інші елементи, які були додані з CSS3, але відсутні в попередніх версіях, включали зображення рамки та тіні поля / тексту. CSS3 значно спростив речі, усунувши необхідність додавати хаки для будь-якого з перерахованих вище елементів стилю. Наприклад, ось окремий рядок коду, який потрібно додати для текстових тіней:

тіньовий текст: 2px 2px 2px # ddccb5;

Стовпці

CSS3 також спростив додавання стовпців до вмісту. Все, що вам потрібно зробити зараз, це додати чотири рядки коду:

  1. підрахунок стовпців
  2. ширина стовпця
  3. розрив стовпців
  4. стовпець-правило

Кілька фонів

Останній випуск CSS також додав можливість безпосередньо інсайдерства декількох фонів з CSS, а не використовувати хакі для обходу, як раніше. Код неймовірно простий для запам’ятовування та запису, а також надзвичайно важливий для створення сучасних елементів веб-дизайну. Ось приклад:

.multiplebackgrounds (

висота: 100px;

ширина: 200px;

підкладка: 20px;

фон: URL-адреса (top.gif) вгорі праворуч без повтору,

URL (знизу.gif) верхній лівий повтор-у,

URL (середній.gif) нижній повтор-z;

)

Префікси продавця

Префікси постачальників часто використовувались у той час, коли CSS3 щойно вийшов. Вони допомогли браузерам інтерпретувати CSS-код. Вони використовуються донині, якщо ваш веб-браузер не зможе прочитати код. Ось такі префікси постачальника для основних веб-переглядачів:

  • -moz- : Firefox
  • -webkit- : веб-браузери, такі як Apple Safari та Google Chrome
  • -o- : Опера
  • -ms- : Internet Explorer

Префікс Opera також став зайвим, оскільки компанія переключила свій мобільний та настільний браузер на платформу Webkit зі свого механізму візуалізації Presto. Хоча префікс постачальника продовжує використовуватися певною мірою, він здебільшого зник у цей момент.

Додано псевдокласи

За допомогою додаткового CSS3 ми також отримали масу додаткових псевдокласів, включаючи структурні для націлювання елементів на основі їх положення документа та відношення до інших різних елементів. Ось деякі з них:

  • : root націлює на кореневий елемент документа
  • : не (и) елементи націлювання, які не відповідають селекторам, зазначеним у (и)
  • : перша дитина націлює на першу дитину в контейнері незалежно від типу предмета
  • : перший тип націлює на перший заданий тип елемента в батьківському середовищі
  • : nth-дитина (n) використовує числові значення в межах (n) для орієнтації на дочірні елементи щодо їх положення у батьків. Наприклад, ви можете використовувати це для додавання змінних кольорів тла до коментарів у блозі
  • : порожні цільові елементи, у яких немає тексту чи дітей, як порожні елементи, такі як
  • : only-child націлює елементи на дереві документів, який є єдиним дочірнім елементом у батьківському

Нові селектори CSS3

CSS3 пропонує ряд способів записати правила CSS через нові селектори, нові комбінаційні та псевдоелементи: ось три нові селектори атрибутів:

  • Для точних відповідностей, елемент (foo = ”bar”)
  • Для відповідності елемента з атрибутом, який називається foo, починаючи з "bar", елемент (foo $ = "bar")
  • Для відповідності елемента з атрибутом, який називається foo, що закінчується на 'bar', element (foo * = «bar»)

CSS3 постачається з декількома новими псевдокласами, про деякі з яких було сказано вище. Ось ще кілька:

  • : nth-last-child (n) відповідає точним дочірнім елементам від останнього
  • : nth-of-type (n) відповідає елементам рідних братів, що мають однакове ім’я перед ними в дереві документів
  • : nth-last-of-type (n) відповідає елементам рідних братів, що мають однакову назву знизу
  • : останній тип націлює останній заданий тип елемента в батьківському середовищі
  • : націлює лише тип, елемент, який є єдиним типом
  • : цільові цільові елементи, на які націлений відповідний URI
  • : увімкнено відповідає елементу, коли він включений
  • : disabled відповідає елементу, коли він відключений
  • : Позначено прапорець на елемент, коли він перевіряється через прапорець або радіо-кнопку

Новий комбінатор

CSS3 також постачається з абсолютно новим комбінатором: elementA ~ elementB

Цей новий комбінатор відповідає, коли елементA буде десь потім слідувати елементом B, але не відразу після цього.

Нові властивості стилю коробки

CSS3 оснащений тією ж моделлю коробки, що і попередній реліз, але з деякими новими властивостями стилю, які допоможуть вам оформити рамки та фони коробки. Нові фонові властивості в CSS3:

  • фон-кліп

Це властивість використовується для визначення способу відсіка фонового зображення. За замовчуванням розміри відсікання - це рамка для меж, але ви можете змінити його у вікні вмісту або в полі для оббивки.

  • фонове походження

Саме ця властивість використовується для визначення того, чи слід фоновий малюнок розміщувати у полі рамки, вікні вмісту чи полігоні.

  • фоновий розмір

Ця властивість дозволяє розробнику вказувати розмір фонового зображення та розтягувати менші зображення для розміщення сторінки.

CSS3 також змінив деякі існуючі властивості стилю тла. Ось перегляд змін:

  • тло-повторити

Ця властивість тепер має два нових значення: круглий і пробільний. Круглий розмір зображення розміщується для того, щоб покласти його кілька разів у коробку. Пробіл рівномірно розташовує плиткове зображення всередині вікна без відсікання.

  • фон-вкладення

Властивість no не включає значення "local", так що фон прокручується зі вмістом елемента у випадку, якщо в елементі є смуга прокрутки.

Нові властивості кордону

CSS3 дозволяє межі бути стилізованими як подвійні, суцільні, штрихові або навіть як зображення. Зображення кордонів є цікавим доповненням: вони дозволяють створити зображення всіх чотирьох кордонів, а потім підказати CSS застосувати зображення до меж. Ось кілька нових властивостей кордону, які поставляються з CSS3:

  • межа радіуса, радіус кордону - нижній правий, радіус межі - верхній правий, радіус межі - радіус межі верхній - лівий, радіус межі - нижній - лівий - дозволяє створювати округлі межі
  • border-image-source дозволяє задавати файл джерела зображення замість використання попередньо визначених стилів рамки
  • фрагмент зображення-межі являє собою зміщення всередину від зображень рамки
  • border-image-width визначає значення ширини для вашого зображення кордону
  • border-image-outset вказує суму, що перевищує рамку рамки, на яку поширюється зображення
  • border-image-stretch визначає плитку або масштабування середньої та бічної частин рамкового зображення

Висновок - CSS3 проти CSS

Ви дізнаєтесь набагато більше про CSS3, як більше кодуєте. Але є одне застереження: ви не можете опанувати CSS3, якщо не знаєте CSS. Навчання CSS3 передбачає надходження до розуміння та досвіду роботи з CSS. Якщо ви не знаєте CSS, вам доведеться вивчити його зверху разом із CSS3. Хороша річ у тому, що якщо ви не знайомі з CSS, вам слід легше поєднати CSS3 проти CSS разом, щоб зробити це простіше і швидше.

Рекомендовані статті

Ось кілька статей, які допоможуть вам отримати більш детальну інформацію про CSS3 проти CSS, тому просто перейдіть за посиланням.

  1. CSS проти HTML
  2. Захоплююче знати Основи CSS Flexbox для початківців
  3. HTML5 vs JavaScript Найкраща річ, яку потрібно дізнатися
  4. CSS vs CSS3: відмінності

Категорія:

Розробка програмного забезпечення