Browsers behaviours and tricks

@garetherioth

MedellĂ­n, May 5, 2016

What understands a browser?

HTML

https://www.w3.org/TR/html5/

(HyperText Markup Language)

https://html.spec.whatwg.org/

http://html5doctor.com/

http://learn.shayhowe.com/advanced-html-css/semantics-accessibility/

HTML DOCTYPE

http://www.w3schools.com/tags/tag_doctype.asp

<!doctype html>
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5

HTML 4.01 Strict

What really is HTML5?

It is not the upgrade from HTML4; but, it is a whole set of new technologies.

https://www.w3.org/html/logo/

HTML APIs

  • https://html5test.com/
  • https://html5.org/
  • https://html5boilerplate.com/
  • http://diveinto.html5doctor.com/
  • https://platform.html5.org/
  • https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
  • https://www.w3.org/html/logo/

Interesting links

CSS

(Cascading Style Sheets)

https://www.w3.org/TR/CSS/

https://necolas.github.io/normalize.css/

http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

PX, EM and REM

  • https://j.eremy.net/confused-about-rem-and-em/
  • http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
  • https://css-tricks.com/rems-ems/
  • https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/
  • http://css3test.com/
  • https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/
  • https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

Interesting links

JavaScript

http://www.ecma-international.org/ecma-262/6.0/

https://kangax.github.io/compat-table/es6/

https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)

Can I use?

http://caniuse.com/

Developer Tools

http://discover-devtools.codeschool.com/

https://developer.chrome.com/devtools

https://addons.mozilla.org/en-us/firefox/addon/empty-cache-button/

https://addons.mozilla.org/en-US/firefox/addon/user-agent-overrider/

https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Why the browsers renders different?

Web browsers engines

https://en.wikipedia.org/wiki/Web_browser_engine

JavaScript engines

https://en.wikipedia.org/wiki/JavaScript_engine

Bonus

Browers and devices support

  • http://www.w3schools.com/browsers/browsers_stats.asp
  • http://developer.android.com/intl/es/about/dashboards/index.html
  • https://developer.apple.com/support/app-store/
  • https://www.codecademy.com/learn/make-a-website
  • https://www.codecademy.com/skills/make-an-interactive-website
  • https://www.codecademy.com/learn/web
  • https://www.codecademy.com/learn/javascript

Make a website!

Browsers behaviours

By Guillermo Rodas

Browsers behaviours

Browers behaviours and tricks for the QA team

  • 496