Skip to content

Commit

Permalink
added more support for touch capable detection
Browse files Browse the repository at this point in the history
  • Loading branch information
@isocroft
isocroft committed Sep 13, 2017
1 parent 2b4ab02 commit 091f48b
Show file tree
Hide file tree
Showing 13 changed files with 3,985 additions and 69 deletions.
80 changes: 59 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
# Browsengine

This is a small library for detecting different browser engines in use all across the web. it works by processing
the information available from the browser engine and placing these in the <q>class</q> attribute of the &lt;body&gt; tag.
This is a small library for detecting different browser engines, their versions and the devices they run on as is used all across the web. it works by processing the information available from the browser engine and placing these in the <q>class</q> attribute of the &lt;body&gt; tag.

## Preamble

The JavaScript community has and will always deal with _browser quirks_ (mostly for CSS and JavaScript). These are the many anomalies that continue and will continue give rise to cross-browser issues (not because the specs from IEEE or W3C don't spell things out well). It's always going to be with us for a long time to come. Why ? because software (like browsers) is built by humans for humans and humans make mistakes and wrong judgement. Some quirks are usually atrributed to one browser at a given version (or a range of versions). Others are attributed to more than one. _Browser Sniffing_ using the **User-Agent** string (`navigator.userAgent`) used to be the way to go in the past to shim or workaround these anomalies. Browser sniffing had issues because the Javascript logic that was written for one version of a given browser could fail when a new version of that same browser was released. In recent times, we now have **Feature Detection** which is more (infact 95%) reliable than **Browser Sniffing**. That's why Javascript libraries like the famous [https://github.com/Modernizr/Modernizr](**Modernizr**) is used heavily on websites and web applications today.

## The Problem

**Feature detection** is a great leap forward and a more gratifying and productive shift from the old way of doing things using *Browser sniffing**. But sometimes, feature detection can give false positives for native browser features. More so, there are known issues with specific browser engine types (not necessarily specific to one browser vendor) e.g **Trident** (the rendering engine for IE and Avant) has a problem with `console.log()` calls whenever the dev tools isn't open in the browser. **Presto** (the rendering engine for old Opera up till version 14) on the other hand supports 2 APIs for registerig DOM events (`atttachEvent()` and `addEventListener()`). These issues cannot usually be dealt with in isolation (and it would be silly to do so).

## The Solution

This is where a new concept comes in. I call it **Engine Detection**. It's a concept that plays nice with **Feature detection** too. It compliments **Feature detection** whenever there are false positive reports by a browser (i.e. the browser says it supports something but there are bugs/quirks in the way it supports it). For example, Firefox supports `navigator.onLine`. So, feature detection will report a positive (albeit a false one in versions 4 to 41) for this feature. However, Firefox has [https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine](a well known quirk) with its support. In this case (with Firefox), we need a combination of _Feature_ and _Engine_ detection which will help in [https://codepen.io/isocroft/pen/OxLeBw](shimming) this quirk/weird behavior. When it comes to **Engine Detection**, we deal with the version number of the rendering engine (mostly) and not the version of the browser. Why ? Because, it makes more sense as the engine reveals itself even more in what it supports and doesn't support. For instance, Firefox (version 42) uses **Gecko version 6.42**. Similarly, old Opera (version 11.62) uses **Presto version 2.10.229**.

## Usage

Expand All @@ -10,12 +21,12 @@ the information available from the browser engine and placing these in the <q>cl
<html lang="en">
<head>
<meta charest="utf-8">
<title>Browsengine - TestDrvie</title>
<title>Browsengine - TestDrvie</title>

<script type="text/javascript" src="/path/to/Modernizr.js"></script>
<script type="text/javascript" src="/path/to/browsengine.js"></script>
</head>
<body class="page"> <!-- the class attribute of the {body} tag gets filled up after page load -->
<script type="text/javascript" src="/path/to/Modernizr.js"></script>
<script type="text/javascript" src="/path/to/browsengine.js"></script>
</head>
<body class="page"> <!-- the class attribute of the {body} tag gets filled up after page load -->

<script type="text/javascript">
Expand Down Expand Up @@ -65,39 +76,53 @@ After including the script to any page you choose (like above), it can be used o
---

```css

/* grouping styles based on engines */

body.yes-webkit div.top-row{ /* Webkits -> Safari, Chrome, Arora, WebOS browser */
display:-webkit-flex;
diaplay:flex;
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}

body.yes-moz a[data-intro-text]:before{ /* Geckos -> Firefox, WebSpirit, IceDragon */
content:"* \a0\a0\a0";
content:" :::";
position:absolute;
top:50%;
top:-5%;
}

/* Using the screen dimensions to style the page */

[class*='1024x600'] .docked-feedback-box,
[class*='1024x768'] .docked-feedback-box{
display:none;
display:inline-block;
transform:rotate(-90deg);
line-height:normal;
vertical-align:normal;
}

/* hide tooltips on mobile view only */
/* hide tooltips on tablet view only */

span.tooltip{
display:inline-block;
}

/* in opera-mini, make tooltips look a bit different */

body.operamini[aria-view-mode="mobile"] span.tooltip {
padding:5px;
display:table-cell;
vertical-align:middle; /* culled from Ire Aderinokuns' Code Pen */
}

[aria-view-mode="mobile"] span.tooltip{
[aria-view-mode="tablet"] span.tooltip{
display:none !important;
}

/* styles for tablet view only */

[aria-view-mode="tablet"] .col > img{
body[aria-view-mode="tablet"] .img-col > img{
margin-left: -25px;
margin-right: -25px;
}
Expand All @@ -109,18 +134,28 @@ After including the script to any page you choose (like above), it can be used o
---

```css

/* prevent double-tap zoom on touch devices (Desktop, Tablet and/or Mobile) */

body[aria-touch-capable="true"] .toggle-btn{
-ms-touch-action:none;
touch-action:none;
}


/* load a polyfill for emulating box-sizing behaviour in old-IE (in standards mode only) */

body[class*='standards IE6'] [class*='column-'],
body[class*='standards IE7'] [class*='column-']{
*behavior: url('./boxsizing.htc');
}

/* when browser is in quirks mode, we make the body 70% transparent */
/* when browser is in quirks mode, we make the body 70% transparent and disable all controls */
.quirks {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha(opacity=70)";
cursor:not-allowed;
}

/* used with Modernizr loaded - border radius */
Expand All @@ -129,15 +164,18 @@ body[class*='standards IE7'] [class*='column-']{
background-image:-moz-linear-gradient(top, #F5F5F5, #E4E4E4);
}

/* target all gecko browsers firefox,UC,Maxthone */
html .gecko .banner{
transform:rotate(30degs);
/* target all gecko browsers firefox, UC, Maxthone */
html .gecko .banner {
max-width:100%;
height:400px;
-moz-transition:all .7s linear;
background-size:cover;
}

/* target an edge browser for svg logo */
.svg .microsoftedge .logo{
/* target an edge browser for svg banner image */
.svg .microsoftedge .banner{
background-size:cover;
height:30px;
height:400px;
max-width:100%;
background-image:url('./assets/img/vectors/flakes.svg');
}
Expand All @@ -152,7 +190,7 @@ html .gecko .banner{
}

/* using SVG to emulate CSS3 gradients only for IE 9.0 */
.no-cssgradient.svg .IE9 .banner{
.no-cssgradient.svg .trident.IE9 .banner{
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyMDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0Y1RjVGNSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0U0RTRFNCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzIwNCkiIC8+Cjwvc3ZnPg==);
}

Expand Down
Loading

0 comments on commit 091f48b

Please sign in to comment.