Cascading Style Sheets (CSS) PDF

Cascading Style Sheets (CSS) Péter Jeszenszky Faculty of Informatics, University of Debrecen November 3, 2024 Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) Novemb...

Cascading Style Sheets (CSS) Péter Jeszenszky Faculty of Informatics, University of Debrecen November 3, 2024 Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 1 / 155 Terms of Use This work is licensed under a Creative Commons “Attribution 4.0 International” license. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 2 / 155 What is CSS? A style sheet language for describing the rendering of structured documents (such as HTML and XML). Supports rendering on different devices, such as screens, printers, and Braille devices. Separates the presentation style of documents from the content of documents. Thus, simplifies web authoring and site maintenance. Website: https://www.w3.org/Style/CSS/ Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 3 / 155 History Originally, CSS was proposed by Håkon Wium Lie, a Norwegian researcher in 1994 while he was working with Tim Berners-Lee at CERN. Website: https://www.wiumlie.no/ For more information, see: 20 Years of CSS (W3C) A brief history of CSS until 2016 Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 4 / 155 Development Developed by the CSS Working Group of W3C. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 5 / 155 Levels CSS does not have versions in the traditional sense, instead, it has levels: CSS Level 1 CSS Level 2 CSS Level 3 Each level of CSS builds on the previous one, refining definitions and adding features. See: Levels, snapshots, modules... (W3C) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 6 / 155 CSS Level 1 Specification: Cascading Style Sheets, level 1 (Superseded W3C Recommendation) Considered to be obsolete. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 7 / 155 CSS Level 2 Defined by the CSS2.1 specification (i.e., a single document): Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation, 7 June 2011) Its revision is currently under development: Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (W3C First Public Working Draft, 12 April 2016) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 8 / 155 CSS Level 3 (1) Currently under development. Has a modular structure: Broken into modules, where each module defines a part of CSS. Each module adds functionality and/or replaces part of the CSS2.1 specification. Modules also have levels. Modules with no CSS Level 2 equivalent start at Level 1. Modules that update features that existed in CSS Level 2 start at Level 3. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 9 / 155 CSS Level 3 (2) Different CSS modules are at different levels of stability. The list of all CSS specifications: http://www.w3.org/Style/CSS/current-work.en.html A few modules are the following: Selectors Level 3 (W3C Recommendation, 6 November 2018) CSS Values and Units Module Level 3 (W3C Candidate Recommendation Draft, 22 March 2024) CSS Transforms Module Level 1 (W3C Candidate Recommendation, 14 February 2019) CSS Transforms Module Level 2 (W3C Working Draft, 9 November 2021)... Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 10 / 155 CSS Level 3 (3) CSS Snapshot 2023 (W3C Group Note, 7 December 2023) Collects together all specifications that together form the current state of CSS. The primary audience is CSS implementers. See the section titled Cascading Style Sheets (CSS) – The Official Definition. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 11 / 155 CSS Level 4 and Beyond There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. “CSS Level 3” as a term is used only to differentiate it from the previous monolithic versions. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 12 / 155 Browser Support Modern web browsers support most of the features of CSS 2.1. They support some features of CSS3: https://caniuse.com/?search=CSS3 The CSS3 Test https://github.com/LeaVerou/css3test Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 13 / 155 Coding Styles Google HTML/CSS Style Guide Nicolas Gallagher. Principles of writing consistent, idiomatic CSS. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 14 / 155 Editors (1) Free and open source software: Visual Studio Code (platform: Linux, macOS, Windows; license: MIT License) https://code.visualstudio.com/ https://github.com/Microsoft/vscode See: https://code.visualstudio.com/docs/languages/css Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 15 / 155 Editors (2) Non-free software: WebStorm (platform: Linux, macOS, Windows) https://www.jetbrains.com/webstorm/ See: https://www.jetbrains.com/help/webstorm/style-sheets.html Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 16 / 155 Editors (3) Emmet (written in: JavaScript; license: MIT License) https://emmet.io/ https://github.com/emmetio/emmet A set of text editor plugins for boosting HTML and CSS code writing. Available for many text editors such as: Eclipse, NetBeans, Notepad++, Visual Studio Code, IntelliJ IDEA,... See: https://emmet.io/download/ Documentation: https://docs.emmet.io/ Customization: https://docs.emmet.io/customization/ See also: Emmet in Visual Studio Code Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 17 / 155 Editors (4) Examples of Emmet abbreviations: Abbreviation Expanded to bd border: 1px solid #000; bdt border-top: 1px solid #000; bgc background-color: #fff; fwb font-weight: bold; p10 padding: 10px; p1e padding: 1em; mla margin-left: auto; mra margin-right: auto; pt.5e padding-top: 0.5em; tac text-align: center; tar text-align: right; df display: flex; w50% width: 50%; Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 18 / 155 CSS Frameworks Minimalistic CSS frameworks: Milligram (license: MIT License) https://milligram.io/ https://github.com/milligram/milligram Examples: https://milligram.io/#examples Pico CSS (license: MIT License) https://picocss.com/ https://github.com/picocss/pico Examples: https://picocss.com/examples Simple.css (license: MIT License) https://simplecss.org/ https://github.com/kevquirk/simple.css Examples: https://simplecss.org/demo For more, see: https://github.com/troxler/awesome-css-frameworks Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 19 / 155 Other Tools Minifier tools: cssnano (written in: CSS/JavaScript; license: MIT License) https://cssnano.github.io/cssnano/ https://github.com/cssnano/cssnano CSSO (written in: CSS/JavaScript; license: License MIT) https://css.github.io/csso/ https://github.com/css/csso Visual Studio Code: MinifyAll (written in: TypeScript; license: GPLv3) https: //marketplace.visualstudio.com/items?itemName=josee9988.minifyall https://minifyall.jgracia.es/ https://github.com/Josee9988/MinifyAll Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 20 / 155 Online CSS Sandboxes CodePen JSFiddle Liveweave Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 21 / 155 File Properties File extension:.css IANA media type: text/css Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 22 / 155 Characters CSS uses the Unicode character set. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 23 / 155 Escape Sequences (1) Unicode characters can be specified with escape sequences of the form \hhhhhh where hhhhhh is a sequence of one to six hexadecimal digits representing the code point of the Unicode character. If the number of hex digits is less than six and a character in the range [0-9a-fA-F] follows the hexadecimal number, then a whitespace character must end the escape sequence. A whitespace character that immediately follows an escape sequence will be ignored. Examples: \9, \09,... , \000009 denote the vertical tab character. \A9, \0A9,... , \0000A9 denote the copyright symbol (©). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 24 / 155 Escape Sequences (2) Special characters can be escaped with a '\' character. For example, it is required when a selector contains an element name that contains '.' characters. For example, an element named given.name matches the selector given\.name and does not match the selectorgiven.name. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 25 / 155 Character Encoding Character encoding is determined by the following: A byte order mark (BOM). Otherwise, the value of the charset parameter in the Content-Type HTTP header field. Otherwise, the @charset "encoding"; at-rule at the very beginning of the stylesheet. Example: @charset “UTF-16”; Otherwise, UTF-8 is the default character encoding. See: Declaring character encodings in CSS (W3C) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 26 / 155 Comments Comments can be placed between the delimiters. Example: Can occur anywhere but in tokens. Cannot be nested. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 27 / 155 Box Model (1) Relevant specification: CSS Display Module Level 3 (W3C Candidate Recommendation Snapshot, 30 March 2023) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 28 / 155 Box Model (2) CSS takes a source document, organized as a tree, and renders it onto a canvas (such as the screen) generating an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Each box in the box tree represents a corresponding element (or pseudo-element) from the document in space and/or time on the canvas. For each element, CSS generates zero or more boxes as specified by that element’s display property. Typically, an element generates a single box. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 29 / 155 Box Model (3) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 30 / 155 Properties (1) Parameters defined by CSS for controlling the rendering of documents. Properties have names and values. The list of CSS properties: List of CSS properties (W3C) The total number of distinct property names is 602. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 31 / 155 Properties (2) Shorthand property: A property that allows authors to specify the values of several properties simultaneously. For example, the margin property is a shorthand property for setting the value of the margin-top, margin-right, margin-bottom and margin-left properties. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 32 / 155 Declaration Blocks Start with a '{' character and end with a '}' character, in between there must be a list of zero or more declarations. Declarations are of the form name:value, where whitespace characters are allowed before and after tokens. In a declaration name is an identifier.. Declarations must end with a ';' character. The ';' character after the last declaration can be omitted. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 33 / 155 Rule Sets (Style Rules) Consist of a selector (or a list of selectors separated with a ',' character) followed by a declaration block. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 34 / 155 At-rules Define special processing rules or values. Start with a '@' character, followed by an identifier and includes everything up to the next ';' character, or the next declaration block. Examples: @charset, @import, @namespace, @media See: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 35 / 155 Values (1) Relevant specification: CSS Values and Units Module Level 3 (W3C Candidate Recommendation Draft, 22 March 2024) See also: CSS values and units (MDN) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 36 / 155 Values (2) A property value can have one or more components: Identifiers (e.g., none, inherit) Strings (e.g., 'Hello, world!') URLs (e.g., url(images/item.png)) Numbers (e.g., 123, 3.141593) Percentages (e.g., 150%) Dimensions (e.g., 10px, 0.5em, 45deg) Colors (e.g., fuchsia, #f0f, #ff00ff, rgb(255,0,255)) Functional notations (e.g., attr(name), calc(100% - 50px), counter(chapter-number))... Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 37 / 155 Values (3) For each property, CSS specifications define the type, number, and ordering of components allowed in property values. Examples: text-transform: none | capitalize | uppercase | lowercase | full-width letter-spacing: normal | border-color: {1,4} border-top: || || Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 38 / 155 Identifiers Keywords: are ASCII case-insensitive (i.e., the [a-z] and [A-Z] characters are equivalent). Author-defined identifiers: Used, for example, for names of counters. Are case-sensitive. Syntax: See: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 39 / 155 Strings Sequences of characters delimited by ''' or '"' characters. Cannot contain the delimiter character directly. Delimiters in strings must be escaped with a '\' character. Example: 'It\'s So Cool', "\"Good morning, Frank,\" said Hal." Newlines can be specified only with the \A escape sequence. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 40 / 155 URL-s Examples: list-style-image: url("http://eg.com/images/item.png") list-style-image: url('http://eg.com/images/item.png') list-style-image: url(http://eg.com/images/item.png) Relative references can be used and are resolved against the URL of the stylesheet. Example: list-style-image: url("images/item.png") In some contexts, e.g., in @import at-rules, the url() function can be omitted and a bare string can be used instead. Example: @import "default.css"; Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 41 / 155 Numbers CSS uses two types of numbers: Integers: consist of an optional sign and one or more decimal digits. Examples: 0, 255, -1, +10946 Real numbers: consist of an optional sign, one ore more decimal digits, an optional dot, optionally followed by an 'e' or 'E' character and an integer. At least one digit is required after the dot. Integers are special cases of real numbers. Examples: 1.5, -100.0, +.25, 1E-10 Properties may restrict numeric values to some range. For example, they can exclude negative numbers. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 42 / 155 Percentages (1) Consist of an integer or a real number immediately followed by a '%' character. Percentage values are always relative to another quantity. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, or something else. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 43 / 155 Percentages (2) Examples: sup { font-size: 75%; } nav { width: 40%; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 44 / 155 Dimensions Consist of an integer or a real number immediately followed by a unit. Units are ASCII case-insensitive identifiers. Each dimension represents a quantity, such as length, or angle. For zero lengths the unit can be omitted. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 45 / 155 Lengths (1) There are two types of length units: Relative: specify a length relative to another length. em, ex, ch, rem, vw, vh, vmin, vmax Absolute: fixed in relation to each other and anchored to some physical measurement. cm, mm, Q, in, pc, pt, px Examples: 0.5em, 1.5cm, 0px, 0, -1in See: https://developer.mozilla.org/en-US/docs/Web/CSS/length Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 46 / 155 Lengths (2) Relative units: em: equals to the computed value of the font-size property of the element on which it is used (in case of the font-size property itself it refers to the computed font-size of the parent element). ex: equals to the x-height of the element’s font (in case of the of the font-size property itself it refers to the x-height of the parent element). It is so called because it is often equal to the height of the lowercase x character. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 47 / 155 Colors (1) Relevant specification: CSS Color Module Level 3 (W3C Recommendation, 18 January 2022) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 48 / 155 Colors (2) The 16 basic color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Modern web browsers generally support several other color keywords, see: https://www.w3.org/TR/css-color-3/#svg-color https://developer.mozilla.org/en-US/docs/Web/CSS/named-color Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 49 / 155 Colors (3) RGB color model: For example, all of the following specify the same color: lightslategrey #778899 #789 (each hexadecimal digit is doubled) rgb(119,136,153) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 50 / 155 Colors (4) RGB color model: The rgb() functional notation also accepts three percentages as arguments, where the integer value 255 corresponds to 100%. For example, the following colors are equivalent: #ffffff #fff rgb(255,255,255) rgb(100%,100%,100%) white Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 51 / 155 Selectors (1) Relevant specification: Selectors Level 3 (W3C Recommendation, 6 November 2018) Selectors express pattern matching rules. They determine which style rules apply to elements. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 52 / 155 Selectors (2) Selectors are case-insensitive within the ASCII range (i.e., the characters [a-z] and [A-Z] are equivalent), except for parts that are not underthe control of CSS (element names, attribute names and values). The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language For example, element names are case-sensitive in XHTML and XML. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 53 / 155 Selectors (3) Simple selector: either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class. Examples: div [rel=stylesheet].copyright #logo :lang(hu) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 54 / 155 Selectors (4) Combinator: any of the following characters: whitespace '>' '+' '~' Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 55 / 155 Selectors (5) Sequence of simple selectors: A chain of simple selectors that are not separated by a combinator. Begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence. Examples: div h2#status link[rel=stylesheet][type=text/css] p.copyright *:lang(hu) tr:nth-child(odd) li:not(:last-child) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 56 / 155 Selectors (6) Selector: A chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors. Examples: p a img h1 ~ table div#main > h1 div > h1 + p q::before Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 57 / 155 Type Selector Written as a CSS qualified name, generally, an identifier. Matches the elements of that name. Examples: p { color: red } a { text-decoration: none } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 58 / 155 Universal Selector Written as *. Matches all elements. May be omitted from a simple selector, if it is not the only component. Thus, for example, the following selectors are equivalent: *#nav and #nav *.important and.important *[title] and [title] It is recommended not to omit the *, because it improves readability. For example, the selector div *:first-child is more readable than the selector div :first-child, because it is less likely to confuse with the selector div:first-child. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 59 / 155 Attribute Selectors (1) [att]: matches elements with the att attribute. [att=val]: matches elements with the att attribute whose value is exactly val. [att~=val]: matches elements with the att attribute whose value is a whitespace-separated list of words, one of which is exactly val. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 60 / 155 Attribute Selectors (2) [att|=val]: Matches elements with the att attribute, its value either being exactly val or beginning with val-. Primarily intended to be used for attributes whose value is a language tag, for example, en-US, en-GB. For the xml:lang attribute and the HTML lang attribute the :lang(C) pseudo-class should be used. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 61 / 155 Attribute Selectors (3) Additional attribute selectors introduced by CSS3: [attˆ=val]: matches elements with the att attribute whose value begins with the prefix val. [att$=val]: matches elements with the att attribute whose value ends with the suffix val. [att*=val]: matches elements with the att attribute whose value contains the substring val. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 62 / 155 Attribute Selectors (4) In each attribute selector, val must be a CSS identifier or a string. Thus, for example, the [dir=rtl], [dir='rtl'], and [dir="rtl"] selectors are equivalent. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 63 / 155 Attribute Selectors (5) Examples: style[type=italic] { font-style: italic; } style[type=bold] { font-weight: bold; } style[type=normal] { font-style: normal; font-weight: normal; } a[hreflang|=en] { text-decoration: line-through; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 64 / 155 Class Selector For HTML documents, the attribute selector [class~=val] is equivalent with the selector.val. Examples: div.centered { margin-left: auto; margin-right: auto; }.important { color: red; text-decoration: underline; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 65 / 155 ID Selector (1) A selector of the form #identifier matches the element with that identifier. The identifier must be provided by an attribute of type ID in the document. The name of such an attribute depends on the document language, for example, in HTML the attribute is named id. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 66 / 155 ID Selector (2) Examples: div#main { width: 50%; margin-left: auto; margin-right: auto; } #footer { text-align: center; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 67 / 155 Pseudo-classes (1) Selectors of the form :identifier or :identifier(value). Pseudo-class names are case-insensitive. Permit selection based on information that lies outside of the document or that cannot be expressed using the other simple selectors. Some pseudo-classes are mutually exclusive (e.g., :link and :visited). Some pseudo-classes are dynamic: an element may acquire or lose a dynamic pseudo-class while a user interacts with the document. The two types of dynamic pseudo-classes: link pseudo-classes and user action pseudo-classes. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 68 / 155 Pseudo-classes (2) Link pseudo-classes: :link: applies to links that have not yet been visited. :visited: applies to links that have not yet been visited. For privacy reasons, a very limited set of CSS properties can be set via the :visited pseudo-class. Moreover, for the same reasons, modern web browsers lie about the values of the CSS properties of visited links when they are queried from JavaScript via the Window.getComputedStyle() method. See: :visited (MDN) Privacy and the :visited selector (MDN) Window: getComputedStyle() method (MDN) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 69 / 155 Pseudo-classes (3) User action pseudo-classes: :hover: applies while the user designates an element with a pointing device, but does not necessarily activate it. :active: applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. :focus: applies while an element has the focus (accepts keyboard or mouse events, or other forms of input). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 70 / 155 Pseudo-classes (4) Example for using dynamic pseudo-classes: a:link { color: indigo; text-decoration: none; } a:visited { color: gray; text-decoration: line-through; } a:hover { border-width: medium; border-style: solid; } a:active { font-weight: bolder; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 71 / 155 Pseudo-classes (5) The :target pseudo-class: When the URI of the document contains a fragment identifier, :target represents the element referred by the fragment. For example, if index.html#copyright is the URI of the document, then the selector div:target represents the div element with the ID copyright. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 72 / 155 Pseudo-classes (6) The :lang(C) pseudo-class: Represents elements that are in language C, where C is a CSS identifier (language code). Examples: :lang(en), :lang(en-GB), :lang(en-US) :lang(hu) In XML documents, the language used is defined by the xml:lang attribute. In HTML documents, the language can be specified with both the lang and the xml:lang attributes. The lang and xml:lang attributes are not necessarily occur directly on an element. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 73 / 155 Pseudo-classes (7) Example for using the :lang(C) pseudo-class: using Hungarian quotation marks for quotations in Hungarian q:lang( hu) { quotes: "„" "”" "»" "«"; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 74 / 155 Pseudo-classes (8) UI element states pseudo-classes: :enabled: represents user interface elements that are in an enabled state. :disabled: represents user interface elements that are in a disabled state. :checked: represents user interface elements that are in a “checked” state (for example, radio buttons, checkboxes). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 75 / 155 Pseudo-classes (9) Structural pseudo-classes: Only elements are counted when calculating the position of an element in its list of siblings. For example, text, comments, and processing instructions are ignored. Index numbering starts at 1. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 76 / 155 Pseudo-classes (10) Structural pseudo-classes: :root: represents the root element of the document. :only-child: represents elements that have no siblings. :only-of-type: represents elements that have no siblings with the same element name. :empty: represents elements that have no children at all. These elements do not contain any text or elements, but may contain comments and processing instructions. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 77 / 155 Pseudo-classes (11) Structural pseudo-classes (continued): a and b are integers :nth-child(an+b): represents elements that have an + b − 1 siblings before it in the document, for any non-negative integer value of n. :nth-last-child(an+b): represents elements that have an + b − 1 siblings after it in the document, for any non-negative integer value of n. :nth-of-type(an+b): represents elements that have an + b − 1 siblings with the same element name before it in the document, for any non-negative integer value of n. :nth-last-of-type(an+b): represents elements that have an + b − 1 siblings with the same element name after it in the document, for any non-negative integer value of n. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 78 / 155 Pseudo-classes (12) Structural pseudo-classes (continued): :nth-child(), :nth-last-child(), :nth-of-type() és :nth-last-of-type(): The argument an+0 can be specified as an in short. The argument 0n+b can be specified as b in short. For a negative b the argument must be specified as an-b, the form an+-b is invalid. The argument 2n can be specified as even, the argument 2n+1 as odd, respectively. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 79 / 155 Pseudo-classes (13) Structural pseudo-classes (continued): Selector Meaning tr:nth-child(2n+0) The even rows of a table tr:nth-child(2n) tr:nth-child(even) tr:nth-child(2n+1) The odd rows of a table tr:nth-child(2n-1) tr:nth-child(odd) tr:nth-child(5) The the fifth row of a table tr:nth-child(5n+1) The 1st, 6th, 11th,... rows of a table tr:nth-child(5n-4) tr:nth-child(-n+5) The first five rows of a table tr:nth-last-child(-n+5) The last five rows of a table Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 80 / 155 Pseudo-classes (14) Structural pseudo-classes (continued): :first-child: has the same meaning as :nth-child(1) :last-child: has the same meaning as :nth-last-child(1) :first-of-type: has the same meaning as :nth-of-type(1) :last-of-type: has the same meaning as :nth-last-of-type(1) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 81 / 155 Pseudo-classes (15) The negation pseudo-class: A selector of the form :not(X) , where the argument is a simple selector (excluding the negation pseudo-class itself). Matches elements that do not match the argument. Examples: :not(.important) :not([title]) li:not(:last-child) a:not(:hover) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 82 / 155 Pseudo-classes (16) The negation pseudo-class (continued): Only the argument is taken into account when calculating specificity! For example, the selector h1:not(h2) is practically equivalent to the selector h1, but it has a higher specificity: (a = 0, b = 0, c = 2). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 83 / 155 Pseudo-elements (1) Pseudo-elements allow authors to refer to content in the document that is otherwise inaccessible. This includes content that originally does not exist in the document (i.e., generated content). Only one pseudo-element may appear per selector. The following pseudo-elements are available: ::first-letter ::first-line ::before, ::after CSS3 uses '::' instead of ':' for pseudo-elements to distinguish them from pseudo-classes. For compatibility ':' can be used also. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 84 / 155 Pseudo-elements (2) ::first-line: represents the first formatted line of an element. Example: p::first-line { text-decoration: underline } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 85 / 155 Pseudo-elements (3) ::first-letter: represents the first letter or digit of an element, if it is not preceded by any other content (such as images) on its line. Also applies to any punctuation character that precedes or follows the first letter. Example: p::first-letter { font-size: 2em; font-weight: bold; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 86 / 155 Pseudo-elements (4) ::before and ::after: they can be used to describe generated content before or after an element’s content. Example: div.proof::before { content: "Proof: "; font-weight: bold; } div.proof::after { content: "\220E" } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 87 / 155 Combinators (1) Descendant combinator: Whitespace that separates two sequences of simple selectors. If P and Q are two sequences of simple selectors, the selector P Q represents elements matching Q that are descendants of elements matching P. Example: thead th { background-color: darkgrey; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 88 / 155 Combinators (2) Child combinator: A '>' character that separates two sequences of simple selectors. If P and Q are two sequences of simple selectors, the selector P > Q represents elements matching Q that are children of elements matching P. Example: nav > div { display: inline; } p > img:only-child { margin-left: 0; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 89 / 155 Combinators (3) Next-sibling combinator: A '+' character that separates two sequences of simple selectors. If P and Q are two sequences of simple selectors, the selector P + Q represents elements matching Q that immediately follow an element matching P. The elements represented by the two sequences share the same parent in the document. Non-element constructs (e.g., text and comments) are ignored when considering adjacency of elements. Example: h1 + p { text-indent: 0; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 90 / 155 Combinators (4) Subsequent-sibling combinator (CSS3): A '~' character that separates two sequences of simple selectors. If P and Q are two sequences of simple selectors, the selector P ~ Q represents elements matching Q that (not necessarily immediately) follow an element matching P. The elements represented by the two sequences share the same parent in the document. Example: img ~ span { color: red; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 91 / 155 Grouping Rules (1) Rules with the same declarations can be grouped together. The selector of the grouped rule contains the selectors of the original rules separated by ',' characters. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 92 / 155 Grouping Rules (2) For example, the first three rules are equivalent to the fourth one: h1 + p { text-indent: 0 } h2 + p { text-indent: 0 } h3 + p { text-indent: 0 } h1 + p, h2 + p, h3 + p { text-indent: 0; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 93 / 155 Selectors Level 4 (1) Specification: Selectors Level 4 (W3C Working Draft, 11 November 2022) Changes since Level 3: https://www.w3.org/TR/selectors-4/#changes-level-3 New features: :any-link and :local-link pseudo-classes :has() pseudo-class :is() pseudo-class :not(): takes a selector list as an argument... Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 94 / 155 Selectors Level 4 (2) :is() pseudo-class: A selector of the form :is(X) where the argument is a selector list. Also called matches-any pseudo-class. Matches any element that can be matched by any of the selectors in the list argument. Useful for representing long selector lists in a more compact form. Pseudo-elements are not valid within :is(). The specificity of the :is() selector is the specificity of selector with the highest specificity in the list argument. Browser support: https://caniuse.com/css-matches-pseudo Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 95 / 155 Selectors Level 4 (3) :is() pseudo-class: for example, the following two style rules are equivalent: div:is(.note,.warning,.hint)::before { } div.note::before , div.warning::before , div.hint::before { } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 96 / 155 Other Uses of CSS Selectors Web scraping: Free and open source software: Scrapy (written in: Python; license: New BSD License) https://scrapy.org/ https://github.com/scrapy/scrapy Parsel (written in: Python; license: New BSD License) https://parsel.readthedocs.io/ https://github.com/scrapy/parsel Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 97 / 155 Specificity (1) For each selector and declaration a specificity is calculated, which is a vector (a, b, c) of length 3, where a, b, and c are non-negative integers. The vectors are sorted in lexicographic order. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 98 / 155 Specificity (2) A selector’s specificity is calculated as follows: the specificity of the selector is a vector (a, b, c), where: a is the number of ID selectors in the selector. b is the number of class selectors, attribute selectors, and pseudo-classes in the selector. Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class! c is the number of type selectors and pseudo-elements in the selector. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 99 / 155 Specificity (3) Specificity of a declaration: Each declaration has the same specificity as of the selector of the style rule it appears in. Declarations that do not belong to a style rule (such as the contents of a style attribute in HTML) are considered to have a specificity higher than any selector. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 100 / 155 Calculating a Selector’s Specificity (1) The specificity of the selector * is (a = 0, b = 0, c = 0). Because it does not contain any ID selectors, class selectors, attribute selectors, pseudo-classes, type selectors, or pseudo-elements. The specificity of the selector div is (a = 0, b = 0, c = 1). The specificity of the selector p::first-letter, a img, and h1 + p is (a = 0, b = 0, c = 2). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 101 / 155 Calculating a Selector’s Specificity (2) The specificity of the selector div[class=nav] and the equivalent selector div.nav is (a = 0, b = 1, c = 1). The specificity of the selector #main *:lang(en) is (a = 1, b = 1, c = 0). Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 102 / 155 Calculating a Selector’s Specificity (3) The selectors from the examples in increasing order of specificity: Selector Specificity * (a = 0, b = 0, c = 0) div (a = 0, b = 0, c = 1) p::first-letter a (a = 0, b = 0, c = 2) img h1 + p div[class=nav] (a = 0, b = 1, c = 1) div.nav #main *:lang(en) (a = 1, b = 1, c = 0) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 103 / 155 Stylesheets of Different Origins Multiple stylesheets of different origins may belong to a document. Stylesheets may have three different origins: User agent User Author Origins are listed in increasing order of precedence. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 104 / 155 User agent stylesheets (1) User agents must apply a default stylesheet. For example, they provide a style rule specifying that the content of the HTML em element is presented using an italic font. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 105 / 155 User agent stylesheets (2) Firefox : the default stylesheet can be accessed as follows: Type the following in the address bar: resource://gre-resources/ As a result, a directory is presented, in which the html.css file is the default stylesheet. See: https://searchfox.org/mozilla-central/source/layout/style/res/html.css Chromium, Google Chrome : the default stylesheet to render HTML documents: https://chromium.googlesource.com/chromium/blink/+ /master/Source/core/css/html.css Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 106 / 155 User Stylesheets The user may be able to specify style information for a particular document. This is important to people with disabilities. Related concept: web accessibility https://www.w3.org/WAI/ The Stylish extension for the Chromium, Google Chrome, Firefox, and Opera browsers provides such functionality: https://userstyles.org/ Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 107 / 155 Author Stylesheets (1) In HTML, the link element associates an external stylesheet with the document. Example: In HTML, the style element allows the direct embedding of style rules in the document. Example: h1, h2, h3, h4, h5, h6 { font-variant: small-caps } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 108 / 155 Author Stylesheets (2) In XML, the xml-stylesheet processing instruction associates an external stylesheet with the document. The processing instruction should occur before the root element of the document. Example: See: Associating Style Sheets with XML documents 1.0 (Second Edition) (W3C Recommendation, 28 October 2010) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 109 / 155 Importing Stylesheets The @import at-rule allows users to import style rules from other stylesheets. The URL of the stylesheet can be specified with the url() function or as a string. If an @import at-rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import at-rule. Any @import at-rules must precede all other at-rules and style rules with the exception of the @charset at-rule. Example: @import url(https://fonts.googleapis.com/css?family=Tangerine); @import "default.css"; Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 110 / 155 Important Declarations (1) A declaration can be followed by the token '!' token and keyword important. Example: color: red !important Such a declaration overrides any other normal declarations. See: Specificity – The !important exception (MDN) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 111 / 155 Important Declarations (2) By default, rules in author stylesheets have higher precedence than rules in user stylesheets. Both author and user stylesheets may contain !important declarations, and user !important rules override author !important rules. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 112 / 155 Important Declarations (3) Example: !important p { background-color: cornsilk; color: green !important; } Hello, World! Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 113 / 155 Important Declarations (4) Practical example: table.chessboard > tbody > tr:nth-child( odd) > td:nth-of-type( odd) { background-color: white; } table.chessboard > tbody > tr:nth-child( odd) > td:nth-of-type( even) { background-color: lightgray; } table.chessboard > tbody > tr > td:hover { background-color: salmon !important; } Without !important, the third rule would never be used. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 114 / 155 Calculating Property Values The final value of a CSS property for a given element or box is the result of a multi-step calculation: Cascaded value: the result of the cascade. Specified value: the result of the defaulting. Computed value: the result of transforming a relative value to an absolute one. Used value: the result of formatting the document. Actual value: the result of transforming the used value to be suitable for a display environment. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 115 / 155 Cascading, Inheritance, and Initialization Cascading: conflict resolution mechanism that is applied when different declarations set a value for the same element/property combination. Inheritance, initialization: mechanisms that are applied when no declarations try to set a the value for an element/property combination. Relevant specification: CSS Cascading and Inheritance Level 3 (W3C Recommendation, 11 February 2021) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 116 / 155 Cascade (1) Several different declarations can set the value of the same variable. These declarations can be of different origins. The cascade is the process during which it is determined which declaration sets the value of a given property of a given element. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 117 / 155 Cascade (2) The cascade determines the cascaded value of a property for an element as follows: The declarations that set the value of a property for the element are identified and collected. Remember that these declarations are provided by style rules or the style HTML attribute. These declarations are sorted by decreasing origin. Declarations of the same origin are sorted by decreasing specificity. In case of equal specificity the last declaration in document order wins. The value of the property is set by the first declaration according to this order. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 118 / 155 Rule Ordering (1) The ordering of style rules may be significant. The ordering is significant when more than one style rule with the same specificity applies to an element. In this case, the last declaration in document order wins. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 119 / 155 Rule Ordering (2) For example, the first two rules will never be taken into account here: a:active { color: red } a:hover { color: green } a:visited { color: black } a:link { color: blue } The correct order of these rules is the following (the first two rules are interchangeable): a:visited { color: black } a:link { color: blue } a:hover { color: green } a:active { color: red } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 120 / 155 Specified Value The specified value the value of a given property that the style sheet authors intended for that element. If the cascade results in a value, then that is the specified value. Otherwise, the specified value is determined by defaulting process. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 121 / 155 Defaulting When the cascade does not result in a value, the specified value must be found some other way. Inherited properties draw their defaults from their parent element through inheritance. All other properties take their initial value. Authors can explicitly request inheritance or initialization via the inherit and initial keywords. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 122 / 155 Computed Value (1) In general, a relative value is transformed to an absolute one when the computed value is determined. However, the computed value can be a percentage! The result of determining the computed value is a percentage, when the specified value is percentage that is relative to a quantity that depends on the layout of the document. Such percentages are transformed to absolute values when the used value is determined. The computed value is the value that is transferred from parent to child during inheritance. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 123 / 155 Computed Value (2) Example: CSS: section { font-size: 12px } h1 { font-size: 1.5em } HTML: Introduction The specified and the computed value of the font-size property of the section element is 12px. The specified value of the font-size property of the h1 element is 1.5em, it’s computed value is 1.5 × 12px = 18px. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 124 / 155 Used Value Computed values are determined without formatting the document. However, there are properties whose value may depend on the layout of the document (e.g., height, width). For such properties the used value is determined from the computed value based on the layout of the document. For all other properties, the used value is the same as the computed value. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 125 / 155 Actual Value The used value is transformed to the actual value based on constraints of the display environment. For example, the value of the font-size property may need adjustment based on the availability of fonts. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 126 / 155 Inheritance (1) Inheritance propagates property values from parent elements to their children. Some properties are inherited, this means that, unless the cascade results in a value, the value will be determined by inheritance. For each property, the relevant CSS specification defines whether it is inherited or not. For example, the font-family, font-style, font-variant, font-weight, font-size, and font properties are inherited. For example, the margin-top, margin-bottom, margin-right, margin-left, margin, and width properties are not inherited. If the cascaded value of a property is the inherit keyword, the inherited value becomes the property’s specified and computed values. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 127 / 155 Inheritance (2) Example: When no rules apply to the em HTML element below that set the value of the color property, the element inherits the value of the property from the span element (i.e., red). May the force be with you! Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 128 / 155 Inheritance (3) Example: When the style rule below applies, a hyperlink inherits the value of the color property from it’s parent. Thus, for example, the value of the color property of the a element in the div element is green. a:visited , a:link { color: inherit; } Click here: W3C Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 129 / 155 Initial Value Each property has an initial value, defined in the relevant CSS specification. The initial value can be defined to depend on the user agent. For example, the initial value of the background-color property is the transparent keyword. See: https://www.w3.org/TR/css-backgrounds-3/#the-background-color For example, the initial value of the color property depends on the user agent. See: https://www.w3.org/TR/css-color-3/#foreground If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value. If the cascaded value of a property is the initial keyword, the property’s initial value becomes its specified value. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 130 / 155 Assignment (1) Consider the following style rules in an author stylesheet associated with a HTML document: :lang( hu) { color: red } div > p { color: blue } #main > p.foo { color: yellow } #main :lang( hu) { color: green } div:lang( hu) p.foo:first-child { color: black } What is the color of the text in the p element? What is the color of this text? Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 131 / 155 Assignment (2) Consider the following style rules in an author stylesheet associated with a HTML document:.movies > ul > li:not(:first-child) { color: navy } h1 + ul li:first-child { color: gold } ul > :nth-child( 2n + 1) { color: purple } #ot li + :last-child { color: tomato } *:not( [class]) + ul:first-child > li:first-child { color: silver } What is the color of the text in each li element? The Original Trilogy A New Hope The Empire Strikes Back Return of the Jedi Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 132 / 155 Error Handling (1) See: CSS Syntax Module Level 3 (W3C Candidate Recommendation Draft, 24 December 2021) For a high-level overview of error handling, see subsection 2.2. Error Handling. CSS error handling (MDN) Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 133 / 155 Error Handling (2) The content of this slide is not shown. Instead, it is communicated orally in the lecture. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 134 / 155 Error Handling (3) The content of this slide is not shown. Instead, it is communicated orally in the lecture. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 135 / 155 Error Handling (4) Example: The style rule p { color: white background color: navy; font-family: sans-serif; unknown: 0; font-size: xxx; } is effectively the same as the following style rule: p { font-family: sans-serif; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 136 / 155 Error Handling (5) Example: The following style rule is ignored because :foobar is not a valid pseudo-class: a:hover , a:foobar { font-weight: bold; } However, the following style rule is not ignored completely: a:is(:hover , :foobar) { font-weight: bold; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 137 / 155 Vendor Prefix (1) The CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS. A CSS feature is a proprietary extension if it is meant for use in a closed environment accessible only to a single vendor’s user agent(s). A CSS feature is considered unstable until its specification has reached the Candidate Recommendation (CR) stage in the W3C process. See: CSS Snapshot 2023 – Implementations of Unstable and Proprietary Features (W3C) https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 138 / 155 Vendor Prefix (2) Keywords and property names beginning with '-' or '_' are reserved for vendor-specific extensions. An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. See: CSS 2.1 Specification – Syntax and basic data types – Vendor-specific extensions Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 139 / 155 Vendor Prefix (3) Once an unstable feature has stabilized (i.e., its specification reaches the Candidate Recommendation stage), support for the vendor-prefixed syntax should be removed from implementations. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 140 / 155 Vendor Prefix (4) Notable vendor prefixes include the following: Mozilla (Firefox): -moz- Microsoft (Internet Explorer, Microsoft Edge): -ms- Apple (Safari): -webkit- Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 141 / 155 Vendor Prefix (5) Vendor prefix trend: The content of this slide is not shown. Instead, it is communicated orally in the lecture. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 142 / 155 Vendor Prefix (6) Chromium does not use vendor prefixes. Instead, a browser setting (i.e., chrome://flags/#enable-experimentalweb-platform-features) is provided to enable/disable experimental features. See: https://www.chromium.org/blink/developer-faq/#will-we-see- a-chrome-vendor-prefix-now Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 143 / 155 Vendor Prefix (7) Proprietary extensions to CSS: Mozilla CSS extensions WebKit CSS extensions Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 144 / 155 Vendor Prefix (8) An example for a proprietary extension: ::-moz-list-number Example of use: li::-moz-list-number { font-style: italic; font-weight: bold; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 145 / 155 Vendor Prefix (9) An example for a once unstable feature: fit-content Relevant CSS specification: CSS Box Sizing Module Level 4 (W3C Working Draft, 20 May 2021) Browser support: https://caniuse.com/mdn-css_properties_width_fit-content Firefox supports the unprefixed standard form since version 94 released in 2021. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 146 / 155 Vendor Prefix (10) An example for a once unstable feature: fit-content A style rule that also works with earlier versions of Firefox:.fit-content { width: -moz-fit-content; width: fit-content; } Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 147 / 155 CSS Object Model (CSSOM) Specification: CSS Object Model (CSSOM) (W3C Working Draft, 26 August 2021) A set of APIs that allows access to and manipulation of style related state information and processes from JavaScript. Defines an object model is similar to the DOM. Further information: https://developer.mozilla.org/en- US/docs/Web/API/CSS_Object_Model Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 148 / 155 Working with the CSSOM Example: Suppose that the body { font-size: 16px; } style rule applies to the body element that has no style attribute. console.log(document.body.style.fontSize); // '' console.log(window.getComputedStyle(document.body).fontSize); // '16px' document.body.style.padding = '1.5em'; console.log(document.body.style.padding); // '1.5em' console.log(window.getComputedStyle(document.body).padding); // '24px' Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 149 / 155 CSS Houdini (1) Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. See: https://developer.mozilla.org/en-US/docs/Web/Houdini Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 150 / 155 CSS Houdini (2) Specifications: CSS-TAG Houdini Editor Drafts Status and support: Is Houdini ready yet? https://caniuse.com/?search=houdini Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 151 / 155 CSS Houdini (3) Further useful links: CSS Houdini Wiki Houdini.how Houdini Spellbook Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 152 / 155 Further Resources (1) References: MDN Web Docs – CSS CSS Reference CSS Reference – A free visual guide to CSS CSS Reference DevDocs CSS Reference Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 153 / 155 Further Resources (2) Surveys: The State of CSS Survey The State of CSS 2023 HTTP Archive. Web Almanac – Part I Chapter 1: CSS. 2022. Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 154 / 155 Further Resources (3) Demos and games: CSS Zen Garden CSSBattle CSS Diner Repository: https://github.com/flukeout/css-diner Fun and Games with CSS Repository: https://github.com/rupl/fun-games-css Unfolding the Box Model Repository: https://github.com/rupl/unfold Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) November 3, 2024 155 / 155