html and css 101 - hipages group friday talk
DESCRIPTION
hipages Group Front End Designer Adelaine Ho gave a Friday talk on CSS. hipages Group Friday talks are informal lunchtime presentations where members of our team share areas of expertise or passion with a cross functional group. Staff from all different departments attend to get an understanding of how other departments think.TRANSCRIPT
HTML and CSS- Introduction: What is HTML and CSS?- Examples and Specificity- Cross Browser Compatibility- Framework- More Technical Discussions
What is HTML?
0HTML0 “HyperText Markup Language”0Language for creating web pages0Composed of “tags”/elements0Should be structured, following a semantic flow
(understood by browser and developer)
Technical Jargon?!?0Tags (also known as elements) – has attributes, values
Semantic Elements vs Non-Semantic
0Non semantic elements (tells nothing about its content)• <div>, <span> etc
0Semantic elements (clearly defines its content)• <p>, <img> etc• <table>, <form> etc
HTML Examples0HTML
0 Combination of “tags” which should have a semantic flow0 Ordered, structured, hierarchical
HTML ExamplesCode<div class="media_block“ id=“wrapper”>
<img src="/images/128x128.gif" alt="pladceholder image" class="media” /><div class="media_desc">
<p class="important pbn mbn">I am a 'Media Block' :)</p><p class="pan man">Lorem ipsum dolor sit amet...</p>
</div></div>
Output
What is CSS?
0CSS “Cascading Style Sheets” (3 types)• Inline• Internal• External
Language to style and format of a document Combination of “rules” made of “declarations” and
“selectors”
Technical Jargon?!?0Rules• Made up of Declarations and Selectors
0Declaration• Made up of Properties and Values
CSS Examples0CSS• Combination of “rules”• Structured and grouped by “selectors”• Anything from color to font sizes to positioning
What is HTML and CSS?
CSS Syntax0 Element
img {border: none;}
0 ID#id_red {color: red;}
0 Class.class_blue {color: blue;}
0 Pseudoa:link {color: green;}tr:first-child {background-color: grey}
0 Override.class_pink {color: pink !important}
CSS Types0 Inline• Styles declared on each HTML tag• Loaded on each page load • Bad practice – not encouraged! (Nightmare… NOOOOOO!!)• Not resuable• Extremely poor performance
CSS Types0 Internal• Styles declared on page• Loaded on each page load – poor performance• Considered bad practice… BUT… (no black and white?)
only if you have to… A/B Testing?
CSS Types0External • Styles declared on separate file• Best practice• Cached by browser – faster performance• Could be more than 1 file, later combined and minified
(compressed and optimised)
CSS: Different Sources and Order of !importance
1. User agent – the browser’s default stylesheet2. User defined – user can define styles in their
browser3. Author – CSS on the site visited
(inline, internal, external)
There is this override rule called… !important
4. Author !important5. User !important
(A user might want a larger font or a different color, for example)
What is CSS Specificity?
0The beauty of CSS – “cascading”0Order, which rule takes priority? • “Who would win in a fight?
• How it is calculated? (Rules of Specificity)• Star Wars fan anyone?
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
CSS Specificity
0 !important is Superman – can beat anything – bad practice0 Inline styles – bad practice0 IDs 0 Location dependent0 Class0 When two selectors have the same specificity, the last one wins0 Misconception: the order of class makes no difference
A little test… who will win the fight?
http://adelaineho.public.hip/html_templates/presentation/specificity.html
Another test… who will win?
http://adelaineho.public.hip/html_templates/presentation/specificity2.html
Coding for Cross Browser Compatibility
Coding for Cross Browser Compatibility
0Famous IE6 Bugs• Misbehaving Floats• Double Margin on Floats • Staircase Effect• Centering Layout
Misbehaving Floats2 elements are floated with a parent wrapper around it.
The Fix0 Add overflow:hidden to parent
wrapper – works every time! {overflow:hidden} is
KING!!!
Expected:
IE output:
Double Margin on Floats
2 elements are floated with a parent wrapper around it.
The Fix0 Add overflow:hidden to parent
wrapper – works every time! {overflow:hidden} is
KING!!!
Expected:
IE output:
Large Scale Websites
0Want to reuse CSS as much as possible• Avoid re-inventing the wheel
0Performance is key0Consistency is hard to maintain0Specificity grows over time0Difficult to tell which rule takes precedence
Framework0Reusable elements and CSS (media blocks yaaaay!)0Think flexibility!• Separate layout/positioning with stylistic styles
0Multiple classes in the same tag/element is not a bad thing
0Avoid !important and location specific CSS0Should be easy to use• new developers join the team – as Craig likes to put it…
“adzvinci code” - #adzfail!0WAR against designers and front-end developers…
Developer: Do you promise every time we have this button on the site, it will be green with no border, grey text and bolded??
Designer: I promise!Developer: Can you put your life on it, it won’t change?Designer: Yes!Developer: OK
A few months later…Designer: Here’s the wireframe…
Developer: Doh!
Overview of our Current Framework
Components:0 960 grid • positioning and layout
0 Fonts• any fonts we wish to embed
0 Core• our own positioning/layout classes
(margin/padding/widths/heights)
0 Base Skin• stylistic elements which can be shared across all our apps
(HIP, NTP, PETs)0 Application Skin• stylistic elements specific to app (only HIP etc)
Pre-Framework Times
10034 lines
Current CSS Framework
833 lines
We’ll Go More Technical…0DEBATE: Balance between reusable CSS and clean
HTML – still something I am trying to figure out?!?! How many CSS classes in one element?
We’ll Go More Technical…
0DEBATE: What are good practices and bad practices?• IE Conditional statements?• Progressive Enhancement v.s Pixel Perfect Layout?• Location specific CSS• Best Practice?
http://www.maxdesign.com.au/articles/the-myth-of-best-practice/