Вікі про вікі
Register
Advertisement
Вікі про вікі
CSS3

CSS (англ. Cascading Style Sheets — каскадні таблиці стилей) — формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки. На Фандомі доступна спеціфікація CSS3, що підключається за допомогою однойменного розширення (за замовчуванням воно автоматична підключено на усіх проєктах). Фандом також підтримує Flexbox.

Редагування CSS доступно усім зарєстрованим користувачам, однак для змін в рамках вікі-проєкту необхідні права адміністратора. Саме ж використання CSS небагато чим відрізняється від такого поза Фандомом.

Граматичний рід скорочення CSS важко визначимо: оскільки це іноязична і не звукова абревіатура, найбільш логічним є її відношення до множинного числа по опірному слову «таблиці», однак можливі і інші трактування.

Опис[]

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

Розробка CSS починалась в 1990-их роках, так як виникла необхідність привести Web до деяких стандартів. Спочатку потреби в оформленні задовольнялися засобами HTML, однак з часом Консорціум Всесвітньої павутини зацікавився CSS, після чого в 1996 року була опублікована перша специфікація (CSS1). На даний момент актуальною «версією» є CSS3, яка до сих пір активно розвиваєтся; також йде розробка стандарту CSS4 (однак поки майже всі заплановані зміни знаходиться на початковій стадії створення).

Синтаксис[]

Синтаксис мови досить простий і в загальному випадку виглядає приблизно так:

/* Деяке правило CSS */
селектор: { властивість: значення; }

В цьому невеликому фрагменті описується базова споруда правил:

  • Текст, укладений в /* */ є коментарем. Використання коментів не є обов'язковим, але вітається, особливо у випадку громіздського коду.
  • Селектор задає, які елементи будуть змінені даним кодом;
  • Властивість вказує характеристику, яка буде змінена, а значення — як саме це станеться.

Трохи інакше додається код у тому випадку, якщо ми хочемо змінити оформлення елементу безпосередньо на сторінці (в даному випадку в тег додається атрибут «style»; для стилей не вказується селектор, а тільки потрібні властивості та їх значення):

<div style="властивість: значення; властивість: значення; ...">Фрагмент тексту</div>

Селектори[]

В CSS є можливість задавати різні види селекторів, які можна зруйнувати на кілька груп:

  • Базові селектори;
  • Комбіновані селектори;
  • Селектори псевдокласів;
  • Селектори псевдоелементів;
  • Селектори атрибутів.

Базові селекторів[]

У найпростішому випадку у деякого тегу може бути клас або ідентифікатор (<div class="class_name"></div> и <div id="id_name"></div>). Якщо у класа немає ні того, ні іншого, у якості селектору можна вказати самий тег. Окремо можна виділити універсальний селектор «*», який зачіпає всі елементи, однак його використання не рекомендується (і навіть може привести до порушення Умов використання).

Також існує можливість комбінувати селектори (наприклад, можна поєднати селектор тегу і класу).

/* Селектор для усіх div */
div { color: black; }

/* Селектор для усіх елементів з класом class_name */
.class_name { color: red; }

/* Селектор для елементу з ідентифікатором id_name */
#id_name { color: green; }

/* Селектор для усіх тегів <p> з класом class_name */
p.class_name { color: blue; }

Комбіновані селектори[]

Такі селектори є поєднанням декількох базових селекторів. Розуміння роботи комбінованих селекторів досить важко, оскільки багато з стандартних елементів Фандома (інфобокси, клавіші, поля, і т.д.) активно використовуючи їх; також застосування базових селекторів може зачіпати куди більше елементів, чим хотілося би (особливо якщо застосовувати тільки селектор тегу).

Між базовими селекторами ставиться один з п'яти роздільників:

  • «,» (перечислення);
  • « » (пробіл; селектор нащадків);
  • «>» (дочірний селектор);
  • «~» (Селектор всіх сусідніх елементів);
  • «+» (Селектор сусіднього елемента).

В таблиці нижче будуть приведені різниці між цими селекторами (зверніть увагу, що код нижче написаний виключно для демонстрації. Використання цього на Фандомі приведе до серйозних змін дизайну).

В якості прикладу буде приведений наступний код:

<div>
  <p>P1 в div.</p>
  <p>P2 в div.</p>
  <section><p>P3 в div (і в section).</p></section>
</div>

<p>P4 не у div.</p>
<p>P5 не у div.</p>
Опис Код Результат
Перечислення
Через кому вказуються всі елементи, які повинні бути змінені (усі div і усі p).
div, p {
  background-color: yellow;
}
Selector-comma
Селектор нащадків
Код буде застосований до усіх p, що знаходяться всередині div.
div p {
  background-color: yellow;
}
Selector-space
Дочірний селектор
Діє майже як селектор нащадків, але код буде застосований тільки до тих елементів, які є "дітьми" батьківського елементу (Рядок «P3...» має батьківський елемент section, а не div).
div > p {
  background-color: yellow;
}
Selector-grsign
Селектор усіх сусідних елементів
Код буде застосований до усіх «сусідних» елементів (тобто таким елементам, які знаходяться на одному рівні).
div ~ p {
  background-color: yellow;
}
Selector-til
Селектор сусідного елементу
Код буде застосований тільки до прилеглих до елементу «сусідам».
div + p {
  background-color: yellow;
}
Selector-plus

Селектори псевдокласів[]

Псевдокласи описують кілька станів, в яких може знаходиться об'єкт. Синтаксис селекторів псевдокласів виглядає наступним чином:

Селектор:псевдоклас { властивість: значення; }


Існує немало різновидів псевдокласів (з якими можна ознайомитись тут), але більшість з них практично не використовуються в «повсякденному» діяльності. Тим не менш, використанн псевдокласів начебто :nth-child(n), :first-child і :last-child дозволяє різнообразити дизайн (наприклад, створити «шахову» таблицю або гарно оформити її початок/кінець), а :hover дозволяє впливати на оформлення елементу при наведенні на нього.

Селектори псевдоелементів[]

Псевдоелементи описують деякий фрагмент елементу. Синтаксис селекторів псевдоелементів виглядають наступним чином:

/* Дві двокрапки! */
Селектор::псевдоелемент { властивість: значення; }

На даний момент існує 5 псевдоелементів:

Css-triangle

Трикутник у аватара створений за допомогою псевдоелементів.

  • ::first-line — призначений для зміни оформлення першої лінії тексту;
  • ::first-letter — призначений для зміни оформлення першої букви тексту;
  • ::before — дозволяє додати контент до елементу;
  • ::after — дозволяє додати контент після елементу;
  • ::selection — відповідає за виділення елементу користувачем.

Псевдоелементи можна зустріти на деяких сторінках Фандома: наприклад, на стіні обговорення; їх використання дає додаткові, але вельми спеціфічні можливості за зміною оформлення.

Селектори атрибутів[]

За допомогою подібних селекторів можна змінити оформлення елементів з деяким атрибутом.   Синтаксис селекторів атрибутів виглядає наступним чином:

[атрибут] { властивість: значення; }

Також існують і інші варіації селектору атрибутів (коли він рівен заданому значенню, коли починається або закінчується на потрібні символи, і т.д.; з повним списком можна ознаймитись тут). Використання подібного роду селекторів досить специфічно і чаще за все не потрібно навіть при комплексному оформленні вікі-проєкту.

Пріоритет селекторів[]

У деяких випадках селектори можуть перетинатися один з одним. У цьому випадку діють кілька правил:

  • У елементів є різний пріоритет:
    • Найменший пріоритет у селекторів тегів;
    • Далі йдуть селектори класів;
    • Далі йдуть селектори ідентифікаторів;
    • Найвищим пріоритетом володіє код, написаний безпосередньо у елемента (а не в класі).
  • Якщо є два і більше однакових селектора, то враховуватися буде останній.

!important[]

Одним з ключових елементів розмітки є особливе правило «!important», який перекриває пріоритет селектора. Якщо відразу кілька селекторів задіють !important, то буде необхідно знову визначити їх пріоритет.

Варто зауважити, що використовуваний !important вважається небажаним і повинно застосовуватися тільки у тих випадках, коли це дійно необхідно.

Властивості[]

В CSS існує велика кількість властивостей, які направлені на зміни різних аспектів елементів: фон, колір тексту, шрифт, дизайн границь, розмір, тіні, анімація, і т.д. За списком властивостей можна ознайомитися тут або тут (перше посилання на англійській мови, друга — на російській).

Одиниці вимірювання[]

В CSS існують різні види одиниць вимірювання:

  • px (пікселі) — за своєю суттю базова одиниця вимірювання. Не мають прив'язки до інших елементів.
  • % (проценти) — розмір елементу задається в процентах від розміру батьківського елементу.
  • em — особлива одиниця вимірювання, де 1em рівен поточному розміру шрифта. Залежить від розміру шрифта в батьківському елементі.
  • rem — працює майже также, як і em, але розмір задається відносно «базового» розміру шрифту (у випадку з em кілька вкладених один в одного елементів з розміром шрифту 1.5em привели б до постійно збільшующого шрифту).
  • Относительно размера экрана:
    • vw — 1vw = 1% ширини вікна;
    • vh — 1vh = 1% висоти вікна;
    • vmin — мінімальне серед vw і vh;
    • vmax — максимальне серед vw і vh.

Також ще є такі одиниці вимірювання як сантиметри (cm), міліметри (mm), дюйми (in), точки (pt), рівні 1/72 дюйма і піки (pc), рівні 1/6 дюйма. На даний момент вони практично не використовуються.

Кольори[]

В CSS колір можна задати наступним чином:

  • Існують 140 кольорів, якої мають свої імена (з повним списком можна ознайомитися на w3schools), а також зарезервоване слово для «прозорого» коліру transparent.
  • Колір можна задати в моделі RGB або в шістнадцятковому форматі: #ff0000, або в більш розгорнутому вигляді rgb(255, 0, 0).
    • Також можна використовувати розширений формат RGBA, де додається значення альфа-канала (тобто прозорості). У випадку шістнадцятковому форматі прозорість також задається числом від 0 до 255 #ff00ffee, а при розгорнутої запису приймає значення від 0 до 1 rgba(255, 0, 0, 0.5).
  • В CSS є підтримка кольорової моделі ru:HSL. Як і RGB, в неї є підтримка прозорості (hsl(240, 100%, 50%) і hsla(360, 100%, 50%, 0.5)).

Використання на Фандомі[]

Як було сказано вище — використання CSS на Фандомі майже нічим не відрізняється від такого при веб-дизайні, лише за деякими виключеннями. Якщо на інших сайтах стилі необхідно писати з нуля, то тут можна лише модфікувати вже готове оформлення, що має на увазі активне використання !important і застосування стилей до існуючих селекторів, а не створення нових.

В цілому можна виділити кілька простих, але корисних порадів при редагування CSS:

  • Користуйтесь інструментами розробника в браузері. Залежно від браузера потрапити в дане меню можна різними способами, але найбільш корисний та ефективний — натиснути на цікавлящий вас елемент правою клавішою миші і вибрати «переглянути код елементу». В інструментах розробника можна дізнатися, який код змінює оформлення і які саме властивості використовуються; при необхідності можна швидко змінити значення деякої властивості і переглянути зміни. Також в інструментам розробника часто є зручна кольорова палітра та «пипетка», дозволяюща взяти колір з екрану.
  • Перед додавванням коду перевіряйте його в своєму особистому CSS або за допомогою PortableCSSPad (про який буде сказано нижче), оскільки додавання казалося би правильного коду може привести до неочікуваних наслідків.
    • Якщо ви використовуєте особистий CSS для перевірки нового коду — не забувайте його очищати після провдення тестів, оскільки особистий CSS має більш високий пріоритет (про це можна прочитати в довідці).
  • Не забувайте перевіряти підтримку властивостей браузерами, так як через відсутність підтримки оформлення може виглядати зовсім не так, як хотілося би.

Додавання та редагування[]

Стилі для вікі підвантажуються з ряду MediaWiki-сторінок, головною з яких є MediaWiki:Common.css — CSS з цієї сторінки будуть завантажуваися на всіх сторінках вікі у всіх скінах. Крім того, для кожного скіна можна завантажити окремі стилі, за допомогою сторінки типу MediaWiki:НазваСкіну.css (приклад: MediaWiki:Wikia.css — сценарії з цієї сторінки будуть завантажені тільки для скіна Wikia).

Крім того, існує окрема сторінка для чату, її вміст буде завантажуватися лише у чаті і не зачіпати інші оформлення. Вона знаходиться на сторінці MediaWiki:Chat.css.

При необхідності та бажанні CSS можна роміщувати на будь-якій сторінці в просторі MediaWiki, якщо її назва закінчується на .css. На відміну від сторінок скінів це дає можливість розділити код на фрагменти (наприклад, відокремити код оформлення проєкту від коду нагород користувачів), але при цьому накладує одне обмеження: щоб код працював, його необхідно дізнатися в імпортах «головних» сторінци (Common.css, Wikia.css, Chat.css, і т.д.).

Особисті стилі[]

Крім загальних для вікі сторінок, користувачі можуть використовувати особисті підсторінки для завантаження стилей тільки для себе. Підсторінки іменуються за наступним принципом: Користувач:Ім'яКористувача/назва_скіна_з_прописної_букви.css (приклад: Користувач:Ім'яКористувача/common.css).

Для застосування CSS відразу до усіх вікі на Фандомі (тільки для одного користувача, а не для усіх користувачів вікі-проєктів), їх необхідно додати на сторінку Користувач:Ім'яКористувача/global.css.

Імпорт[]

CSS, як і JS, можна імпортувати, а не копіювати. Для цього є два метода:

@import[]

Використовуючи даний спосіб, ви зможете без особливого труда імпортувати потрібні CSS. Для цього потрібно усього лише записати на самий перший рядок (вище не повинно бути якогось коду, коментарі не зважають) наступне:
Для імпорту в межах одній вікі:

@import url("/index.php?title=MediaWiki:PAGENAME.css&ctype=text/css&action=raw");


Для імпорту з однієї вікі на іншу:

@import url("http://URL_ВІКІ.wikia.com/index.php?title=MediaWiki:PAGENAME.css&action=raw&ctype=text/css");

importArticles[]

CSS можна імпортувати за допомогою JS, але цей метод не дуже ефективний, так як JS завантажується з некоторым опозданием и придётся очікувати перевірки JS. Такий метод чаще використовують лише на Fandom Open Source Library.

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

importArticles({
    type: "style",
    article: "MediaWiki:PAGENAME.css"
});

CSS та політика налаштувань[]

Через те, що CSS дозволяє змінити та модифіцути майже будь-який елемент на вікі, багато змін заборонені Умовами Використання та політикою налаштувань Фандома. В частковості, під суворою забороною знаходяться модифікації глобального навігаційного меню, значні зміни в правій колонці, будь-які модифікації динамічного макету сторінки, а також будь-які стилі, які можуть навмисно або ненавмисно нести незручності і/або вред користувачами, перешкоджати відображенню тексту статей, інтерфейсу і рекламних оголошень, негативно впливати на інші елементи сайта. Детально про політику налаштувань.

Посилання[]

Advertisement