User-agent

Options

It is possible to set additional options by passing an array as the second parameter when creating the object.


Disabling detection of bots

In some cases you may want to disable the detection of bots. This allows the bot the deliberately fool WhichBrowser, so you can pick up the identity of useragent what the bot tries to mimic. This is especially handy when you want to use WhichBrowser to switch between different variants of your website and want to make sure crawlers see the right variant of the website. For example, a bot that mimics a mobile device will see the mobile variant of you site.

$result = new WhichBrowser\Parser(getallheaders(), );

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome —> Дополнительный инструменты —> Инструменты разработчика

Прямо на ваших глазах я поменяю цвет заголовка h1 с черного на сиреневый. Разумеется, что эта замена произошла виртуально, только в вашем браузере. После обновления браузера, будет как раньше. Вот таким быстрым способом, можно не открывая фотошоп, подобрать цветовую гамму, затем скопировать прямо из веб-инспектора новый код и вставить в файл CSS стилей. Вопрос только в какой, если их там целая куча?

Давайте разбираться пошагово:

  1. Нажать на стрелочку
  2. Выделить заголовок на сайте
  3. На DOM дереве выделится h1
  4. В правой части появится в самом верху селектор h1 с атрибутом color #111;
  5. Правее h1 вы увидите файл style.css, при наведении на который, появится путь до него

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Вся правая часть вкладки Styles описывает только тег h1.

  • inherit from — история наследования
  • зачеркнутые строчки – переопределенные стили
  • injected stylesheet – внутренние стили внутри тега <style>
  • user agent stylesheet – дефолтные стили браузера

В Styles отображаются все изменения, которые происходили с тегом h1. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

Как видите все не так страшно, при правке чужого кода, вам в помощь веб-инспектор. А когда вы сами верстаете с нуля, вы же двигаетесь поэтапно и сразу видите результат.

  • Создано 08.02.2018 11:40:00
  • Михаил Русаков

Firefox UA string

Para mais cadeias de caracteres de agente de usuário do Firefox e Gecko, veja a referência para cadeias de caracteres de agente de usuário do Firefox (Firefox user agent string reference). A cadeia de caracteres UA do Firefox é quebrada em 4 componentes:

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion
  1. é o token geral que diz que o navegador é compatível com Mozilla. Por razões históricas, quase todo navegador envia isso hoje.
  2. platform descreve a plataforma nativa que navegador está executando (Windows, Mac, Linux, Android, etc.), e se é um telefone celular. Telefones Firefox OS simplesmente dizem — a web é a plataforma. Note que platform pode consistir de múltiplos tokens separador por  «»(ponto e vírgula). Veja abaixo para mais detalhes e exemplos.
  3. rv:geckoversion indica a versão de release do Gecko (como a «17.0»). Em navegadores recentes, geckoversion é o mesmo que firefoxversion.
  4. Gecko/geckotrail indica que o navegador é baseado no Gecko. (No Desktop, geckotrail é sempre a cadeia de caracteres fixa .)
  5. Firefox/firefoxversion indica que o navegador é o Firefox, e provém a versão (como a «17.0»).

Exemplos

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0

Notes

  • All browsers on iOS (Chrome, Firefox etc) use Safari’s WebKit as the underlying engine, and hence will be resolved to Safari. Since is usually used for transpiling / autoprefixing for browsers, this behaviour is what’s intended in most cases, but might surprise you otherwise.

  • Right now, Chrome for Android and Firefox for Android are resolved to their desktop equivalents. The database does not currently store historical data for these browsers separately (except the last version) See #156. However, safari for iOS and desktop can be matched separately, since this data is available for both.

Do we really need to neuter the JavaScript interface too?

An excellent question! This proposal assumes that developers with access to JavaScript execution do not need the user agent string in order to determine which resources to load and how they ought to behave. They can examine other parts of the exposed API surface (, for example). Developers who need this kind of information at request-time could probably migrate to alternative mechanisms like Client Hints.

Our goal should eventually be to ratchet down on some of this granularity as well, and my intuition is that we’ll be able to do that more cleanly if we adjust the UA string in one fell swoop, and then move on to the rest rather than doubling back at some point in the future.

Firefox UA string

For more on Firefox- and Gecko-based user agent strings, see the Firefox user agent string reference. The UA string of Firefox is broken down into 4 components:

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion
  1. is the general token that says the browser is Mozilla-compatible. For historical reasons, almost every browser today sends it.
  2. platform describes the native platform the browser is running on (Windows, Mac, Linux, Android, etc.), and if it’s a mobile phone. Firefox OS phones simply say — the web is the platform. Note that platform can consist of multiple «»-separated tokens. See below for further details and examples.
  3. rv:geckoversion indicates the release version of Gecko (such as «17.0»). In recent browsers, geckoversion is the same as firefoxversion.
  4. Gecko/geckotrail indicates that the browser is based on Gecko. (On Desktop, geckotrail is always the fixed string .)
  5. Firefox/firefoxversion indicates the browser is Firefox, and provides the version (such as «17.0»).

Examples

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0

Compatibilidade de navegador

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Browser Information:

JavaScript Enabled: No
Cookies Enabled: No
Device Pixel Ratio: N/A
Screen Resolution: N/A
Browser Window Size: N/A
Local Time: N/A
Time Zone: N/A

User agents are unique to every visitor on the web. They reveal a catalog of technical data about the device and software that the visitor is using. Armed with this information, you can develop richer and more dynamic websites that deliver different experiences based on the user agent that’s visiting.

User agents are also critical in controlling search engine robots using the robots.txt file on your server. But they don’t function perfectly in every situation, and the information in a user agent string can be faked.


In order to leverage this information, you need to understand the component parts of a user agent string and consider also the potential risks of using this method to deliver content.

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

  1. таблицы стилей самого браузера
  2. внешний css файл, подключаемый к странице через <link>
  3. таблицы стилей написанные на самой странице между тегами <style>..</style>
  4. таблицы стилей внутри атрибута style=»…»
  5. самый высокий приоритет у стилей с пометкой на конце important!

Независимо от количества страниц, всегда надо стили выносить в отдельный файл, который будет применятся ко всем страницам, пока его не перебьет новый стиль, записанный внутри страницы между тегами <style>..</style>, ближайший к стилизуемому тегу.

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Это была теория, на практике же все выглядит куда понятнее. Очень часто верстальщику приходится разбираться в чужом коде. Например стоит такая задача – изменить цветовую гамму страницы или всего сайта. Если этот условный сайт сверстан вручную и достаточно грамотно, то найти какие из стилей применены к тому или иному тегу, легко. Просто следуя тем существующим правилам приоритета и наследования. Смотрите какие стили на странице расположены ниже или специфичнее (#id против .class) и совсем уже явно – это !important, те и будут главнее.

Сущий ад начинается, если сайт работает например на WordPress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Should the UA string really be a set?

Yes!

History has shown us that there are real incentives for user agents to lie about their branding in order to thread the needle of sites’ sniffing scripts, and prevent their users from being blocked by UA-based allow/block lists.

Reseting expectations may help to prevent abuse of the UA string’s brand in the short term, but probably won’t help in the long run.

Having be a set enables browsers to express their brand, as well as their different equivalence sets. We hope that this enabled expressiveness will enable sites to differentially serve based on capabilities while minimizing wrongfully categorizing browsers in the wrong buckets.

Let’s examine a few examples:

  • In order to avoid sites from barring unknown browsers from their allow lists, Chrome 73 could send a UA set that includes an non-existent browser, and which varies once in a while.
  • In order to enable equivalence classes based on Chromium versions, Chrome could add the rendering engine and its version to that.
  • In order to encourage sites to rely on equivalence classes based on Chromium versions rather than exact UA sniffing, Chrome might remove itself from the set entirely.
  • Browsers based on Chromium may use a similar UA string, but use their own brand as part of the set, enabling sites to count them.

We’d reflect this value in the attribute, which returns an array of dictionaries containing brand and version.

User login notification

Many sites, especially security sensitive ones, like to notify their users when log-in from a new device happens. That enables users to be aware of those logins, and take action in case it’s not a login that’s done by them or on their behalf.

For those notifications to be meaningful, sites need to recognize and communicate the commercial brand of the browser to the user. These messages often also include the platform and its version in order to make sure the user knows which device is in question.

Since such messaging doesn’t require any server-side adaptation, it’s better for this case to use the method in order to retrieve the required information.

Usage

const { matchesUA } = require('browserslist-useragent')

matchesUA(userAgentString, options)

// with browserslist config inferred
matchesUA('Mozilla/5.0 (Windows NT 10.0; rv:54.0) Gecko/20100101 Firefox/54.0')
//returns boolean

// with explicit browserslist
matchesUA('Mozilla/5.0 (Windows NT 10.0; rv:54.0) Gecko/20100101 Firefox/54.0', { browsers: 'Firefox > 53'})
// returns true
Option Default Value Description
browsers Manually provide a browserslist query (or an array of queries). Specifying this overrides the browserslist configuration specified in your project.
env When multiple browserslist are specified, pick the config belonging to this environment.
path Specify a folder to search for the browserslist config (if it differs from the current working directory)
ignorePatch Ignore differences in patch browser numbers
ignoreMinor Ignore differences in minor browser versions
allowHigherVersions For all the browsers in the browserslist query, return a match if the user agent version is equal to or higher than the one specified in browserslist. See this might be useful.

Типы CSS Reset (скачать можно по ссылкам в статье)

Начиная с далекого 2004, когда появились первые подобные наработки, сейчас есть достаточно много методов, отличающихся по сложности и своей специфике. По сути, существует 3 цели, которые пытается решить сброс стилей CSS:

  1. Исправление ошибок в user agent stylesheet.
  2. Отмена нестандартного оригинального оформления в интернет-браузерах.
  3. Создание универсальной совместимой базы стилей.

Есть варианты, решающие все три задачи и те, которые заточены только под одну конкретную проблему.

Коррекция/исправление ошибок

Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления HTML5 тот же Internet Explorer 9 не применил корректный тип display к новым объектам.

Поэтому в решениях по типу Normalize.css все ошибки учтены и обработаны:

/**
 * Add the correct display in IE.
 */
main {
  display block;
}

Поскольку эти действия нужны только для старого софта, есть смысл использовать постпроцессор PostCSS такой как PostCSS Normalize совместно с Browserlist дабы добавлять их только, когда вам требуется реализовать поддержку определенных браузеров.

Другой пример кода от Pure CSS, который подходит в том числе и к современным веб-программам — исправление display элементов и атрибутом hidden.

hidden {
    display none !important; // One of the good use cases of !important
}

Убираем своеобразные стили браузеров

Это вторая причина сброса настроек CSS. В принципе, у каждого свое мнение относительно того какое оформление в user-agent stylesheet считать «своеобразным». Определение автора оригинальной заметки достаточно логичное: это такой стиль, который не является «голой» версией отображения элемента. Например, добавление отступов для заголовков в 2em (как это делают многие), идея не плохая, но почему именно 2em, а не 3em или не 4em. В таком случае базовым вариантом было бы отсутствие какого-либо отступа, то есть нулевой margin.


Самый простой универсальный подход, удаляющий отступы/поля тегов:

* {
    margin ;
    padding ;
}

Данный метод слишком радикальный, т.к. применяется ко всем объектам, даже тем, где вы не ожидаете (в том же input). В качестве альтернативы чаще используется Eric Meyer Reset CSS, который убирает параметры margin/padding, границы и размер шрифта (в 0 или none) там, где это логически оправдано:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin ;
	padding ;
	border ;
	font-size 100%;
	font inherit;
	vertical-align baseline;
}

Переопределение стилей

В отличии от предыдущего раздела, здесь основная задача не обнуление CSS у тех или иных объектов, а переопределение их собственными актуальными значениями.

Например, вместо установки всем шрифтам размера 1em и margins = 0 в Sanitize.css задаются другие величины:

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 
h1 {
  font-size 2em;
  margin 0.67em ;
}

В Bootstrap’s Reboot найдете еще одну иллюстрацию текущей задачи. Разработчики пошли чуть дальше и прописали шрифты и цвет фона для body.

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
//    the `inherit` value on things like `<th>` elements.
 
body {
  margin ; // 1
  font-family $font-family-base;
  font-size $font-size-base;
  font-weight $font-weight-base;
  line-height $line-height-base;
  color $body-color;
  text-align left; // 3
  background-color $body-bg; // 2
}

О наследовании в CSS

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h1 зададим другие значения цвета и шрифта, в таком случае тег h1 уже не потомок body.

Здесь надо уточнить, что по наследству передаются главным образом цвет фона и все шрифтовые атрибуты. Нельзя унаследовать атрибуты ссылок, размеры отступов, полей, блоков.

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Cadena del Agente de usuario de Firefox

Para más detalles del Agente de usuario basado en cadenas de texto en Firefox y Gecko , lea Firefox user agent string reference. La cadena de agente de usuario de Firefox esta dividida en 4 componentes.

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

  • Mozilla/5.0  es el token general que indica que el navegador es compatible con Mozilla, es el más común en la mayoría de los navegadores actuales.
  • is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.
  • platform  describe la plataforma nativa en la que el navegador se ejecuta (ejemplo. Windows, Mac, Linux o Android), y si es o no  un telefono móvil. La version de Sistema Operativo de Firefox (Firefox OS) dice simplemente «Mobile»; la web es la plataforma. Observe que la plataforma puede estar formada de varios «;» tokens separados. Vea  los ejemplos de abajo.
  • rv:geckoversion indica la version  de Gecko(por ejemplo «17.0»). En los navegadores más recientes la version de gecko es la misma que la versión de firefox
  • Gecko/geckotrail indica que el navegador esta basado en Gecko.
  • En escritorio geckotrail tiene la siguiente string fija «20100101»
  • Firefox/firefoxversion indica que el navegador es Firefox, y muestra la versión (por ejemplo «17.0»).

Ejemplo

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0

User-Agents and Robots.txt

The robots.txt file is a file on your web server that controls how some user agents behave. In the majority of cases, we use robots.txt to tell search engine crawlers — or “robots” — what to do.

As we mentioned in the introduction, search engine crawlers are a very specific type of user agent. The information in the robots.txt file applies only to crawlers, and it’s up to the crawlers to interpret them as we intend.

Let’s look at some examples.

How To Ban or Permit Crawlers with Robots.txt


To ban all crawlers from visiting a website, we’d create a text file called robots.txt, place it in the top-level (web-accessible) directory on our server, and add the following text:

To allow all crawlers permission, we would add the following text to our robots.txt file:

You can also ban and permit specific crawlers and restrict or allow access to specific folders.

A Problem

User agents identify themselves to servers as part of each HTTP request via the header. This header’s value has grown in both length and complexity over the years; a complicated dance between server-side sniffing to provide the right experience for the right devices on the one hand, and client-side spoofing in order to bypass incorrect or inconvenient sniffing on the other. Chrome on iOS, for instance, currently identifies itself as:

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1

While Chrome on Android sends something more like:

User-Agent: Mozilla/5.0 (Linux; Android 9; Pixel 2 XL Build/PPP3.180510.008) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Mobile Safari/537.36

Challenges

From a developer’s standpoint, the detail available in the UA string is valuable, and they reasonably object to dropping it. The feedback to Safari’s UA string freeze was right along these lines, noting four broad categories of use:

  1. Brand and version information (e.g. «Chrome 69») allows websites to work around known bugs in specific releases that aren’t otherwise detectable. For example, implementations of Content Security Policy have varied wildly between vendors, and it’s difficult to know what policy to send in an HTTP response without knowing what browser is responsible for its parsing and execution.

  2. Similarly to #1, OS revisions and architecture can be responsible for specific bugs which can be worked around in website’s code, and narrowly useful for things like selecting appropriate executables for download (32 vs 64 bit, ARM vs Intel, etc). Model information is likewise useful when bugs are limited to particular kinds of devices.

These are use cases that are interesting for us to support. Browsers certainly have bugs, and developers certainly would be well-served by being able to work around them. We’ll keep these challenges in mind with the proposal that follows.

Frequently Asked Questions

You may still have some queries about user agents, what they are, and how they work. Here are some questions and answers to get you started.

What is user agent in a HTTP request?

A user agent is a particular string of characters in each browser that allows acts as an identification agent. The user agent allows the web-server ti to identify the operating system and the browser. Then, the web server uses the exchanged information to determine what content is presented to particular operating systems and web browsers on a series of devices.

What is in a user agent string?

The user agent string contains the user application or software, the operating system (and their versions), the web client, the web client’s version, and the engine responsible for the content display (such as AppleWebKit). The user agent string is sent in form of a HTTP request header.

What is user agent detection?

User agent detection is the process of acknowledging and analyzing the user-agent string to acquaint with the string’s properties. User agent detection can be useful for websites to optimize and target various browser features as opposed to specific browser types.

What is user agent spoofing?

User agent spoofing is a term used to describe an instance where a web browser’s user agent’s contents allow the web browser to pose and identify as another browser. Since websites often check the browser type when presenting content to users, user agent spoofing is beneficial for many web browsers in terms of compatibility.

Итого. Что же выбрать

В оригинальной заметке есть результат соответствующего опроса из твиттера среди фолловеров — какие решения по данной теме они используют чаще всего.

В итоге победил Normalize.css, который комбинирует корректировку разных ошибок веб-браузеров с заданием базовых совместимых правил. Также многие респонденты сказали, что используют собственные наработки.

Что касается мнения автора статьи (Ire Aderinokun, фронтенд и UX девелопер), то она предпочитает скачать Reset CSS Эрика Мейера и немного модифицировать его под себя. Причины тут две:

  • во-первых, удобно работать с максимально пустым списком директив, постепенно добавляя свои собственные;
  • во-вторых, она сторонник задания отступов в одном направлении (вниз), в то время как многие ресеты не следуют этому принципу.

P.S. Что касается меня, то во многих шаблонах я чаще всего сталкивался с решением от Normalize.css. Если вы работаете с Bootstrap, то, как понимаю, ничего дополнительно придумывать не придется, там есть свой файл сброса стилей CSS. Если честно, не особо часто приходится верстать с нуля но для общего развития мне было интересно об этом почитать. Надеюсь, вам тоже;)


С этим читают