Category: Week 1

CSS * selector

·

* {
    css declarations;
}

  • The * selector in CSS selects all HTML elements.
  • This can impact on load time as the styling properties are added to every element on the page.
  • Instead use the :root or html selectors for global styling so it cascades down the stylesheet.

JavaScript preventDefault() method

·

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

W3Schools

I learned to use the preventDefault() method to stop the user submitting a form when they pressed the enter key on their keyboard, but still allowed them to press the enter key to enter a line break in the textarea with the id #message.

const message = document.querySelector("#message");

document.querySelector("form").onkeypress = function(e) {
  let key = e.charCode || e.keyCode;
  if (key == 13 && e.target !== message) {
    e.preventDefault();
  }
};

Here is a link to the repo where we used this code on a group project.

HSL colours

·
  • Hex colours that are similar visually look nothing alike in code.
  • HSL (Hue Saturation Lightness) colours are more readable because the code represents better how users see the relationships between colours.
The darker pink has no obvious relation to the lighter pink in its HEX code, but its HSL code has an obvious correlation. The hue and saturation percentages are the same, the lightness percentage of the darker pink is lower.

Media queries are not only for screen size

·

The hardware industry has created massive touchscreen TVs, really large tablets (like the iPad Pro), and even huge touch desktop PCs (like the new, jaw-dropping Surface Studio). This means we can no longer assume that a small viewport is a touch screen and a large viewport isn’t.

CSS Tricks

Pointer

We can use media queries to adapt designs to the “accuracy” of a user’s pointer.

The primary pointing device is of limited accuracy, e.g. a finger:
@media (pointer: coarse) { ... }

The primary pointing device is accurate, e.g. a mouse or stylus:
@media (pointer: fine) { ... }

There is no pointing device:
@media (pointer: none) { ... }

Hover

We can use media queries to detect the user’s abilities to hover over elements on a webpage.

The user is on a touch screen device where the primary pointer system is the finger and they cannot hover:
@media (hover: none) { ... }

The user is on a device were the primary input is a mouse:
@media (hover: hover) { ... }