Some Notes on CSS

References

• Wikipedia article on CSS
• The problems with viewport units
• Sites for Testing Browser Compatibility of CSS Features
• • CanIUse
  • MDN Web Docs

Definitions

• Style Sheet Language
• • A Style sheet language, or style language, is a computer language that expresses the presentation of structured documents. One attractive feature pf structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.
• Markup Language
• • A markup language is a text-encoding system which specified the structure and formatting of a document and potentially the relationship between its parts. Markup can control the display of a document or enrich its content to facilitate automated processing.
• World Wide Web Consortium (W3C)
• • The World Wide Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working together in the development of standards for the World Wide Web.

Notes

About CSS

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation of a document written in a markup language such as HTML and XML (including XML dialects such as SVG, MathML, or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content, and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

• The name cascading comes from the specified priority scheme to determine which declaration applies if more than one declaration of a property match a particular element.
• The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

Syntax

• Style sheet
• • A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
• Selector
• • In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.

Summary of Selector Syntax

• Declaration Block
• • A declaration block consists of a pair of braces {} enclosing a semicolon-separated list of declarations.
• Sources
• • Styles can be applied inline, within an HTML document, or through external .css files for broader consistency.
  • The stylesheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as user agent style. This process if called cascading.

• Specificity
• • Specificity refers to the relative weights of various rules. It determines which styles apply to an element when more than one rule could apply.

• Inheritance
• • Inheritance is the mechanism by which properties are applied not only to a a specified element but also to its descendants. In general, descendant elements may inherit text-related properties, but their box-related properties are not inherited.

• Whitespace
• • The whitespace between properties and selectors is ignored.
• Positioning
• • CSS 2.1 defines three positioning schemes:
  • • Normal flow
    • • Inline items are laid out in the same way as letters in words in the text, one after the other across the available space until there is no more room, then starting a new line below. Block items stack vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes the relative positioning of block or inline items and run-in boxes.
    • Floats
    • • A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item.
    • Absolute positioning
    • • An absolute positioned item has no place in, and no effect on, the normal flow of other items. It occupies its assigned position in its container independently of other items.
    • Position property
    • • There are five possible values (see below). Then, the left, right, top, and bottom properties are used to specify offset and positions.
      • Static
      • • The default value places the item in the normal flow.
      • Relative
      • • The item is placed in the normal flow, and then shifted or offset from that position.
      • Absolute
      • • Specifies absolute positioning
      • Fixed
      • • The item is absolutely positioned in a fixed position on the screen even as the rest of the document is scrolled.
    • Float and clear
    • • The float property may have one of three values.
      • left
      • • The item floats to the left of the line that it would have appeared in, other items may flow around its right side.
      • right
      • • The item floats to the right of the line that it would have appeared in, other items may flow around its left side.
      • clear
      • • Forces the element to appear underneath floated elements to the left, right, or both sides.

History

• CSS was first proposed by Håkon Wium Lie on October 10, 1994.
• Several other style sheet languages for the web were proposed around the same time; in particular, a proposal by Bert Bos was influential - and he became regarded as the co-creator of CSS.

Style sheets have existed in one form or another since the beginnings of Standard Generalized markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. One requirement for a web style sheet language was for style sheets to come from different sources on the web. Therefore, existing style sheets [...] were not suitable.

• Before CSS, developers used HTML for presentation, which caused difficulties due to different browsers handling HTML differently.
• It was around 1999 when any browser achieved full implementation of the CSS1 specification.
• Individual browsers occasionally introduced new parameters ahead of standardization and universalization. To prevent interfering with future implementations, vendors prepended unique names to the parameters such as -moz- for Mozilla Firefox, -webkit- named after the browsing engine of Apple safari, -o- for Opera browser, and -ms- for Microsoft Internet Explorer and early versions of Microsoft Edge that use EdgeHTML.
• CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4.
• • CSS 1
  • • The first CSS specification to become an official W3C Recommendation is CSS level 1, published on 17 December 1996.
    • The W3C no longer maintains the CSS 1 recommendation.
  • CSS 2
  • • Published in May 1998.
    • The W3C no longer maintains the CSS 2 recommendation.
  • CSS 2.1
  • • Fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already implemented browser extensions to the specification.
    • CSS 2.1 went to Proposed Recommendation on 12 April 2011.
  • CSS 3
  • • CSS 3 is divided into several separate documents called modules. Each module adds new capabilities or extends features defined in CSS2, preserving backwards compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation.

• • CSS 4
  • • There is no single, integrated CSS4 specification, because the specification has been split into many separate modules which level independently.

Browser Support

• Each web browser uses a layout engine to render web pages, and support for CSS functionality is not consistent between them. Because browsers do not parse CSS perfectly, multiple coding techniques have been developed to target specific browsers with workarounds (commonly known as CSS hacks or CSS filters).
• In order to ensure a consistent experience for their users, web developers often test their sites across multiple operating systems, browsers, and browser versions, increasing development time and complexity.
• CSS that is not supported by older browsers can also sometimes be patched in using JavaScript polyfills, which are pieces of JavaScript code designed to make many browsers behave consistently.

The Problem with Viewport Units

• Don't do this (see below) because it can cause horizontal scrolling.
• • 100vw doesn't take into account the space under the scrollbar.
  • 100vh can cause problems on mobile - as I have seen
  • • Use lvh and svh on mobile when you want to use vh on mobile

html, body {
	width: 100vw;
	height: 100vh;
}

• Don't set font-size in viewport units
• Note that viewport units don't respond to page zoom
• • Decreases accessibility

Avoiding CSS Mistakes

• Don't declare things you don't need.
• • Like width: 100%; on block elements. When width: 100% is defined on block elements with margins, it can cause problems
  • Don't declare height to be auto or fit-content when you don't need them
• Don't over-rely on flexbox
• • Don't put it everywhere
• Don't use very specific values. e.g.
• • 33%
  • 50px
• Use meaningful class names. Use meaningful class names. Don't use class names like card-1, card-2, ...
• Don't rely too much on position: absolute;