Максим Морев

В хроме есть инструмент, но полезность спорная.
Так как, во-первых, не все сайты состоят из одной страницы, а функционала объединения данных с разных страниц в одну статистику не завезли (пока не завезли), а во-вторых - все те штуки, которые применяются динамически - не учитываются как "использованные".
Есть сервисы, на практике лично не использовал, но видел отзывы, что тоже работают весьма неидеально.



UPD:
Вспомнил статью, там подробнее о вашей беде.

По наведению на кнопку контентной части добавляется класс "interference", который запускает анимацию:

.interference {
  animation: interference 0.5s linear;
}

Сама анимация простейшая:

@keyframes interference {
  20% {
    filter: blur(2px);
    transform: skewY(-1.2deg)
  }
  30% {
    filter: blur(2px);
    transform: skewY(1.2deg)
  }
  100% {
    filter: blur(0px);
    transform: skewY(0)
  }
}

Заодно псевдоэлементом добавляется фиксированный фон, который мигает также с помощью свойства animation.
Код форматировать лень, гуглите "css blink animation".
Вот картинка: https://danieldefo.ru/styles/star/glitch-overlay.png

Резюме: дизайнерская задумка ничего (хотя мне сама иконка больше нравится - есть что-то такое мистическое), а чисто технически это делать - скука смертная.

Откройте консоль, добавьте класс сюда и изучайте инспектор.

Добрый день.
По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK

Установите кодировку файла в UTF-8 без BOM, в HTML в head поставьте <meta charset="utf-8">.
Если не поможет, то заставьте ваш сервер отдать заголовок Content-Type: text/html; charset=utf-8 любым известным способом.

Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".

Да просто у вас очень странные пляски с навешиванием событий.

Уберите ваше

document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);

И поставьте вместо него:

document.getElementById('textArea').addEventListener("input", updateSize);

И будет работать как вам надо.

Потом попробуйте вбивать текст, не отбивая его пробелом (просто зажмите символ и удивитесь, что всё сломалось).
Осознайте, что единственный адекватный способ посчитать новую, необходимую высоту textarea - это скопировать её куда-то "out of bounds" вместе с контентом и узнать scrollHeight.

Держите пример:

Здравствуйте.
У нас в вебе немного инструментов для сглаживания.
Всего один: font-smooth, предложенный давно-давно, да так и не внедрённый толком в браузерах.
Оно внедрено за префиксами в некоторых браузерах.
Есть ещё свойство text-rendering, которое влияет на отрисовку, но это история не про сглаживание.

Таким образом, если вы напишите что-то в духе:

html {
  -webkit-font-smoothing: antialiased; // or subpixel-antialiased
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

... и шрифты не придут в норму, то либо у вас битый шрифт, либо "вы сделали всё, что могли", других инструментов нет (я никогда и никому не буду рекомендовать для всех текстов на странице задать text-shadow, чтобы имитировать сглаживание).

Тот же Montserrat скачайте с Google Fonts и переконвертируйте самостоятельно - он точно может выглядеть нормально :)

То, что вам нужно, называется "Аккордеон", сам эффект найдёте по ключевому слову "slideDown" (по реализации из jQuery).

Вот так, например.


А вообще, если уменьшение радиуса скругления при уменьшении вьюпорта не требуется - смотрите на свойство border-image - просто идеальный кейс использования, изящнее будет.

А никак.
Если нужно делать при наведении текст жирным, чтобы он не менял свои размеры, то можно использовать хак при помощи text-shadow.
Пример сделать сейчас нет возможности, загуглите "text-shadow like bold" - там всё расскажут.

Задачка интересная, вообще, как говорится, "со звёздочкой".
Пользователи IE и Edge в пролёте, ибо без fit-content задача не решается (имеется в виду решение на чистом CSS).
Как решить "для всех" без применения JS - не вижу, что чаще всего означает "никак" :)

Плохо.
Категорически не рекомендую задавать какие-то стили напрямую тегам, если это не reset/normalize - не сейчас, так попозже отстрелите себе ногу с таким подходом.

Если уж очень хочется, то оберните в свой контейнер и задавайте

.your-block img {
  // styles
}

Как можно отстрелить ногу?
Самый банальный пример - вставили какой-нибудь виджет, который рисуется не в айфрейме - там есть img - виджет поехал.

Вам нужно уложить в голове, как рассчитывается ширина блока. Вот тут про блочную модель, например.

В вашем случае - можно либо убрать width у section (блочные элементы по умолчанию на всю ширину тянутся, ширина задана как auto), либо задать ему box-sizing: border-box, чтобы значение padding включалось в ширину блока.

Вот и появилось поколение людей, которые из ссылок будут делать гриды...
Ваша задача не решается при таких вводных никак.

Мы можем выровнять текстовый контент внутри по центру (1), но при переполнении он и останется по центру (2).

Если есть возможность добавить внутрь вложенный элемент, то задача решается (3 и 4).



---

Когда-нибудь это будет решаться так:

.flex {
  align-items: safe center;
}

Но эта штука уже два года в черновиках и движений в эту сторону нет особо.

CSS - декларативная штука, а мы не знаем количество символов в строке и соответственно не можем задать нужный размер текста.
Так что нет, без JS задача не решается. Когда мне крайний раз надо было - использовал fitty, работает без нареканий.

Prettier не умеет расставлять порядок свойств. Это вообще очень простой инструмент, который заботится только о базовом форматировании.

То, что вам нужно, реализуется средствами stylelint и его плагина stylelint-order.
Вот очень толковая статья, после прочтения которой вопросов не должно остаться.