CSS miscellaneous

Question 1

quotes CSS property

Answer 1

The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.

Browsers insert quotation marks at the opening and closing of <q> elements and for the open-quote and close-quote values of the content property. Each opening or closing quote is replaced by one of the strings from the value of quotes, based on the depth of nesting, or, if quotes is explicity set to or otherwise resolves to auto, the quotation marks used are language dependent.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

Values

none - The open-quote and close-quote values of the content property produce no quotation marks, as if no-open-quote and no-close-quote were set, respectively.

auto - Quotation marks that are typographically appropriate for the inherited language (i.e. via the lang attribute set on the parent or other ancestor).

[<string> <string>]+ - Defines one or more pairs of quotation mark values for opening and closing quotes. In each pair, the first of each pair of quotes are used as the values for the open-quote and the second of each pair is the close-quote.

The first pair represents the quotation’s outer level. The second pair, if present, represents the first nested level. The next pair is used for doubly nested levels, and so on. If the depth of quote nesting is greater than the number of pairs, the last pair in the quotes value is repeated.

“quotes - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 14, 2024.

Question 2

content CSS property

Answer 2

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated “alt” text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.

Objects inserted using the content property are anonymous replaced elements.

Syntax

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";

/* <string> value */
content: "unparsed text";

/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/* attr() value linked to the HTML attribute value */
content: attr(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url(http://www.example.com/test.png);
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

Values

• One of two keywords — none or normal
<content-replacement> when replacing a DOM node. <content-replacement> is always an <image>.
• A <content-list> when replacing pseudo-elements and margin boxes. A content-list is a list of one or more anonymous inline boxes appearing in the order specified. Each <content-list> item is either contents or of type <string>, <image>, * <counter>, <quote>, <target>, or <leader()>.
  An optional alternative text value of a <string> or <counter>, preceded by a slash (/).

“content - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 15, 2024.

Question 3

scroll-snap-type

Answer 3

The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.

Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.

Syntax

/* No snapping */
scroll-snap-type: none;

/* Keyword values for snap axes */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional keyword values for snap strictness */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

Values

none - When the visual viewport of this scroll container is scrolled, it must ignore snap points.

x - The scroll container snaps to snap positions in its horizontal axis only.

y - The scroll container snaps to snap positions in its vertical axis only.

block - The scroll container snaps to snap positions in its block axis only.

inline - The scroll container snaps to snap positions in its inline axis only.

both - The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).

mandatory - The visual viewport of this scroll container must snap to a snap position if it isn’t currently scrolled.

proximity - The visual viewport of this scroll container may snap to a snap position if it isn’t currently scrolled. The user agent decides if it snaps or not based on scroll parameters. This is the default snap strictness if any snap axis is specified.

Note: If the content in the snap port is changed (e.g. added, moved, deleted, or resized) or the value of any scroll snap-related property (e.g. scroll-snap-type or scroll-margin) is changed, the scroll container will be resnapped according to the latest value of scroll-snap-type.

“scroll-snap-type - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved July 5, 2024.

Question 4

clamp() CSS function

Answer 4

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Note that using clamp() for font sizes,allows you to set a font-size that grows with the size of the viewport, but doesn’t go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

Syntax

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Parameters

The clamp(min, val, max) function accepts three comma-separated expressions as its parameters.

• min - The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.
• val - The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.
• max - The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

The expressions can be math functions (see calc() for more information), literal values, other expressions that evaluate to a valid argument type (like <length>), or nested min() and max() functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the calc() function itself. You may also use parentheses to establish computation order when needed.

Examples

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

“clamp() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved November 27, 2024.