Доповідь по CSS за 2014 рік: Перевірка використання CSS в «польових умовах»

CSS — це інструмент, за допомогою якого HTML перетворюється в повністю зверстану сторінку. CSS — це мова, повний дивацтв і непередбачуваних поворотів, і тому найчастіше створення таблиць стилів являє собою найменш улюблену роботу для розробника. Протягом останніх декількох років спостерігалося значне підвищення кількості програмних оболонок і інструментів, що дозволяють полегшити написання CSS і зменшити ймовірність помилок. SASS і LESS правлять бал у сфері попередньої обробки, а такі оболонки, як Bootstrap, Foundation, Bourbon, Susy, і Unsemantic (а також безліч інших) використовуються для прискорення отримання зверстаній сторінки.

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

Методологія

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

Список досліджуваних мною доменів очолили топ-1000 сайтів за версією Alexa, що представляють собою вибірку «популярних» і «великих» сайтів. Вони надають звіт про мільйон сайтів з найбільшим місячним трафіком, так що я просто вибрав першу 1 000 з них.

Для того щоб заповнити решту списку мов доменів, я вибрав довільні сайти зі списку розсилки Quick Left, що представляє собою змішання минулих і потенційних клієнтів, співробітників, шанувальників і іншого народу зі всього світу. Спочатку я хотів зробити довільну вибірку з Топ-1 000 000 сайтів Alexa, проте навіть цей список включає тільки найбільші сайти, що приблизно складає 271 мільйонів зареєстрованих по всьому світу доменів, так що наш список розсилки, я сподіваюся, являє собою кращу вибірку, яка може включати MVP, персональні сторінки і інші «нескладні» веб-властивості.

Остаточний список склав 10 400 доменів, представляючи собою, грубо кажучи, репрезентативну вибірку інтернету. Я завантажив з цих сайтів, всі CSS-файли, на які посилається головна сторінка:

cat domains.txt | xargs-I % wget http://% -r-A '*.css*' -H --follow-tags=link


Цей процес зібрав загалом близько 28 000 CSS-файлів з тих 10 400 доменів. Потім їх прогнали через модуль синтаксичного аналізу СSS, що дозволило мені зберегти понад 8,7 мільйонів записів селекторів, властивостей і значень (наприклад, span.important, font-weight, bold). Вони були збережені в Postgres і піддані глибокій індексації для подальшого дослідження.

Зведені дані

img

Розподіл використовуваних властивостей CSS приблизно відповідає стандартному розподілу Парето. З'ясувалося, що незвичайні властивості використовуються вкрай рідко, і вивчення перших 50 або близько того, властивостей повинно бути першочерговим завданням будь-якого початківця розробника.

Також було вкрай цікаво дізнатися кількість помилок і недійсних правил. Дивно, але ці правила були набрані, (найімовірніше) перевірені, виявилося, що в браузері вони не працюють, але їх все одно залишили в таблицях стилів і внесли в готовий продукт. Найбільше мені сподобалися помилки bototm, foat і heith.

Селектори

img

Розподіл довжини селектора

img

Селектори CSS здебільшого короткі, з нечисленними гідними згадки винятками. Стислість селекторів в більшості випадків вважається позитивним властивістю, так як загальне розташування елемента має складатися з кількох правил, що відносяться до одного елемента. Такі системи, як BEM, приводили цього обґрунтування. У загальному випадку довгі і непоширені селектори перешкоджають повторному використанню, а багаторазовий набір стилів вважається стандартною кінцевою метою використання CSS.

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

Постійне поліпшення

Використання префіксів
img

Префікси постачальника для сучасних, самостійно оновлюються браузерів більше не потрібні. Гарна новина для всіх властивостей CSS3 вихідна форма використовується набагато частіше, ніж будь-який з префіксів. Префікси-webkit і-moz переважають над-o і-ms зі значним відривом.

Багато IDE, оболонки CSS і веб-сайти генерують набори правил, які вже включеними префіксами. Розробники можуть спробувати позбутися зайвої ваги (в залежності від аудиторії), а адаптація під браузер — це не той випадок, коли за звичкою слід додавати префікси. За допомогою CanIUse створіть перехресне посилання на Google Analytics для вашого сайту, щоб визначити, чи має це сенс для вашої аудиторії.

Я бачив безліч випадків підтримки старих версій IE, на що вказували хакі * і _. Це інструменти, що дозволяють написати код, який можуть читати тільки певні версії Internet Explorer. Відома в інтернеті особистість, Підлогу Айріш, пропагував альтернативи використанню хаків в браузері в далекому 2008 році, а метод, схвалений Microsoft, полягає у використанні умовних коментарів для включення окремих або допоміжних таблиць стилів для відповідних браузерів. Однак у поспіху простіше пропустити такі підходи, тому хакі-зірочки і хакі-підкреслення все ж переважають.

Кольори

НАЙБІЛЬШ ПОШИРЕНІ КОЛЬОРИ

img

Колірний простір, пропоноване шістнадцятковими кодами, являє собою 166 квітів, і найбільш поширені кольори, швидше за все, будуть перебувати серед відтінків сірого, коли R == G == B. Відтінки сірого можуть ставитися до кольору тексту, кольору кордонів, різних тіням діалогових вікон. Фірмові кольори найчастіше унікальні для кожного сайту, та я не очікував побачити інші кольори, крім відтінків сірого, в топ-10.

Поясненням того, що в першу десятку потрапив синій, може служити той факт, що до середини листопада 2014 року значення #428BCA відповідало змінної $brand-primary в Bootstrap, яка згодом використовувалася в усьому проекті. Це вказує на популярність даної програмної оболонки.

img

У середньому, файл має 169 заявлених квітів. Для кожної сторінки завантажувалося по декілька файлів, і достаток квітів демонструє відсутність однакової політики в області стилю або використання колірних змінних для збереження сталості колірної теми сайту.

Одиниці виміру

img

Існує величезний вибір варіантів, доступних при завданні розмірних властивостей CSS. У кожній одиниці виміру є свої переваги і недоліки: деякі краще підлаштовуються під чуйний дизайн, інші гарантують масштабування при друку. Знайомі і широко відомі «абсолютні» (px) і «відносні» (%) переважають за кількістю випадків використання. Слід зазначити, що підтримка браузера для більш екзотичних одиниць виміру не так широко поширена.

Текст і шрифти

Наявність встановленого набору шрифтів дозволяє сайту створювати враження однакового і зрозумілого. Шрифт вносить свій внесок в ієрархію дизайну і здатність користувача прочитати вміст. Середній домен має 31 заявлений різний розмір шрифту у всіх таблицях стилів.

Кількість розмірів шрифтів

img

Кількість розмірів шрифтів на один домен значно коливається. Неможливо обчислити, скільки шрифтів було використано на головній сторінці або скільки було сховано в засіках програми для особливих випадків. Деякі чудово виглядають сайти використовують у загальній складності до 20 шрифтів для своїх сторінок. Я вважаю, що краще не гнатися за кількістю розмірів шрифтів. Це створює враження сильної, однакового дизайну, а також полегшує співпрацю між дизайнерами і розробниками.

Чуйний дизайн

Чуйний дизайн був вперше представлений в 2010 році Етаном Мэркоттом і вихором пронісся по мережі, залишивши близько 64% сайтів, очищених за рахунок використання свого роду медіа-запитів в CSS. Контент повинен підлаштовуватися під розмір екрану, на якому він буде відображатися, і на те, чи буде він відображатися на мобільному або стаціонарному пристрої.

Медіа-запити стали доступними починаючи з IE9, і вони дозволяють налаштувати стилі відповідно з певними розмірами екрану, його орієнтацією, співвідношенням висоти до ширини, дозволяючи чуйному дизайну проявити всі свої переваги.

Найбільш часто зустрічаються медіа-запити — це max або min-width, що становлять 89% всіх медіа-запитів. Нижче представлені найбільш поширені значення ширини, на які розробники змушують реагувати свої стилі:

img

Крива в області точки 990 px ширше за інших, у неї входять також безліч інших значень: 960, 970, 980, 990, 992, 1000 і 1024 пікселів. Інші області на кривій, позначені за допомогою зелених ліній, набагато вже, що показує менший розкид значень щодо контрольних точок при такій ширині.

Точки, які люди вибирають в якості контрольних, вказують на те, від яких коефіцієнтів форми вони хочуть відштовхуватися. Спостерігається зростаюче розмежування пристроїв на т. зв. «телефони», «планшети» і «настільні ПК». Зокрема, поточні контрольні точки Bootstrap, використовувані за замовчуванням, складають 768, 992, і 1200. Тут наведені деякі значення ширини екранів пристроїв.

Фреймворки

img

Визначити використовуваний програмну середу було непросто. Для отримання значень я використовував комбінацію пошуку по іменах файлів, коментарів (часто оставляемым добропорядними мінімізаторами) і унікальним класів. Це найменш точно складена таблиця в цій доповіді, проте вона показує, що Bootstrap з сильним відривом лідирує в серцях і умах розробників. Лише близько 10% із загального числа досліджуваних доменів мали визначається програмну середу.

Додаткові ресурси

Завантаження додаткових ресурсів також може бути визначена в CSS, зазвичай це відноситься до визначення фонового малюнка (background-image). Нижче представлені найбільш поширені формати файлів, які ми визначили в нашому дослідженні. Всього було досліджено близько 59800 об'єктів.

img

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

Різне

ВЕЛИЧЕЗНИЙ Z-INDEX

Найвищий z-index склав неймовірне число, 999999999999999999999999999, або 9,99e26. З встановленим за замовчуванням значенням повторень клавіші для OS X, набір цього числа займе 3 секунди безперервного утримування клавіші 9. Якщо взяти таку кількість листів паперу товщиною 0,05 мм, висота вийшла стопки складе відстань, в 10 трильйонів разів перевищує відстань від Землі до Сонця. Найгірше, що такий великий оголошений z-index викличе переповнення, і ні за що не буде працювати так, як очікується. Найнижче виявлене значення більш обґрунтовано — -999999.

ІМЕНА КВІТІВ В CSS

Перелічені нижче назви кольорів у CSS зустрічалися тільки по одному разу: antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite. Мій улюблений колір — papayawhip, чудовий оранжево-бежевий.

Висновки

Після аналізу даних, я зміг зробити наступні загальні висновки:

1. Люди не надто піклуються про своїх CSS

2. Добре виконані таблиці стилів можуть вирішити безліч поширених проблем

3. Сучасні функції CSS широко використовуються

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

Порядок у ваших CSS-таблиці так само важливий, як і написання чистого, добре опрацьованого коду. Тримаю парі, що погані CSS можуть сповільнити роботу розробників більше, ніж будь-який інший технічний аспект, пропорційно знецінюючи їх працю. Команда повинна стежити за тим, щоб CSS містилися в чистоті і порядку.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.