Rustam Bainazarov

В качестве крестика вы использовали эмодзи ✖. Эмодзи не красятся, если в системе есть цветной шрифт для них. В iOS данный эмодзи имеет черный цвет. Ссылка на описание.



Замените на нормальный знак × — и все будет работать:

Если нужно, чтобы браузер ждал загрузки шрифта и только потом показывал текст, тогда поставьте вот это во @font-face:
font-display:block;

Но (!!!) я не советую этого делать, у вас сайт грузится быстро и хорошо, контент появляется почти мгновенно, зачем ухудшать. 300 мс времени, когда отображается не тот шрифт — это фигня полная. Гораздо важнее, что у вас первый контент сайта прогружается быстро. Но раз клиент хочет, то это поможет.

А скорость загрузки и обработки шрифтов с Google Fonts CDN вы не увеличите.

Абсолютное позиционирование внутри контейнера-якоря + vw:

Почему Толстого зовут Львом? Он же человек.

браузер запрашивает из css файла нужный участок кода?

Нет, конечно. Как он может что-то запрашивать там, если файл скачивается целиком?

Медиа-запрос — это обёртка для правил, которые срабатывают при достижении описанных в нём (медиа-запросе) условиях.

Скачиваются вместе со всем CSS-файлом. Вообще, браузер не умеет скачивать выборочно куски из CSS.

Нет, так не работает :nth-child.

:nth-child(3) возвращает именно третий элемент, чем бы не ни был. А так как он не name=equal, то ваше правило для него и не срабатывает. К сожалению, в CSS данный алгоритм работает именно так.

Поэтому только через JS, ибо CSS тут бессилен. Есть костыль: можете изменить теги всех div с name=equal на другой и выбрать их тогда :nth-of-type:



Полный костыль, да. Так делать не надо, хоть и работает.

Можно так, например, только высота ячеек должна быть одинаковой, если хочется, чтобы кол-во элементов в последней строке было не максимально возможным, от кол-ва столбцов такой способ не зависит:




Если кол-вол элементов всегда будет максимальное в последней строке (полное её заполнение), то хак на :before не нужен, а строки могут быть разной высоты:

Дополню, что можно ещё использовать вот такой хак, если нужно не менять габариты (padding и другие манипуляции их увеличивают), но при этом увеличить зону действия элемента:



Да, я сам дошёл до такого полезного и смешного костыля. Удобно использовать с мелкими единичными кнопками, у которых нужно сохранить небольшие габариты, но увеличить зону действия. Ну и т. п.

Когда вы применили :hover к нужному элементу, это не значит, что именно у него будут показаны стили дочерних элементов. На примере div:hover a — после выбора состояния :hover для родителя нужно выбрать именно a, потому что стили применяются именно к нему, несмотря на то, что они идут от :hover родителя (что, чёрт, логично).

Нет. На уровень выше CSS идти не умеет.

В невнятном по отдаленности будущем будет вот такая штука:

div:has(span) {
 ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Когда-то там, но не сейчас. Поэтому ответ — нет, такого селектора на данный момент нет в CSS. К огромному сожалению, кстати.

UPDATE. Данный селектор работает в блокираторе рекламы uBlock, но это не CSS. Там (в uBlock) есть :if, :has, :has-text и т. п. — такого в CSS отродясь не было, т. е. это просто имитация синтаксиса CSS для удобства восприятия и создания правил.

То есть, в данном конкретном случае синтаксис чернового варианта официальной нереализованной спецификации CSS попросту совпал с инструментом данного плагина, поэтому он и сработал там.

* {
  -webkit-tap-highlight-color: transparent;
}

Можете вместо * использовать более точечный селектор.

Правило в CSS закрывается без точки с запятой:

.class {
   color: #fff;
} /* Тут не надо точки с запятой, точнее, он тут запрещен, ибо он будет всё ломать в последующем правиле */

Собственно, из-за этого и не красилась ваша кнопка. Все стили применяются, если исправите ошибку:



Ещё ошибка. Так нельзя:
<div class = "wrapper"></div>

Вот так надо:
<div class="wrapper"></div>

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

https://medium.com/@hugodesigns/how-to-create-appl...

Смените сложность вопроса на «лёгкую», это базовые свойства CSS.

Если нужно фиксировать на экране, то position: fixed + viewport-единицы (можно тупо в процентах в данном случае, ибо позиционируем относительно окна):


Если без фиксации при прокрутке и внутри любого блока, то тут уже обязательно viewport-единицы, чтобы не зависеть от обёртки и брать размеры прямо у окна браузера:


Учтите, что viewport-единицы в мобильных браузерах (Chrome Android и iOS Safari) со схлопываемыми (косое слово, да) панелями учитывают размер окна без учёта этих панелей в раскрытом состоянии, поэтому они могут перекрывать этот блок, пока не будут скрыты/сжаты.

Вот так надо:


Вот эти 3 атрибута для тега video:
playsinline muted autoplay

Компилирую ответ.

Это внутренний размер буквы. Прописано в шрифте при его разработке, это нормально.

Если так критично, то отрицательный margin с em вас спасёт:


Источник решения:
https://stackoverflow.com/questions/28809771/left-...

Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

Потому что с чистыми inline-элементами (:before и :after являются оными изначально) не работает свойство transform. Поменяйте, к примеру, на inline-block, как я в примере, и все будет работать:

CSS тут бессилен в одиночку. Нужен ещё и SVG:
https://codepen.io/xgad/post/svg-radial-progress-meters

https://css-tricks.com/almanac/properties/o/oversc...

https://caniuse.com/#feat=css-overscroll-behavior

html, body {
    overscroll-behavior: none;
}

Будет работать только в современных браузерах. В Safari это не будет работать, к сожалению, там этот механизм не отключить.

Update. Убивает механизм «потянуть для обновления страницы» в Android Chrome.