Can I Use — определение поддержки браузера
Can I Use — если вы когда-нибудь интересовались совместимостью с неким браузером каким-нибудь свойством СSS, псевдоэлементом, форматом изображения, это значит, что вам пригодится сервис Can I Use. Он содержит постоянно обновляемые сведения о том, какие технологии поддерживают настольные и мобильные браузеры.
Расшифровка поддержки в виде цветовой схемы:
1. Зеленый — поддерживается
2. Красный — Не поддерживается
3. Салатовый — Частичная поддержка
4. Серый — Поддержка неизвестна
Как пользоваться can i use
Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices.
- IE 11
- Safari 13
- Safari on iPhone 11 Pro
- Chrome on Galaxy S20
Did you know?
If a feature you’re looking for is not available on the site, you can vote to have it included. Better yet, if you’ve done the research you can even submit it yourself!
You can import usage data from your Google Analytics account and see exactly how well a feature is supported among your own site’s visitors. Look under the Settings panel to get started!
Usage data for all countries and continents can be imported via the Settings panel.
By default, older browser versions are only shown if they have >= 0.5% usage share. You can increase or decrease this value from the Settings panel.
Each feature support table includes a «Usage relative» button. This will resize each browser version cell to be relative to the amount of support it has for the selected usage source.
Как пользоваться can i use
Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.
Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.
Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
- -webkit- : браузеры Chrome, Safari, Opera;
- -moz- : браузер Mozilla Firefox;
- -ms- : браузер Internet Explorer.
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причины появления префиксов
Причин для появления префиксов было достаточно много:
- Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
- Для решения проблем с кроссбраузерностью.
- Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Как использовать префиксы
Рассмотрим в качестве примере следующий код:
Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.
При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.
Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.
На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing .
Как проверить поддержку определенного свойства в браузере
Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.
Например: проверим, как реализовано свойство transform в браузерах.
На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
The CanIUse Embed
Embed up-to-date data from caniuse.com and mozilla’s browser compat data. Displays feature support data for multiple versions of the 10 major browsers. Configurable, reliable, and fully responsive.
Examples
The embed can be used in several forms.
Interactive Embed
By default, the interactive embed will display the feature support for the current version, 1 version in the future, and 2 versions back.
You can also select to display the accessible colours scheme by default. Although users will always have the option to toggle between the colour schemes.
Live Image
For use in places where Javascript is not supported, you can use the live image instead. The image is updated daily.
The image can be accessed by passing the feature ID into the URL (or generating one below):
Note: Currently only works for features from caniuse.com, not mozilla data
Static Image
If you want to capture the feature support for a specific time, you can also create a static image.
Create your Embed
Select Feature
What feature are you trying to display?
Select Embed Type
What type of embed would you like? See examples above for more information
На сайте Can I use есть такой определение, частично поддерживает?
Ответ: норм если браузеры ваших клиентов поддерживают его
А кто ваши клиенты это уже сами разбирайтесь, может это бабульки сидят в бухгалтерских фирмах на ie8. Я то откуда знаю что для вас «норм» а что нет?
Ну вот вы и выяснили
1. на встречу приезжают значит вашим сайтом (я так понимаю) будут пользоваться в поездке, и никто с собой не будет системник с монитором тоскать, значит все с мобилок. Окей какая ценовая категория у этих мобилок? Айфоны последние? Или нокиа 3310.
2. школьники с чего сидят школьники? Какие у них устройства?
3. пенсионеры а они с чего? Они вообще умеют пользоваться компом и интернетом? Если да, то как они пользуются? спойлер (увеличивают шрифты). Опять же с каких они устройств
Я блин чё ваш бизнес аналитик? Мне за это не платили. Сами разбирайтесь с этим. Если вы делаете сайт для людей, ну так сделайте так, чтоб они смогли им пользоваться, если 90% вас устраивает, то вперёд
Can I Use — определение поддержки браузера
Can I Use — если вы когда-нибудь интересовались совместимостью с неким браузером каким-нибудь свойством СSS, псевдоэлементом, форматом изображения, это значит, что вам пригодится сервис Can I Use. Он содержит постоянно обновляемые сведения о том, какие технологии поддерживают настольные и мобильные браузеры.
Расшифровка поддержки в виде цветовой схемы:
1. Зеленый — поддерживается
2. Красный — Не поддерживается
3. Салатовый — Частичная поддержка
4. Серый — Поддержка неизвестна
The CanIUse Embed
Embed up-to-date data from caniuse.com and mozilla’s browser compat data. Displays feature support data for multiple versions of the 10 major browsers. Configurable, reliable, and fully responsive.
Examples
The embed can be used in several forms.
Interactive Embed
By default, the interactive embed will display the feature support for the current version, 1 version in the future, and 2 versions back.
You can also select to display the accessible colours scheme by default. Although users will always have the option to toggle between the colour schemes.
Live Image
For use in places where Javascript is not supported, you can use the live image instead. The image is updated daily.
The image can be accessed by passing the feature ID into the URL (or generating one below):
Note: Currently only works for features from caniuse.com, not mozilla data
Static Image
If you want to capture the feature support for a specific time, you can also create a static image.
Create your Embed
Select Feature
What feature are you trying to display?
Select Embed Type
What type of embed would you like? See examples above for more information