Самый используемый веб-браузер в мире — Chrome. Это то, что знают люди, которые не знают, что Брэйв или Вивальди могут делать практически то же самое. Трое упомянутых до сих пор используют движок Chromium, и там доминирование еще более подавляющее. Остальная доля рынка оспаривается Edge, опцией по умолчанию в Windows, Safari, тем, что использует macOS/iPhone, и Firefox, один из лучших браузеров, который используется по умолчанию во многих дистрибутивах Linux.
Плохо то, что Firefox, чтобы конкурировать, должен все делать правильно. Он делает это во многих сценариях, но недостаточно в CSS.. В списках новостей их последних выпусков Мы можем читать такие моменты, как «Теперь поддерживается правило или функция X CSS», и это нормально, но все движется быстро, и Mozilla сильно отстает по сравнению с Chromium. Здесь я расскажу вам о паре примеров, хотя первый из них к лучшему.
Firefox + современный CSS = проблемы?
Я изучал HTML, CSS и увидел лицо JavaScript в академии. Мы изучили основы, и на одной из практик мне пришло в голову послушать веб-дизайнера, который сказал, что нам не следует использовать position: fixed в заголовке, и мы будем использовать sticky. Я подумал, что это хорошая идея: если используется первый, то элемент «не занимает места», то есть то, что находится после того, как он переместится вверх, поэтому приходится производить расчеты, чтобы он не закрывался. Второй хоть и не предназначен для этого, но "место занимает", так что же ниже в DOM остается внизу. Что ж: Firefox меня сбил с толку, и я на собственном горьком опыте усвоил, что нужно проектировать для максимально возможного количества браузеров.
Краткая история, объясняющая это все вращается вокруг движка Chromium. Мы все тестировали в Chromium и думали, как это там будет выглядеть. Потом смотрим на Safari, и если он в них хорошо работает, вообще, Edge должен скоро его поддерживать, а Firefox... процент очень мал, "пусть используют Chrome", говорят они.
Вложенность или вложенные правила CSS
В 2023 году консорциум W3C взял взаймы у пререкаться, текстовый препроцессор для CSS, вложенный синтаксис o гнездование по-английски. Попробуем кратко изложить, что это такое, чтобы не утомлять тех, кто ничего не знает о CSS. До тех пор, если мы хотели поместить правило CSS для тега, класса или идентификатора и другое правило при наведении курсора, нам приходилось помещать что-то вроде этого:
к {
красный цвет;
}
а: наведите {
цвет: зеленый;
}
Теперь можно вкладывать правила, так что подкласс :hover находится внутри блока меток a:
к {
красный цвет;
&:наведите {
цвет: зеленый;
}
}
Мы не собираемся входить сюда, чтобы оценить, какой синтаксис лучше или другой. Каждому решать. Правда в том, что Saas часто использовался даже на веб-сайтах, где код был общим, и они внедрили его не просто так. В теории, он лучше читается и экономит строки.
Вложенность CSS охватывает больше, чем предыдущий пример, но нас здесь интересует то, что Firefox поддерживает ее на 100%. На самом деле, могу ли я использовать говорит нам кто первый это сделал. Есть браузеры, которые заставляют вас использовать вложенный селектор (&) даже для того, чтобы поместить одну метку внутрь другой (метка1 метка2), а Firefox прекрасно работает и без него. Это способ. Следующий не очень.
Анимация прокрутки без JavaScript
En ссылку от разработчика Mozilla (MDN) есть еще одна новинка, которая уже не так хорошо работает в Firefox. Ну, это не работает. Любопытно то, что MDN носит имя создателя Firefox от своего имени, а в его блоге я нашел эту новинку тоже из 2023 года. Здесь нам не нужно так много говорить о синтаксисе, и мы должны остановиться на поддерживать. Это, а также то, что до тех пор самым распространенным было показать положение прокрутки с JavaScript. Именно в JS нам пришлось добавить прослушиватель событий и увеличить контейнер в зависимости от того, где мы находились на странице. Теперь это возможно только с помощью CSS.
Я взял на себя смелость добавить на эту страницу код одного из примеров (если будете смотреть, не обращайте внимания на z-индекс). Если вы войдете в систему с помощью Chrome/Chromium, Vivaldi и Brave, и это лишь некоторые из них, вы увидите, что вверху есть полоса, которая прокручивается рядом с содержимым (если ничего не пошло не так). Однако в Firefox полоса будет отображаться со 100% шириной.
Safari не лучше Firefox, но…
Анимация также не будет отображаться в Safari.или нет на момент написания этой статьи. Это еще один крупный браузер, который отстает в CSS, но это не совсем то же самое. Safari — браузер по умолчанию в macOS, и он очень хорошо работает в своей экосистеме. Это также то, что использует iPhone, и благодаря этому он занимает значительную долю рынка. Итак, как мы уже упоминали, это второй браузер, который анализирует любой веб-дизайнер.
Когда вы хотите реализовать что-то новое и посещаете «Могу ли я использовать», который является справочным, вы сначала смотрите на Chrome, затем на Safari, а затем на все остальное. Если вы решите не реализовывать что-то, то это не потому, что это недоступно в Firefox; Это потому, что это не для Safari. Поэтому Мозилла тебе следует улучшить свой браузер, по крайней мере, больше, чем Safari. К счастью, он делает это, но очень медленно, если не хочет находиться в световых годах от Хромиума.