IES: CSS-deck 20

Question 1

RWD optimized pages

Answer 1

• must include the meta viewport tag in HTML doc head
• Instructs web browser how to control page’s dimensions and scaling
• “… width=device-width …” tells browser to match screen’s widthand device-independent pixels
• “… initial-scale=1.0 …” tells browser to establish 1:1 relationship between CSS pixels and device-independent pixels-irrespective of the device’s orientation

Question 2

DevTools window (RWD)

Answer 2

• Google Chrome web browser facility
• Let’s you simulate how a web page will look on different devices
• > Open webpage in Google Chrome
• > F12 key (opens DevTools window)
• > (press button with icon resembling two devices (phone slightly to the front-left; pad slightly to the back-right))
• > choose any device to simulate from dropdown options in device toolbar menu

Question 3

RWD webpage design: best suited layout scheme?

Answer 3

• Flexbox intended for 1-dimensional layouts
• Grid container intended for 2-dimensional layouts
• Useful to build using each scheme to compare them
• Use DevTools window to compare:
  1. > Open webpage in Google Chrome
  2. > Press F12 key
  3. > Click device toolbar icon (resembles a page with an arrow coming from the bottom right-hand corner)
  4. > Place the cursor over any element to inspect it

Question 4

RWD web page design: optimum solution

Answer 4

• invariably uses a combination of the grid and flexbox layouts
• Overall page layout best governed by grid layout
• flexbox best suited for horizontal components (ex. nav bar)
• • adjust height & width of browser window size to check grid & flexbox are both maintained
• • Design for mobile first: mobile devices used more than PCs

Question 5

Viewport specific dimension units

Answer 5

• 100vh = viewport height is 100%
• 100vw = viewport width is 100%

Question 6

RWD adapt breakpoints-larger displays

Answer 6

• phones: media feature
  ... (max-width:600px) { ...
• Pads, etc.: media features
  ~~~
  … (min-width: 600px)
  (max-width: 992px) { …
  ~~~
• PCs, larger devices: media feature
  ... (min-width: 992px) { ...
• These media queries can change the layout from 1-column layouts for small devices to 2-column layouts for medium-sized devices to 3-column layouts for large devices

Question 7

background-image

Answer 7

• CSS property used in display or with an image
• defines the path to the source of an image to be used as a background

Question 8

background-size

Answer 8

• CSS property used in display or with an image
• Specifies the size of the background images
• default value: “auto”
• Four possible syntaxes:
  1. The keyword syntax (“auto”, “cover”, and “contain”)
  2. One value syntax (sets the width of the image (height becomes “auto”))
  3. Two value syntax (first value: width of the image, second value: height of the image)
  4. Multiple background syntax (separated with commas)
• background-size keyword/values:
  1. “auto” (default) background image displayed in original size
  2. “cover” background image resized to cover entire container even if stretched or cropped
  3. “contain” background image resized to ensure fully visible. Regardless, image maintains its aspects ratio.

Question 9

background-repeat

Answer 9

• CSS property used in display or with an image
• Sets if/how a background image will be repeated
• Default: background Image repeated vertically & horizontally near the line
• background-repeat keywords/values:
  1. “repeat” (default) background repeated vertically & horizontally. Last image clipped if doesn’t fit.
  2. “repeat-x” background image repeated horizontally
  3. “repeat-y” background image repeated vertically
  4. “no-repeat” background image not repeated: image shown once
  5. “space” background image repeated as much as possible without clipping. First and last image pinned to either side of element. White space distributed evenly between images.
  6. “round” background image repeated and squished or stretched to fill space with no gaps

Question 10

Maintaining image or video performance: different display sizes

Answer 10

• > make use of media queries to include all display sizes
• > make use of different image or video file sizes
• > assign the proper keywords to background-size and background-repeat
• > assign their width property a percentage value
• > specify the “auto” keyword to their height property.

Question 11

CSS ways of hiding webpage content

Answer 11

• the different ways of hiding content have varying consequences
• CSS manners of hiding content:
  1. display: none;
• Entirely removes content from the page flow
• No page space reserved
• Invisible to screen readers
  2. visibility: hidden;
• Remains in the page flow
• Page space is preserved
• Content is invisible to users and screen readers
  3. opacity: 0;
• Remains in the page flow
• Page space is reserved
• Content is visually hidden
• Content is visible to screen readers

Question 12

RWD: webpage content visibility & availability

Answer 12

• web page content should, ideally, not be omitted on any size display
• However, you can remove content from the page flow but have it remain visible to screen readers to aid accessibility
• this is done by “absolute”ly positioning the content outside the display area

Question 13

ChromeVox

Answer 13

• a screen reader extension for the Google Chrome browser
• Available at: chrome.google.com/webstore/category/extensions