Здравствуйте, дамы и господа, в этой статье хочу простыми словами рассказать о том, что такое браузер, а также о том, какими он видит сайты. В этой статье я объясню про HTML, а также о том, почему на разных браузерах сайты могут выглядеть по-разному. Итак, давайте начнём!
Браузеры: что это такое
Браузер — программное обеспечение, предназначенное для просмотра веб-страниц и других веб-документов. Современные браузеры могут отображать в том числе и документы, например, pdf, docx, изображения, проигрывать аудио и видеофайлы. Учтите, текстовые документы, например, тот же docx, умеют читать далеко не все браузеры.
Наиболее популярные браузеры сейчас:
Google Chrome;
Firefox;
Apple Safari;
Microsoft Edge;
Opera.
Многие браузеры, даже если названия разные, могут работать на одном движке. Например, Opera, Edge, Google Chrome работают на движке Chromium. Движок — основа, то бишь специальный набор кода, необходимый для исполнения каких-либо задач.
Движок можно рассматривать как библиотеку. То есть движок один, но с помощью него могут выполнять разные задачи. Так что один и тот же движок не делает сами браузеры одинаковыми.
Скажем так, это фундамент. А на нём уже можно строить как хороший кирпичный дом, а можно и из фанеры и пеноблоков поделку поставить.
Например, Safari. На тех же Iphone браузеры могут быть разными, но движок у них один — Safari.
Браузеры предназначены в первую очередь для просмотра веб-страниц. То есть страниц сайтов. Открывая сайт, мы можем читать, просматривать документ, сохранить его на ПК или смартфон. И даже динамических взаимодействовать.
Достигается это рядом технологий, о которых сейчас поведаю.
Как браузер работает с сайтами
Итак, есть у нас условный сайт. Сейчас вы видите страницу, на которой есть текст, изображения, видео. Но браузер на ваши страницы смотрит совсем иначе.
Например, если мы откроем исходный код страницы, то увидим следующее:
Итак, что же мы видим в DevTools? Сейчас объясню.
Технологии веб-страниц
Браузер научен видеть следующее:
HTML;
CSS;
XML;
документы.
Но даже если мы откроем какой-нибудь документ, например, в формате .txt, то браузер всё равно попытается его разметить как HTML-документ.
Итак, давайте внимательнее посмотрим на то, как видит нашу страницу браузер.
Как правило, макет будет выглядеть так:
Это набор из html-тегов, метатегов, разнообразных скриптов и CSS. Итак, HTML нам нужен для разметки страницы, не просто так его называют языком гипертекстовой разметки.
С помощью HTML мы задаём, где и что будет находиться:
блоки;
абзацы;
таблицы;
маркированные и нумерованные списки.
И ещё куча вещей. В пределах данной статьи разбирать нет смысла, ибо есть разнообразные теги для хранения информации, например, meta. Есть для определения кодировки. Есть для обозначения абзаца, а есть для выделения отдельного символа в пределах абзаца, например, тег span.
CSS нам нужен для стиля страницы. Например, чистый HTML будет выглядеть так. Но CSS позволяет нам задать шрифты, цвета текста, размеры, внешний вид отдельных блоков. В общем, развлекаться можно как угодно.
С помощью CSS мы можем придать страницам презентабельный и приятный вид. Фактически это язык, предназначенный для описания внешнего вида веб-страницы. Так что без него тоже обойтись проблематично.
Но на страницах же ещё происходят динамические события. Например, слайдер товаров, который вы можете пролистывать.
Такое обеспечивается с помощью JavaScript. Это уже полноценный язык программирования, на котором, кстати, можно не только писать сценарии для придания интерактивности веб-страницам и приложениям, но и для многих других вещей.
Да, на JS можно решать и некоторые задачи, не связанные с Web, но для этого есть более эффективные языки программирования, так что JavaScript чаще применяется для таких вещей, как создание анимаций в веб-страницах и веб-приложениях, создание интерактивных событий, например, всплывающих окон, а также предоставления данных о работе страницы. Например, отчёт о событии, таймеры и прочее.
Многое из того, что раньше можно было решить только с помощью JS, сейчас можно решить посредством CSS последних версий. Например, подчёркивание или изменение цвета текста или кнопки при наведении курсора раньше без JavaScript реализовать было нельзя.
Также есть и другие технологии, которые позволяют реализовать тот функционал, который недоступен посредством HTML и CSS. Например, AJAX (асинхронный JavaScript и XML), который позволяет получать и обновлять данные без перезагрузки страницы.
Используется AJAX в много где. Например, обновление количества лайков, бесконечные ленты новостей и т. п.
Раньше для того, чтобы изменения отобразились на странице, нужно было её перезагрузить, благодаря AJAX необходимость перезагрузки страницы отпала.
Ну и сам XML, который является расширяемым языком разметки. Его отличие в том, что он не является определённым. Соответственно, вы можете его назначение определять за счёт существующих методов, например, XHTML либо назначить свои.
Например, если вам нужно описать что-либо или вывести RSS-ленту, то XML нам пригодится. Банальная лента Яндекс Турбо:
XML нам нужен для того, чтобы подружить разные форматы отображения. Например, если в ленте новостей стороннего сайта ваши данные отображаются в одном формате, а на сайте в другом, то XML может стать средством для унифицирования обмена данными.
На самом деле у браузеров ещё много возможностей, я написал только основные.
Дополнительные возможности браузеров
Раньше браузеры служили только для отображения веб-страниц и для большего, чем простой сёрфинг сайтов, не годились. Максимум, на что можно было рассчитывать — комментарий на форуме.
Сейчас же браузер — средство полноценного обмена данными. Вы можете общаться с друзьями, запускать стримы, писать комментарии, записывать голосовые сообщения, рисовать. Вариантов масса.
Браузер стал универсальным инструментом. Да, не всегда самым удобным, но универсальным. Зачастую браузер может поддерживать множество языков и функций. Если и не на базовом уровне, то есть тысячи расширений, установка которых позволит значительно расширить функционал.
Например, видел расширения, которые позволяли мне полноценно пользоваться графическим планшетом прямо в браузере.
Конечно, это не основные функции веб-браузеров, но сейчас браузер нечто большее, чем просто средство для просмотра сайтов в интернете.
Почему сайты могут выглядеть не одинаково в разных браузерах
Как я уже писал выше: браузер — средство для просмотра веб-страниц, а веб-страницы в основном базируются на HTML, CSS, а за интерактивность отвечает какой-нибудь JavaScript.
Вот у нас есть div, p (блоки и абзацы). Но формат блоков и абзацев каждый браузер может задавать самостоятельно. Есть, конечно, организации вроде W3C, которые внедряют технологические стандарты для Всемирной паутины. Но это носит рекомендательный характер, соответственно, не все слушают рекомендации.
И если один и тот же сайт в Chromium, Яндекс Браузер или Edge будет выглядеть практически идентично, то в каком-нибудь UC Browser или Coowon внешний вид может отличаться.
Так что внешний вид сайтов на совести разработчиков браузера. Некоторые могут на базовом уровне урезать стили (CSS) или JavaScript. Большинство браузеров сейчас работает по единым стандартам, но если встретите «уникум», то не удивляйтесь. Ситуация «я разработчик, я так вижу» встречается часто.
Браузер просто и не очень просто одновременно
Объяснить простыми словами? Браузер, средство просмотра веб-страниц, который умеет интерпретировать языки разметки и стилей, а потом отображать их.
Но если заглянуть глубже, то всплывает куча непонятных технологий, которые уже простыми словами не объяснить. Но я постарался сделать это как можно проще.
На этом с вами прощаюсь и желаю успехов!
