PB138: Advanced HTML and CSS topics

Today's topics

accessibility

Lighthouse optimizations

calc

animations

scroll hijacking

CSS preprocessors

Accessibility

Essential

A

To support assistive technology

Ideal Support

AA

To satisfy requirement for goverment

Specialized Support

AAA

Specialized audience/parts of page

Page Content

Use plain language and avoid figures of speech, idioms, and complicated metaphors.

Make sure that button, a, and label element content is unique and descriptive. No click here and read more.

Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.

Centered-aligned or justified text is difficult to read.

Code

Validate HTML. It helps across browsers but not as much needed anymore.

Use a lang attribute on the html element. Helps readers with pronouncement.

Do not disable viewport zoom.

Unique title for each page. It is read first.

Use landmark elements to indicate important content regions. (main, nav...)

Code

Ensure a linear content flow.

Avoid using the autofocus attribute. Remove tabindex attribute values that aren't either 0 or -1.

Remove session timeouts.

Unique title for each page. It is read first.

Remove title attribute tooltips. It does not help with accessibility.

Keyboard

Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.

Remove invisible focusable elements.

Check to see that keyboard focus order matches the visual layout.

Images

Make sure that all img elements have an alt attribute.

Provide a text alternative for complex images such as charts, graphs, and maps.

Make sure that decorative images use null alt (empty) attribute values.

For images containing text, make sure the alt description includes the image's text.

Headings

Use heading elements to introduce content.

Heading elements should be written in a logical sequence.

Use only one h1 element per page or view.

Don't skip heading levels.

Lists

Use list elements (ol, ul, and dl elements) for list content.

This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements.

Controls

Use the a element for links. Links should always have a href attribute, even when used in Single Page Applications (SPAs). 

Ensure that links are recognizable as links.

Ensure that controls have :focus states.

Use the button element for buttons. You can add type="button" to a button element to prevent the browser from attempting to submit form information when activated.

Controls

Provide a skip link and make sure that it is visible when focused.

Identify links that open in a new tab or window. Ideally, avoid links that open in a new tab or window. 

Tables

Use the table element to describe tabular data.

Use the th element for table headers (with appropriate scope attributes).

scope = col | row

Use the caption element to provide a title for the table.

<table>
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">09:00 - 11:00</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">11:00 - 13:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  […]
</table>

Forms

All inputs in a form are associated with a corresponding label element. Use a for/id pairing to guarantee the highest level of browser/assistive technology support.

Use fieldset and legend elements where appropriate.

Inputs use autocomplete where appropriate.

Use fieldset and legend elements where appropriate.

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">
    <label> Address: <input name=ba autocomplete="section-blue shipping street-address"></label>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Forms

Associate input error messaging with the input it corresponds to.

Make sure that error, warning, and success states are not visually communicated by just color.

Media

Make sure that media does not autoplay.

Ensure that media controls use appropriate markup.

Check to see that all media can be paused.

Video

Confirm the presence of captions.

Remove seizure triggers.

Audio

Confirm that transcripts are available.

Appearance

Check your content in specialized browsing modes. Activate modes such as Windows High Contrast or Inverted Colors. Is your content still legible?

Increase text size to 200%.  Is the content still readable? Does it cause content to overlap?

Double-check that good proximity between content is maintained.

Appearance

Can you still see where links are among body content if everything is grayscale?

Use a simple, straightforward, and consistent layout.

Animation

Ensure animations are subtle and do not flash too much. Certain kinds of strobing or flashing animations will trigger seizures.

Provide a mechanism to pause background video.

Make sure all animation obeys the prefers-reduced-motion media query.

Color Contrast

Check the contrast for all normal-sized text. Level AA compliance requires a contrast ratio of 4.5:1.

 

 

Check the contrast for all large-sized text. Level AA compliance requires a contrast ratio of 3:1.

Check the contrast for all icons. Level AA compliance requires a contrast ratio of 3.0:1.

Color Contrast

Check custom ::selection colors.

Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.). Level AA compliance requires a contrast ratio of 3:1.

Check text that overlaps images or video. Is text still legible?

Mobile / Touch

Ensure sufficient space between interactive items in order to provide a scroll area.

Check that the site can be rotated to any orientation.

Remove horizontal scrolling.

Ensure that button and link icons can be activated with ease. Are they big enough?

Lighthouse

A <script> tag that:

Is in the <head> of the document.
Does not have a defer attribute.
Does not have an async attribute.


A <link rel="stylesheet"> tag that:

Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet.
Does not have a media attribute that matches the user's device.

 Eliminate render-blocking resources 

How to identify critical resources

How to eliminate render-blocking scripts 

If there's code in a render-blocking URL that's not critical, you can keep it in the URL, and then mark the URL with async or defer attributes

<link rel="preload" href="styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">
<noscript>
	<link rel="stylesheet" href="styles.css">
</noscript>

How to eliminate render-blocking stylesheets

Properly size image

Defer offscreen images

see <amp-img>

Serve images in next-gen formats

Enable text compression headers

Accept-Encoding: gzip, compress, br

Minify CSS & JS

vs

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}
h1,h2{background-color:#000000;}

Security Issues of a website

Does not use HTTPS
Links to cross-origin destinations are unsafe
Includes front-end JavaScript libraries with known security vulnerabilities

Page lacks the HTML doctype, thus triggering quirks mode
Browser errors were logged to the console

Displays images with incorrect aspect ratio

General best practices vilations

Does not use HTTP/2 for all of its resources
Uses document.write()
Does not use passive listeners to improve scrolling performance​

Speed vilations

Now let's get to CSS.

Can I use ... ?

Browser Usage

calc() in CSS

.main-content {
  /* Subtract 80px from 100vh */
  height: calc(100vh - 80px);
}

.el {
  /* Valid 👍 */
  margin: calc(10px * 3);

  /* Valid 👍 */
  margin: calc(3 * 10px);

  /* Invalid 👎 */
  margin: calc(30px * 3px);
}

calc() in CSS

div {
  /* Index value comes from the HTML (with a fallback) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

CSS Animations

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Transitions

.circle {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  
  .container:hover & {
    transform: translateX(200px);
  }
}

.circle0 {
  @extend .circle;
  background: PaleTurquoise;
  transition: all 1.5s linear;
}

Transitions

.box {
  background: steelblue;
  border-radius: 5px;
  display: inline-block;
  height: 80px;
  margin: 20px;
  width: 80px;
  
  .container:hover & {
    transform: scale(1.4); // also can be rotate
  }
}

.box1 {
  transition: all 1.3s;
}

Scroll Hijacking

.carousel__slides {
  display: flex;
  flex-direction: row;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.carousel__slide {
  flex: 0 0 100%;
  height: calc(100vh - 6.5rem);
  scroll-snap-align: start;
}

CSS Preprocessor

Adds compilation step to create CSS from other language (SASS/SCSS)

Was used to add more functionality to CSS

Nowadays to add old browser support

Or mixins (to change shades of colors)

Variables

SCSS SYNTAX
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { 
  @include transform(rotate(30deg)); 
}

Inheritance

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

PB138: Advanced HTML and CSS topics

By Lukáš Grolig

Made with Slides.com

PB138: Advanced HTML and CSS topics

  • 488

More from Lukáš Grolig