В каких браузерах тестировать сайт 2021
Я руковожу платформой Loading.Express. Наш сервис проверяет скорость загрузки сайта и помогает ускорять медленные сайты. Мы любим быстрый интернет и хотим сделать мир лучше. Поэтому я протестировал 20 похожих сервисов.
Медленный сайт — убийца продаж!
Даты создания взяты из Web Archive. В прошлой статье я анонсировал исследование банковской сферы РФ.
Космический корабль для web-мастеров, SEO-специалистов, копирайтеров и других онлайн-трудяг. Написано скорость сайта, а замеряет скорость ответа сервера.
- Запущен в июле 2016 года.
- Один сайт за проверку.
Набор сервисов, в том числе проверка скорости загрузки сайта. Выдает не совсем точные данные, возможно, анализ происходит по старому алгоритму PageSpeed Insights от Google.
- Запущен в феврале 2015 года.
- Один сайт за проверку.
Быстрая проверка скорости сайта от компании «Русоникс».
- Запущен в октябре 2012 года.
- Один сайт = одна проверка + продажа хостинга.
- Проверки из России.
Проверка через сервис PageSpeed Insight. Все данные через него. Данные могут быть неточными.
Сервера у них тоже, как правило, с проверками и замерами из США.
Пожалуй, самый популярный сервис проверки скорости сайта. На него равняются все веб-мастера. Но нельзя использовать только этот сервис. Он искусственно ограничивает скорость замера для усредненных показателей. Использовать его надо вместе с GTmetrix, например.
- Запущен 5 мая 2012 года.
- Проверки с серверов в Европе.
- Версия от 2019 года Think With Google.
По неведомым причинам этот сервис пользуется популярностью в России для замера скорости сайта. Сервис платный. Юзабилити хороший.
- Запущен 20 июля 2006 года.
- Проверки из США и Европы.
Хороший сервис. Много функций. Но очень бедное юзабилити. Сделано технарями для технарей. Есть видеоотчеты по загрузке с секундомером. Можно сравнивать несколько сайтов сразу.
- Запущен 2 апреля 2009 года.
- Проверки из США.
- Запустились ребята в 2015 году.
- Юзабилити и дизайн устаревшие. Пользоваться сложновато. Проверки из США.
- Запущен в апреле 2003 года, не обновлялся с 2008 года.
Тест из 25 стран за раз. Тест скорости проходит сразу два раза: без кэша и с ним. Сразу замеряет PageSpeed. Дизайн скромный. Часто зависает при замере скорости из Шанхая.
Сервисы проверки скорости загрузки сайта из разных уголков мира. Где только не создают эти инструменты!
Эти ребята сделали невозможное. Сервис удобен. Задизайнен. Быстр. Замер параметра PageSpeed не обновлен и снимает по старому алгоритму до ноября 2018 года.
Бесплатно сохраняет историю. Снимает видео загрузки. Даёт детальный отчет по времени загрузки каждого запроса.
- Сделан в Канаде, запустился 4 февраля 2010 года.
- Серверов в России нет.
DDoS-проверка вашего сайта. Как будет меняться время скорости загрузки при резко растущей посещаемости? Проверяйте, это важно понимать.
- Сделан в Швеции, запущен 10 декабря 2008 года.
- 50 тестов бесплатно.
Проверка скорости загрузки из семи стран. Сервис запустил пакистанец — с фирмой в Лондоне. Из функций только проверки.
- Сделан во Франции, запущен 8 февраля 2014 года.
Проверка скорости из восьми стран. России нет. Сделали 16 бесплатных сервисов для проверки разных свойств, важных для ускорения. Помогают ускорять сайты под ключ. Написали много мини-статей для SEO про ускорение сайтов. Молодцы!
- Сделан в Нидерландах, запущено 7 апреля 2015 года.
Годный анализ скорости загрузки. Есть автоматическая перепроверка, платная история. Даёт бесплатно проверить с мобилки и с десктопа.
- Сделан в Нидерландах, запущен 4 декабря 2014 года.
Проверка на SEO, адаптив, скорость загрузки. Некий Patrick Sexton пишет, что сделал этот сервис бесплатным для того, чтобы сделать мир лучше. Класс!
- Сделано на Филиппинах, запущен 14 августа 2015 года.
- Сделан в Швейцарии, запущен 3 апреля 2015 года.
Индия. Сервис компании ZOHO. Проверки есть из Петербурга и Москвы. Показывает первый байт, последний и время ответа. Есть много разных инструментов для проверки различных параметров, косвенно касающихся ускорения сайтов.
Довольно странный сервис. Замеряет скорость сайта на модемах.
Скорость загрузки сайта напрямую влияет на прибыль компании. Точка.
Для наглядности мы вывели инсайты в несколько рейтингов по нишам:
Рейтинг сайтов банков России по версии «Банки.ру», тут есть банки, сайты которых загружаются больше 30 секунд.
Рейтинг сайтов веб-студий России по версии «Рейтинга рунета», тут есть веб-студии, страницы у которых весят более 70 МБ.
На подходе статья с обзором удивительных инсайтов о веб-студиях из «Рейтинга рунета».
А как же официальная утилита проверки скорости загрузки сайта в яндекс-вебмастере?
И Метрику можно было бы внести, потому что она меряет скорость вообще по факту у всех ваших посетителей и выдает усредненную аналитику. Плюс решает проблему ежедневного мониторинга. Скорость загрузки можно смотреть в динамике за любой период. И все бесплатно.
Яндекс пока не разработал ни одного сервиса по замеру скорости загрузки сайтов. Если вы про ответ сервера из вебмастера яндекса, то это не про загрузку сайта.
По метрике - это вы по факту узнаете, что сайт загружался долго. Что именно его так долго загружало метрика не скажет. А эти инструменты показывают как ускорить сайт.
Комментарий удален модератором
Хорошая подборка. Спасибо!
Неплохой сервис, спасибо. Не хочу только, чтобы вы мне звонили и устно что-то втирали про ускорение сайта, почему бы не оставить форму для оставления электронной почты? Просить телефон это очень навязчиво.
Отстойный у вас сервис, я вам даже телефон не оставлял, а вы взяли и сами стали звонить, взяв телефон с проверяемого сайта и выпросив у менеджеров мой. Никому не рекомендую, очень навязчивые типы.
Почему нету Google Lighthouse?
И очень скудно описан WebPageSpeedTest
Лайтхаус. Если б статья называлась 100500 способов замерить скорость, то про лайтхаус написал бы тоже.
Про вебпейджспид — хорошо, что люди узнают о нем, а то многие совсем про его существование не знали до сих пор!)) более подробно, возможно опишем в следующих статьях.
При заходе на сайт:
Loading.express, как и большинство сайтов в интернете, использует cookie: это дает нам возможность . следить за тем, чтобы наши сервисы были доступны и не упали
Скажите, как при помощи кукис, оставляемых в браузере пользователя, вы следите за аптаймом?
Решил протестировать наш самый лёгкий "ликбезный" сайт, который, по сути, одна статья. Примерно час в браузере висело вот это, пока я просто не закрыл страницу:
Pingdom Tools
По неведомым причинам этот сервис пользуется популярностью в России
Действительно, пользуется. О причинах я вам с удовольствием поведаю: сервис работает максимально чётко и предоставляет детальнейший отчёт по итогам тестирования.
Не думал, что статья будет такая популярная. К нам в сервис пришли проверяться очень много сайтов. Очередь забилась.
Увеличили мощности. Теперь всё работает еще лучше. Спасибо вам за обратную связь!
У меня сайты на битриксе показывают 0.25 секунд :)
Это написали ребята из бе1.))
К замеру скорости загрузки сайта их сервис мало подходит. А вот скорость ответа сервера они показывают.
На каких браузерах нужно тестировать ваш сайт? Давно надо было написать эту страницу, чтобы каждый раз не пытаться написать заново, о каких браузерах идет речь, и на каких браузерах нужно тестировать свой сайт.
О браузерах и Css.
О браузерах и поддержке Css
Одни браузеры поддерживают все правила Css.
Для других браузеров пишутся отдельные стили, потому, что они не поддерживают те или иные правила css(например).
Как выбрать браузер для тестирования?
На каких браузерах вообще нужно сконцентрироваться для тестирования вашего сайта?
Конечно жже на тех, которые используют пользователи.
Специально для этой темы сделал отдельную страницу о популярности браузеров.
Это не та непонятная, хрен знает откуда взятая статистика!
А реальная - собранная с моих сайтов начиная с 2013года.
Браузер для тестирования "Internet Explorer"
Некоторые свойства - стандартные, которые используются во многих браузерах по умолчанию не поддерживаются "Internet Explorer".
Данный браузер - это точно " НЕ ТОТ " на котором стоит тестировать ваш сайт!
Самый отстойный браузер, который только можно придумать это - "Internet Explorer" - мною глубоко презираемый! Раньше была такая присказка : IE нужен для того, чтобы скачать "Оперу", сейчас это "Яндекс браузер".
Вопрос к microsoft?
В чем проблема!? Хочется спросить у "мелкомягких"(microsoft)? Хотим повыеживаться?
Преследуем цель, чтобы вебмастера проклинали данный браузер или что?
Я правда не понимаю.
Эта шняга уже длится с 2007года(когда я купил свой первый комп). и все такая же порнуха!
Соответственно, количество пользователей данного браузера стремится к нулю!
И это касается всех других браузеров ведущих такую политику!
Статистика по приведенному браузеру
Посмотрите сколько процентов людей пользуются данным браузером!
За 2020 данным браузером пользовались 0.73%
На какой браузер нужно ориентироваться в процессе создания сайта.
Вопрос - на каких пользователей нужно ориентироваться?
Наверное на тех, кого больше - это ведь логично!?
А как интернет поделен между браузерами?
Я делал отдельное видео о браузерах еще и потому, что устал рассказывать на словах, кто на олимпе, и кто отстой.
Не забываем сказать спасибо! Я старался для вас!
Вывод такой:
Два браузера(50%), которые делят интернет это:
Все остальные не более 10%, а IE даже не может выбраться за 3%.
И два браузера мобильный Яндекс и Chrome - не тестировал, но думаю, что логично предположить, что поддержка правил Css аналогична, что в старших версиях(моё предположение).
Итого получается: Что 4 браузера , которые делят весь интернет и в совокупности занимают 70% интернет пространства и есть, на которые надо ориентироваться, при тестировании вашего сайта!
Когда-то карта мира выглядела как лоскутное одеяло. Сегодня все материки и страны залиты одним цветом. Есть лишь два инородных пятнышка — в Северной Корее и Армении. Они свидетельствуют о том, что на территории этих государств большинство интернет-пользователей выходят в сеть с помощью браузера, который не является Google Chrome.
Оглавление
Мировая доминация этого браузера от «корпорации добра» длится уже почти десять лет. Сейчас Chrome занимает 68% рынка персональных компьютеров. Все остальные конкуренты далеко позади. Internet Explorer, земля ему пухом, упал с 44 до менее чем 3%. Доля Firefox от Mozilla снизилась с 30 до 7%.
В центре карты есть самое молодое государство Южный Судан. Но там не до выбора альтернативы предустановленному на Windows-компьютеры браузеру Edge
Гегемон выдавил с рынка практически все альтернативы, а во многие браузеры-конкуренты запустил свою ДНК в виде движка Blink (ответвление от изначального движка Chrome), который используется в браузерах на основе Chromium с открытым исходным кодом. В этом списке сам Chrome, а также Opera, Vivaldi, Microsoft Edge, Yandex Browser и еще целая куча менее известных приложений для Windows. Лишь Firefox держится особняком, оставаясь верным собственным наработкам.
Как так получилось? Достойны ли браузерные войны такого громкого названия? Какие недобросовестные практики использовала «корпорация добра», чтобы установить свой мировой порядок? Есть ли достойные альтернативы браузеру Chrome? Сегодня попробуем разобраться в этом.
Первая браузерная
Вы, наверное, уже не помните, да и я тех времен не застал, но старожилы интернета рассказывают, как во второй половине 1990-х многие сайты шли с пометкой «Совместим с Internet Explorer» или «Лучше всего просматривать этот сайт в Netscape Navigator». Это были два самых популярных интернет-браузера того времени, которые вступили в фазу непримиримой борьбы, вошедшей в историю как Первая браузерная война.
В 1990 году единственным способом полазить по интернету был браузер WorldWideWeb, созданный Тимом Бернерсом Ли. Он назывался так же, как и сама Всемирная паутина, где на различных серверах и компьютерах хранились документы и страницы, доступ к которым можно было получить благодаря кликам по ссылкам. Для того чтобы открывать эти страницы, и нужен был браузер.
Первый браузер, который научился выводить изображение вместе с текстом на одной странице, назвали Mosaic. Он был максимально простым и понятным в установке и использовании — идеальная точка входа в интернет для новичка. Браузер популяризовал интернет среди владельцев персональных компьютеров и повлиял на создателей первых по-настоящему массовых приложений для серфинга в сети: Netscape Navigator и Internet Explorer.
Первый в начале 1995 года доминировал на рынке браузеров. Он был платным для коммерческих компаний, но бесплатным для домашнего использования. Проблема заключалась в том, что большинство компьютеров в те годы, как и сегодня, работали на операционной системе Windows, а Microsoft начала присматриваться к новому для себя интернет-рынку.
Многие, покупая свой первый компьютер, даже понятия не имели, что в мире существует несколько браузеров. С выпуском Windows 95 компания Microsoft начала предустанавливать в систему свой собственный — Internet Explorer. Он был доступен как домашним, так и корпоративным пользователям бесплатно.
В таких условиях компании, доход которой приносил один-единственный продукт, было практически невозможно тягаться с гигантской корпорацией. Создатели Netscape подавали на Microsoft в суд, обвиняя компанию в монополизме, но затяжные судебные разбирательства практически никак не сказались на поведении Microsoft. Рыночная доля Netscape сокращалась катастрофическими темпами, и в начале нового тысячелетия браузер был практически выдавлен с рынка.
Старый мерзкий браузер
Microsoft одержала тотальную победу на рынке браузеров: по некоторым оценкам, к 2003 году 95% пользователей выходили в сеть через Internet Explorer. Microsoft предпочла почивать на лаврах, мало внимания уделяя обновлениям для Internet Explorer. Браузер начал часто появляться в списках худших технических продуктов всех времен. У него были проблемы со стабильностью работы и безопасностью, его широко критиковали за отсутствие поддержки современных веб-стандартов. Веб-мастера и разработчики массово стенали и отказывались от его поддержки на своих ресурсах.
Между ужасным Internet Explorer 6 и не особо хорошей седьмой версией прошло пять лет, и за это время конкуренты начали поднимать голову. Netscape Navigator погиб, но дело его было продолжено. В 2004 году на останках этого браузера выросла первая версия Mozilla Firefox. C 2000 года в гонку включается браузер Opera, который наконец становится бесплатным и доступным широкой аудитории. На пару они начинают генерировать новации.
Из самого заметного, что принесла новая генерация браузеров, — работа с несколькими вкладками в одном окне. Страшно представить, но когда-то каждая страница открывалась в отдельном окне, и на панели задач со временем скапливалось огромное количество одинаковых ярлычков Internet Explorer. Та же Opera значительно экономила трафик и время в «диалапном» интернете, позволяя отключать картинки, обладала менеджером загрузок, умела выводить страницу в полноэкранном режиме, скрывая интерфейс, и еще много крутых вещей наподобие встроенных RSS-, IRC- и почтового клиентов.
Вторая браузерная
В 2003 году на рынок браузеров выходит Apple со своим Safari, отказываясь от Internet Explorer в качестве браузера по умолчанию и привязки к софту ненавистного конкурента в лице Microsoft на своих компьютерах. В системах macOS Safari станет дефолтным только в 2005 году.
Именно этот «яблочный» браузер сыграл столь важную роль в возникновении мира интернет-серфинга таким, каким мы знаем его сейчас. Он в какой-то мере «ответственен» и за создание Google Chrome.
Браузерный движок — это программный код под «капотом» браузера, который занимается интерпретацией и рендерингом интернет-страниц. Весь код, написанный веб-разработчиками, проходит через браузерный движок, обрабатывается и исполняется в окне браузера. Браузерный движок не равно браузер. На одном движке могут быть написаны несколько браузеров, которые будут различаться определенным набором функций и интерфейсом.
Mozilla Firefox работал на движке Gecko, Opera — на Presto, Internet Explorer — на Trident. Эти движки отличаются принципами и скоростью работы, поддерживаемыми веб-стандартами и прочими нюансами. Часть из них были проприетарными, часть — опенсорсными, открытыми для широкого сообщества разработчиков, которые на основе такого движка могли делать собственные браузеры.
Apple для своего будущего браузера выбрала движок с открытым исходным кодом — KHTML. Различные компоненты этого движка, за исключением определенной тайной части, компания впоследствии объединила и выпустила в рамках проекта с открытым исходным кодом WebKit.
Исполнительный директор Google Эрик Шмидт с осторожностью относился к идее выпуска компанией собственного браузера. В индустрии еще была жива память о разрушительной войне Microsoft и Netscape, которая закончилась уничтожением маленькой компании. Шмидт не верил, что пока еще неуверенно стоящей на ногах Google удастся конкурировать с гигантом, который подмял под себя рынок и автоматически устанавливал браузер на все компьютеры с Windows в мире.
Тем не менее разработку Chrome запустили. В качестве браузерного движка выбрали опенсорсный WebKit, который был чище и быстрее конкурентов. Компонент, отвечающий за обработку JavaScript, заменили на более быстрый под названием V8 (с отсылкой к маскулинному двигателю автомобилей). Вкладки запихнули в отдельные процессы, чтобы весь браузер аварийно не падал при глюке одной страницы.
А самое главное — начали активно продвигать его, в том числе используя свое положение. В 2008 году на главной странице поиска Google, которым пользовались сотни миллионов человек, появилось предложение установить быстрый браузер Chrome. На YouTube эксклюзивно для пользователей IE6 возникала плашка, которая предлагала сменить устаревший браузер на что-нибудь поновее. Среди предложений был и Chrome.
Также этот браузер устанавливался параллельно с некоторым другим ПО. Например, при инсталляции Adobe Flash Player на странице по умолчанию была включена галочка для установки Google Chrome. Невнимательный пользователь параллельно с антивирусами и утилитами мог занести на компьютер и Chrome. Порой доходило до максимально странного: Chrome устанавливался даже с компакт-дисков с драйверами для материнской платы.
К тому же начало мобильного века и синхронизация младшего Chrome с десктопным братом сыграли немалою роль в популяризации браузера от Google.
Тем не менее он был легким, быстрым и простым: лишь самые важные и нужные пользователю объекты интерфейса, ставка на производительность и чистоту. Это сработало. А веб приблизился к моменту, когда браузерных движков стало слишком много, и они один за другим начали исчезать.
Opera в 2013 году отказывается от Presto и уходит на движок от Google. Следом в 2015 году отказывается от своего движка Microsoft: на уже насыщенном рынке браузеров вкладывать большие ресурсы в его поддержку и развитие было нецелесообразно. Лишь Firefox осталась при своем Gecko, недавно начав переход на браузерный движок нового поколения.
Со времен Первой браузерной войны и по результатам Второй в сеть теперь можно выходить множеством путей. Да, пускай число браузерных движков и сократилось, но борьба между браузерами переместилась в более приятное для конечного пользователя русло — удобство, скорость, приватность и так далее.
Тестовый набор
В Беларуси топ самых популярных браузеров для компьютеров по итогам июня 2021 года выглядит следующим образом:
- Chrome — 63,9%;
- Opera — 12,6%;
- Yandex Browser — 8,7%;
- Firefox — 6,5%;
- Safari — 4,3%;
- Edge — 3%.
По сравнению с мировой статистикой у нас есть свой особенный колорит. Opera долгое время была самым любимым браузером среди белорусов, и отголоски этого еще можно наблюдать в нынешней статистике. К тому же заметна сила браузера от «Яндекса», который предлагает для нас много региональных сервисов.
Из нашего списка для сравнения исключим Safari, так как в последний раз для Windows этот браузер выходил в 2012 году. Заменим его браузером Vivaldi, который разрабатывает один из основателей Opera.
Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, мы рассказываем в данной статье.
Почему сайты могут по-разному отображаться и работать в разных браузерах
Причина этой проблемы — отличия в исходном коде. Особенно это касается старых версий браузеров.
Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.
В чем выражается кроссбраузерность сайта и почему она так важна
Если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования. Посетители будут уходить с него, не просмотрев и одной страницы. Таким образом, увеличится показатель отказов, а, как известно, этот поведенческий фактор ранжирования сайтов имеет весомое значение. Поисковые роботы посчитают такой сайт неинтересным и понизят его позиции в органической выдаче. О конверсиях, разумеется, не может быть и речи, поскольку пользователю не удалось ознакомиться с предлагаемой продукцией или услугой.
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:
- сохранить структуру;
- не допустить развала верстки;
- избежать наложения текста на текст, изображения;
- сохранить читабельность информации.
Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.
Как протестировать сайт на кроссбраузерность
- Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
- Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.
Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».
Результаты тестирования предоставляются пользователю в виде скриншотов. На них видно, все ли в порядке с кроссбраузерностью сайта или над ней нужно еще поработать.
Из бесплатных сервисов также можно использовать CrossBrowserTesting, Browserling и т.д. Каждый из них отличается определенными функциональными особенностями и возможностями. Некоторые сервисы требуют пройти регистрацию, на других можно проверить сайт и без нее.
Если вы планируете использовать платный сервис, попробуйте BrowserStack . Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.
Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.
Как добиться кроссбраузерности сайта
Предлагаем вам несколько самых действенных способов решения этой задачи:
1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
- нестандартно и прописано для определенного браузера;
- это эксперимент, который еще дорабатывается;
- реализует частичный функционал.
- -moz- применяется в Firefox;
- -ms- применяется в IE и Edge;
- -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
- -o- применяется в старых версиях Opera (на платформе Presto).
Код может выглядеть следующим образом:
- -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
- - webkit-flex-wrap — это свойство для версий Chrome с 4 по 28 и версий Safari с 3.1 по 8;
- -ms-flex-wrap — свойство для IE 10.
CSS-свойство flex-wrap определяет, будет ли flex-контейнер расположен в одной строке или в нескольких. Wrap указывает на то, что flex-элементы внутри контейнера в случае переполнения располагаются в несколько горизонтальных рядов. Программист, создающий сайт, разумеется, хочет, чтоб так было во всех браузерах, поэтому использует вендорные префиксы.
2. CSS-hacks. Хаки — это части кода, которые может понять только какой-то конкретный браузер. То есть, если, к примеру, ваш сайт правильно отображается в четырех браузерах, а в остальных есть проблемы с корректностью интерпретации данных, то эту проблему можно решить, отдельно прописав соответствующие хаки для каждого браузера, в котором страницы отображаются неверно.
3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.
4. Универсальные элементы. Они одинаково качественно функционируют практически во всех популярных браузерах. Благодаря им исходный код ресурса не выглядит громоздким, а главное, соответствует требованиям браузеров.
На бесплатном онлайн-сервисе caniuse. com вы узнаете, какие теги поддерживаются той или иной версией браузера.
Самые популярные браузеры среди пользователей Рунета
По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.
Самые популярные браузеры среди пользователей Рунета
Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.
Самые популярные браузеры на мобильных устройствах
Подводя итоги, стоит сказать, что добиться абсолютно идентичного отображения сайта во всех браузерах практически невозможно. Поэтому главной целью должен быть не единый дизайн, а читабельность текста, привлекательность изображений, доступность всех важных элементов и корректная работа функционала.
LordGuard, используют даже 30-ю версию некоторые.
На тот же древний IE приходится ~10 процентов в среднем. Иногда доходит аж до 15 процентов.
SmthTo, это да, но хочется юзать те же flex элементы, а их поддержка даже в IE11 оставляет желать лучшего..
LordGuard, там весьма хорошая поддержка flexbox, надо знать особенности просто. Я все проекты делаю на flex'е. Никаких float'ов нигде и никогда.
LordGuard, по сути вся особенность Flexbox в IE11 — явная декларация тех свойств, что другие браузеры ставят автоматически. Можно это так назвать.
SmthTo, хм, если так, то это хорошо. Мне просто повезло с рабочим проектом в данном вопросе и поддержка IE не приоритетная задача.
LordGuard, там основная проблема — не CSS, а JS. Вот тут уже начинаются проблемы у IE11 серьёзные.
Всё на flexbox и вкрапления grid.
Дать однозначный ответ на данный вопрос невозможно. Всё зависит от проекта и его аудитории. К примеру, тот же VK поддерживает до сих пор IE8. Да, там работает только базовый функционал, но между тем. Или та же страница Google: она до сих пор работает на устройствах 20-летней давности с Netscape.
Актуальная версия где-то около 60-70
У вас установлены 10+ версий Хрома для тестов, и в каждой вы тестируете?
Или всё же тесты только в последней версии, но в коде учитываются некоторые особенности предыдущих?
Сергей delphinpro, нет, только указанные выше. У меня есть ноутбук, он специально для этого предназначен + проверка на хреновый экран. Ещё есть виртуальная машина с Chrome 60.
Делаю всё в последних версиях Chrome и Firefox, потом планомерно проверяю во всех этих браузерах. Просто сразу делаю с учётом знакомых мне проблем.
Вот какие в ТЗ написаны, с таких и начинайте )
В целом делается так: определяете целевую аудиторию.
Дальше анализ - в каких браузерах она сидит.
Дальше волевое решение - либо вкладываться в поддержку старых браузеров, либо экономить ресурсы на разработке, но при этом лишиться незначительной части пользователей.
Это должен сказать заказчик проекта.
Если это просто обновление сайта - то у вас есть данные со старого сайта. Посмотрите кто к вам приходит, на каких они браузерах.
У меня на разных проектах весьма и весьма по разному.
Проекты, где и IE8 требуется принципиально, несмотря на число пользователей с этим браузером около 0,7%. Но заказчику принципиально.
Есть проекты, где только свежие браузеры и это достаточно. Несмотря на то, что процент на старых браузерах около 7%, мы их все равно игнорируем.
Решать заказчику.
И, кстати, это изначально должно быть оговорено в задаче, так как влияет на трудоемкость.
Читайте также: