DETECT IE VERSION

Standard

JAVASCRIPT CODE
// get IE or EDGE browser version
var version = detectIE();

if (version === false) {
document.getElementById(‘result’).innerHTML = ‘IE/Edge‘;
} else if (version >= 12) {
document.getElementById(‘result’).innerHTML = ‘Edge ‘ + version;
} else {
document.getElementById(‘result’).innerHTML = ‘IE ‘ + version;
}

// add details to debug result
document.getElementById(‘details’).innerHTML = window.navigator.userAgent;

/**
* detect IE
* returns version of IE or false, if browser is not internet explorer
*/
function detectIE() {
var ua = window.navigator.userAgent;

// Test values; uncomment to check result …

// IE 10
// ua = ‘Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)’;

// IE 11
// ua = ‘Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko’;

// EDGE 12 (SPARTAN)
// ua = ‘Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0’;

// EDGE 13
// ua = ‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586’;

var msie = ua.indexOf(‘MSIE ‘);
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf(‘.’, msie)), 10);
}

var trident = ua.indexOf(‘Trident/’);
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf(‘rv:’);
return parseInt(ua.substring(rv + 3, ua.indexOf(‘.’, rv)), 10);
}

var edge = ua.indexOf(‘Edge/’);
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf(‘.’, edge)), 10);
}

// other browser
return false;
}

CSS CODE
@import url(https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans:300);

body {
color: black;
background-color: white;
font-family: “Fira Sans”, sans-serif;
font-weight: 300;
margin: 0;
padding: 3rem;
}

h1 {
color: darkgrey;
text-align: center;
font-weight: 300;
font-size: 1.5rem;
line-height: 2rem;
}

h2 {
text-align: center;
font-weight: 300;
font-size: 4rem;
}

p {
color: darkgrey;
text-align: center;
font-family: “Fira Mono”, monospace;
font-size: 1rem;
line-height: 1.5rem;
}

HTML CODE
< h1 > detect IE/EDGE version with JAVASCRIPT </ h1 >
< h2 id=”result” > detecting </ h2 >
< p id=”details” > n/a </ p >

CSS FONT PROPERTIES

Standard

body {
/* old browsers */
background: #141E30;
/* updated browsers */
background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
/* ie10/edge */
background: linear-gradient(-45deg, #35577D, #141E30);
margin: 0;
padding: 0;
}

h1 {
color: #FFF;
font-family: “Playfair Display”, serif;
font-size: 32px;
padding-top: 100px;
text-align: left;
text-transform: uppercase;
width: 60%;
}

h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
font-weight: 100;
font-family: Roboto, sans-serif;
font-size: 22px;
font-style: italic;
letter-spacing:0.02em;
line-height: 24px;
padding-bottom: 30px;
text-align: left;
width: 70%;
word-spacing: 0.05em;
}

p {
color: AliceBlue;
font-family: Roboto, sans-serif;
font-size: 20px;
font-weight: 100;
line-height: 1.7em;
text-align: left;
width: 100%;
}

.byline {
color: rgba(255, 255, 255, 0.5);
float: left;
font-family: ‘Roboto’, sans-serif;
font-weight: 100;

.caption {
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.65);
display: block;
font-family: ‘Playfair Display’, serif;
font-size: 14px;
font-style: italic;
line-height: 14px;
margin-left: 20px;
padding: 10px;
position: relative;
top: 80%;
width: 60%;
}

.content {
padding: 40px;
}

.image {
background-image: url(“#”);
background-size: cover;
background-position: center;
height: 300px;
}

.writer-img {
-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
float: left;
width: 50px;
}

HTML BUTTON ELEMENT

Standard

HTML button definition
< button type=”button” > I’m a button </button >

CSS code to define the button’s style
button{
width:200px;
height:35px;
background-color: transparent;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
background-image: url(“../images/button_bg.png”);
border:0;
}

CSS code to create a rollover effect (changement at mouse hover)
button:hover{
background-image: url(“../images/button_hover.png”);
}

CSS code to create an effect at the click
button:active{
background-image: url(“../images/button_active.png”);
}

button script creation
to show a message at the button click, use the onclick attribute with a little piece of javascript code (javascript in-line)

< button type=”button” onclick=”alert(‘hello’)” > I’m a button </button >

CSS USER AGENT

Standard

all major web browsers have a default stylesheet that can be used in the absence of an external stylesheet
these default stylesheets are known as user agent stylesheets: the term “user agent” is a technical term for the browser
user agent stylesheets often have default CSS rules that set default values for padding and margin: this affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page
many developers choose to reset these default values so that they can truly work with a clean slate:

* {
margin: 0;
padding: 0;
}