Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3 and Responsive Web Design - Web Technologies (1019888BNR)

659 views

Published on

This lecture is part of a Web Technologies course given at the Vrije Universiteit Brussel.

Published in: Education
  • Be the first to comment

CSS3 and Responsive Web Design - Web Technologies (1019888BNR)

  1. 1. 2 December 2005 Web Technologies CSS3 and Responsive Web Design Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 28, 2016 Cascading Style Sheets (CSS)  Separation of presentation and content  visualisation of HTML elements defined by styles  enables multiple presentations of the same content  media-specific style sheets via the media attribute <html> <head> ... <link ref="stylesheet" type="text/css" href="default.css" media="screen, tv" /> <link rel="stylesheet" type="text/css" href="alternative.css" media="print, handheld" /> </head> <body> ... </body> </html>
  3. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 28, 2016 CSS Versions  CSS1 specification published in 1996  remember that HTML 3.2 introduced some elements and attributes (e.g. color) for the visual appearance in 1997  CSS2 specification published in 1998  superset of CSS1  functionality for relative, absolute and fixed positoning of elements  media types  CSS3 divided into separate modules (documents)  2D & 3D transforms  transitions  Flexbox  media queries  ...
  4. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 28, 2016 CSS Versions Sergey Mavrody, 2014
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 28, 2016 CSS Syntax  CSS rule consists of two parts  a selector - HTML element  a declaration block (at least one property and value) - surrounded by curly braces - multiple properties are separated with a semicolon  Example selector { property1: value1; property2: value2; } h1 { color: red; font-size: 10px; }
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 28, 2016 Selectors  Selectors are used to target rules to specific elements in an HTML document (case sensitive)  Universal selector  all elements in the document  Element/Type selector  specific element names  ID selector  element with a specific value for the id attribute * { ... } p { ... } h1, h2, h3 { ... } /* also called grouping selector */ #intro { ... } /* always more weight than class selector */
  7. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 28, 2016 Selectors …  Class selector  elements with the given class attribute value (elements can have more than one class)  Child selector  elements that are direct children of other elements  Descendant selector  elements that are descendants of other elements .main { ... } /* any element with a 'main' class value' */ h1.main { ... } p>a { ... } p a { ... }
  8. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 28, 2016 Selectors …  Attribute selector  elements with a given attribute value  Pseudo element selectors  treated like extra elements  Pseudo class selector  act like additional values for a class attribute p[type] { ... } /* p element with an attribute called type (existence) */ p[type="new"] { ... } /* p element with attribute value 'new' (equality) */ p[type^="n"] { ... } /* type attribute value starts with letter 'n' */ p[type*="do"] { ... } /* type attribute contains substring 'do' */ h1.main:first-letter { ... } a:link { ... } a:visited { ... } a:hover { ... }
  9. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 28, 2016 Rule Order  For identical selectors, the last rule will be applied  Furthermore, we have the following internal priorities (1) rules containing IDs (2) rules containing classes (or pseudo classes) and attributes (3) rules containing elements (or pseudo elements)  Rules for selectors that are more specific than the others have preference * { color: red; } p b { color: pink; } /* more specific than p selector */ p { color: blue; } p { color: green; } /* last rule for p selector */
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 28, 2016 Inheritance  Some properties such a color or font-family are inherited by most child elements  leads to simpler style sheets  The inheritance of properties can be enforced via the inherit keyword body { color: red; /* inherited by child elements */ padding: 10px; /* normally not inherited */ } p { padding: inherit; /* explicitly inherited from parent element */ }
  11. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 28, 2016 CSS Inclusion  There are three ways how CSS can be included in HTML  inline style  internal style sheet  external style sheet  Inline style  defined via the style attribute of the corresponding HTML element  still mixes content and presentation and should therefore be avoided whenever possible <h1 style="color:red; font-size:10px">Urgent Tasks</h1>
  12. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 28, 2016 CSS Inclusion ...  Internal style sheet  used when a single document has a unique style  defined in the <head> section  e.g. used in HTML-encoded emails <html> <head> ... <style> h1 {color: red; font-size: 10px;} p {color: blue;} ... </style> </head> <body> ... </body> </html>
  13. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 28, 2016 CSS Inclusion ...  External style sheet (in *.css file)  changes to the overall appearance of an entire website can be managed in a single file - removes a lot of potential redundancy - saves a lot of time - leads to more consistent websites <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> ... </body> </html>
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 28, 2016 Multiple Style Sheets (Cascading)  Multiple styles will cascade into a single one  properties/values are inherited from more specific style sheets  Overriding priorities (1) inline style (highest priority) (2) internal style sheet (3) external style sheet (4) default browser style  Note that if the link to the external style sheet in the <head> section is placed after the internal style sheet, then the external style sheet will override the internal one  A stylesheet can import other stylesheets via @import
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 28, 2016 Box Model  Box that wraps every single HTML element (content)  by default the box is just big enough to keep its content  padding - transparent area around the content  border - around the padding  margin - transparent area around the border margin padding border content div { width: 300px; /* only content area */ padding: 10px; border: 10px red; margin: 5px; }
  16. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 28, 2016 Box Model …  By default the width of a box only defines the width of the content  padding and border are added to that width  Behaviour can be changed via the box-sizing property  content-box (default) or border-box  width in border-box "mode" includes padding and border width * { box-sizing: border-box; /* use border-box for the whole page */ }
  17. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 28, 2016 Box Model …  Boxes can be either block-level boxes or inline boxes  block-level boxes start on a new line - main building blocks of any layout - e.g. <p>, <h1>, <ul>, or <li>  inline boxes flow between sourrounding text - e.g. <b>, <i> or <img>  Block-level boxes (elements) can be grouped  e.g. number of elements grouped via <div> in a containing or parent element  Behaviour can be changed via display property li { display: inline; /* no longer treated as block-level element */ margin-right: 5px; /* list items shown next to each other with space */ }
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 28, 2016 Box Model …  CSS3 further introduces a new Flexbox layout mode  new flex and inline-flex values for the display property
  19. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 28, 2016 Measurements  Absolute or relative units of measurements can be used  Absolute units  px: pixels are not necessary consistent across devices  cm, mm and in: one centimeter is 37.8 pixels, a milimeter 3.78 pixels and an inch 96 pixels (also not consistent across devices)  pt: a point is equal to 1/72 of an inch (common in print design)  Relative units  %: percentage measured against the content  em: ems are relative to the font size of the element  rem: rems are relative to the font size of the document
  20. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 28, 2016 Layout  Elements (boxes) can be positioned via the position property  static (default), relative, absolute or fixed position  In normal flow (static) each block-level element starts on a new line p { position: static; /* optional since it is the default anyway */ width: 400px; }
  21. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 28, 2016 Layout …  Relative positioning moves the element in relation to where it would have been shown  Absolute position takes box out of the normal flow p.test { position: relative; width: 400px; left: 100px; /* move 100 pixels to the right */ top: 20px; /* move 20 pixels down */ } p.test { position: absolute; width: 200px; left: 300px; /* position the element 300 pixels from the left */ top: 0px; /* position element at the top (of the containing element) */ }
  22. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 28, 2016 Layout …  Fixed positioning renders an element relative to the browser window  scrolling no longer changes the position  Boxes with a relative, absolute or fixed position might overlap  z-index property can be used to control the ordering (higher values are closer to the front) p.test { position: fixed; width: 400px; right: 0px; top: 0px; /* positions the paragraph at the top right corner */ }
  23. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 28, 2016 Floats  Elements can also be positioned via the float property  succeeding elements will flow around the element  floating can be stopped via the clear property <p>...</p> <img class="floatLeft" src="logo.jpg" alt="logo"> <p>...</p> <h2 class="clearLeft">History</h2> floatLeft { float: left; } clearLeft { clear: left; }
  24. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 28, 2016 Responsive Web Design (RWD)  Websites originally designed with a fixed size to fit common desktop and laptop screen sizes  e.g. 960-pixel-wide layout  Around 2007 mobile phones able to render standard HTML pages  dedicated mobile version of website (e.g. 320-pixel-wide) - redirection to m-dot websites
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 28, 2016 Responsive Web Design (RWD) …  Problem of maintainability as more versions added  different phone display sizes and new devices (e.g. iPad)  Design websites that can easily be viewed on devices with various screen sizes  Only one version of the website (one HTML structure)  design rearranges itself to perfectly fit the screen size - e.g. single column on mobile device and multiple columns on wider desktop screens  use different CSS styles based on media queries  only since CSS3 it is possible to query features such as the screen width and height or the colour capabilities  flexibility via relative horizontal measurements (e.g. percentage)  should automatically look decent on future devices
  26. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 28, 2016 Content Strategy  Think about the content before thinking about the design of a website  address user needs  Most important information should be at the top of a page  Divide content into chunks that can be rearranged on a page  All users (regardless of the device) should have access to all the content of a website
  27. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 28, 2016 The Viewport  Viewport defines the visible area of a web page  without scrollbars, browser borders etc.  HTML5 introduced a new method to control the viewport via a meta tag  Avoid large fixed width for elements  elements (e.g. images) that are wider than the viewport might lead to horizontal scrollbars (poor user experience)  Do not rely on a particular viewport width for a page to render well <meta name="viewport" content="width=device-width, initial-scale=1.0">
  28. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 28, 2016 Media Queries  CSS2 allowed media queries for media types  e.g. screen or print  CSS3 allows media queries to apply different declaration blocks based on device properties (e.g. viewport width)  e.g. typically change the number of columns, navigation, font size or image size body { font-size: 12px; background-color: red; } @media only screen and (min-width: 40em) { body { background-color: green; } }
  29. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 28, 2016 Media Queries  Device properties that can be queried via CSS3  viewport width (width) and height (height)  screen width (device-width) and height (device-height)  orientation (orientation) which can be landscape or portrait  aspect ratio (aspect-ratio or device-aspect-ratio) - e.g. 16:9 or 4:3  resolution (resolution) of the device screen - e.g. 300 dpi  does the device support colour (color)  …
  30. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 28, 2016 Breakpoints  Breakpoint is the point where we use a media query to change the design  e.g. change the number of columns or font size  Design range is the range between two breakpoints  design should look good anywhere within a design range
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 28, 2016 Designing Responsive Solutions  Mobile-first approach  start with the basic design (default design) for the narrowest design range and devices that might not support media queries  Progressive enhancement via different layers ensures that page is also accessible without CSS and JavaScript 1. HTML 2. CSS (with potential media queries) 3. JavaScript  Responsive design is often based on grids  12-column grid is very common  columns can be grouped
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 28, 2016 Multi-Column Layout  Compute the percentage for each column and the space between the columns  e.g. 4-column layout with 21% for each column, 2% between the columns and 5% for the left and right border 5% 5%21% 21% 21% 21%2% 2% 2% <article> <aside> <footer>
  33. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 28, 2016 Multi-Column Layout …  Example of a breakpoint between a single column layout and 2-column layout @media only screen and (min-width: 40em) { article { width: 67%; float: left; margin-right: 0; } aside { width: 21%; float: right; margin-left: 0; } footer { clear: both; } }
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 28, 2016 Images  Scaling of images can be controlled  e.g. via max-width property  Offer different sizes of an image  e.g. via the HTML5 picture element img { max-width: 100%; /* do not scale up images */ height: auto; } <picture> <source srcset="smallfBird.jpg" media="(max-width: 300px)"> <source srcset="bird.jpg"> <img src="bird.jpg" alt="Bird"> /* fallback */ </picture>
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 28, 2016 RWD Frameworks  Bootstrap  mobile-first design philosophy  provides a set of CSS style sheets for the formatting of key HTML components  additional reusable components (e.g. advanced buttons)  JavaScript components (e.g. UI elements)  Skeleton  …
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 28, 2016 Use Case: MindXpres  MindXpres presentations are currently represented in an XML document format  Compiler (node.js application) translates XML to HTML  Presentation engine based on HTML5 and related APIs  e.g. WebSockets for connectivity
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 28, 2016 Exercise 6  No Exercise  use time to prepare interim project presentation
  38. 38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 28, 2016 References  Learning Responsive Web Design: A Beginner's Guide, Clarissa Peterson, O'Reilly Media (1st edition), June 2014 ISBN-13: 978-1449362942  HTML and CSS: Design and Build Websites, Jon Duckett, Wiley (1st edition), November 2011 ISBN-13: 978-1118008188
  39. 39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 28, 2016 References …  Cascading Style Sheets (CSS) Snapshot 2010, W3C Working Group Note  http://www.w3.org/TR/CSS/  Molly E. Holzschlag, Core CSS (Part I, II & III) (refcardz #19, #25 and #34)  http://refcardz.dzone.com/refcardz/corecss-part1  http://refcardz.dzone.com/refcardz/corecss2  http://refcardz.dzone.com/refcardz/corecss3  CSS Tutorial  http://www.w3schools.com/css/
  40. 40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 28, 2016 References ...  MDN CSS Reference  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference  Webplatform.orgl  http://docs.webplatform.org/wiki/css  Bootstrap  http://getbootstrap.com  R. Roels and B. Signer, MindXpres: An Extensible Content-driven Cross-Media Presentation Platform, Proceedings of WISE 2014, 15th International Conference on Web Information System Engineering, Thessaloniki, Greece, October, 2014  http://beatsigner.com/publications/roels_WISE2014.pdf
  41. 41. 2 December 2005 Next Lecture JavaScript and jQuery

×