CSS, які бажано включати в будь-який Webflow-проєкт

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

*:focus { outline: 0; }*

Властивість font-smooth, яка дозволяє контролювати згладжування шрифтів. Але вона не була офіційно прийнята до специфікації CSS. Тому її слід використовувати у різних інтерпретаціях з відповідними префіксами браузерів. Властивість text-rendering відповідає за контроль якості рендерингу тексту. Якщо хочете, щоб ваші тексти були максимально якісні і гладесенькі - використовуйте код, що нижче

*body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}*

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

*a, .w-input, .w-select, .w-tab-link, .w-nav-link, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}*

Напевно, це все, що ми б радили включати до кожного Webflow-проєкта.


CSS, які можуть стати в нагоді

Якщо необхідно змінити розмір шрифта, на який посилається 1rem

*:root {
   font-size: 1vw;
}*

Замість значення у прикладі прописуєте будь-яке власне значення.

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

*.vertical-text {
  writing-mode: vertical-lr;
}*

Варіанти властивості writing-mode:

**horizontal-tb**;

Текст розташовується зліва направо та зверху вниз. Наступний рядок розташовується під попереднім (стандартний тип відображення).