caret-color - CSS: Cascading Style Sheets
the caret-color css property sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
...the caret appears in elements such as <input> or those with the contenteditable attribute.
... the caret is typically a thin vertical line that flashes to help make it more noticeable.
...And 9 more matches

scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that resizes an element in 3d space.
... because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.
... this scaling transformation is characterized by a three-dimensional vector.
...And 9 more matches

CSS Logical Properties and Values - CSS: Cascading Style Sheets
css logical properties and values is a module of css introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
... the module also defines logical properties and values for properties previously defined in css 2.1.
... logical properties define direction‐relative equivalents of their corresponding physical properties.
...And 8 more matches

vertical-align - CSS: Cascading Style Sheets
the vertical-align css property sets vertical alignment of an inline, inline-block or table-cell box.
... the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box.
... for example, it could be used to vertically position an <img> in a line of text: <p> top:<img style="vertical-align:top" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> middle:<img style="vertical-align:middle" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> bottom:<img style="vertical-align:bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> super:<img style="vertical-align:super" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> sub:<img style="vertical-align:sub" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://udn.realityr...
...And 8 more matches

font-optical-sizing - CSS: Cascading Style Sheets
the font-optical-sizing css property sets whether text rendering is optimized for viewing at different sizes.
... syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing.
... description optical sizing is enabled by default for fonts that have an optical size variation axis.
...And 7 more matches

scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale transforms individually and independently of the transform property.
... this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
... syntax /* keyword values */ scale: none; /* single values */ /* values of more than 1 make the element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.5; /* two values */ scale: 2 0.5; /* three values */ scale: 2 0.5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes.
...And 7 more matches

scan - CSS: Cascading Style Sheets
the scan css media feature can be used to test the scanning process (if any) utilized by the output device.
... the word scanning used in this context does not refer to an image scanner, such as one used to digitize a photograph.
... syntax the scan feature is specified as a single keyword value chosen from the list below.
...And 5 more matches

scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an element along the z-axis.
... this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the element are not conserved.
...And 5 more matches

:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
the :-moz-locale-dir(ltr) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed left-to-right.
... this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr".
... note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale.
...And 4 more matches

:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
the :-moz-locale-dir(rtl) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed right-to-left.
... this is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "rtl".
... note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale.
...And 4 more matches

scaleX() - CSS: Cascading Style Sheets
the scalex() css function defines a transformation that resizes an element along the x-axis (horizontally).
... it modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the element are not conserved.
...And 4 more matches

scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an element along the y-axis (vertically).
... it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the element are not conserved.
...And 4 more matches

RTCIceCandidateStats.localCandidateId - Web APIs
the rtcicecandidatepairstats property localcandidateid is a string that uniquely identifies the local ice candidate which was analyzed to generate the rtcicecandidatestats used to compute the statistics for this pair of candidates.
... syntax localcandidateid = rtcicecandidatepairstats.localcandidateid; value a domstring giving a unique identifier for the local rtcicecandidate for the connection described by this rtcicecandidatepairstats object.
... this candidate is the source of one of the two rtcicecandidatestats objects that were used to compute the contents of this rtcicecandidatepairstats object.
...And 2 more matches

-webkit-touch-callout - CSS: Cascading Style Sheets
the -webkit-touch-callout css property controls the display of the default callout shown when you touch and hold a touch target.
... when a target is touched and held on ios, safari displays a callout information about the link.
... /* keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed.
...And 2 more matches

Intl.getCanonicalLocales() - JavaScript
the intl.getcanonicallocales() method returns an array containing the canonical locale names.
... duplicates will be omitted and elements will be validated as structurally valid language tags.
... syntax intl.getcanonicallocales(locales) parameters locales a list of string values for which to get the canonical locale names.
...And 2 more matches

CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapturemediastreamtrack canvas read-only property returns the htmlcanvaselement from which frames are being captured.
... syntax var elt = stream.canvas; value an htmlcanvaselement indicating the canvas which is the source of the frames being captured.
... example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream ...
... // obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastreamtrack.canvas' in that specification.

grayscale() - CSS: Cascading Style Sheets
the grayscale() css function converts the input image to grayscale.
... syntax grayscale(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.
... a value of 100% is completely grayscale, while a value of 0% leaves the input unchanged.
... examples grayscale(0) /* no effect */ grayscale(.7) /* 70% grayscale */ grayscale(100%) /* completely grayscale */ specifications specification status filter effects module level 1the definition of 'grayscale()' in that specification.

::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="search" which clears away the current value of the <input> element.
... syntax selector::-webkit-search-cancel-button specifications not part of any standard.

Using the application cache - HTML: Hypertext Markup Language
using this application cache feature is highly discouraged; it’s in the process of being removed from the web platform.
... as of firefox 44+, when appcache is used to provide offline support for a page, a warning message displays in the console advising developers to use service workers instead (bug 1204581).
... introduction html5 provides an application caching mechanism that lets web applications run offline.
...And 110 more matches

Creating localizable web applications
an important step of developing a web application or creating web content is making sure that it can be localized.
... listed below are good practices and recommendations that should be followed in order to make your content easily localizable.
...in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity.
...And 89 more matches

Variable fonts guide - CSS: Cascading Style Sheets
variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
... in such a scenario, in order to use a typeface for typical use on a site for body copy you would need at least four files: regular, italic, bold, and bold italic.
... if you wanted to add more weights, like a lighter one for captions or a heavier one for extra emphasis, that would mean several more files.
...And 50 more matches

Cascade and inheritance - Learn web development
overview: building blocks next the aim of this lesson is to develop your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to html and how conflicts are resolved.
... while working through this lesson may seem less immediately relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on!
... we encourage you to work through this section carefully, and check that you understand the concepts before moving on.
...And 49 more matches

Application cache implementation overview
loading a top level document from offline cache this happens in nshttpchannel::opencacheentry().
... all top level document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload().
... channels having that flag set are searching for nsiapplicationcache object prior inspecting normal http cache.
...And 49 more matches

<color> - CSS: Cascading Style Sheets
a <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.
... a <color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
... note: although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device.
...And 43 more matches

text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text.
... it can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
... it also can help improve legibility for ruby.
...And 42 more matches

nsIApplicationCache
netwerk/base/public/nsiapplicationcache.idlscriptable this interface represents an application cache, which stores resources for offline use.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries.
... each entry in the cache can be marked with a set of types, specified in the constants section.
...And 40 more matches

NSS Certificate Download Specification
this document describes the data formats used by nss 3.x for installing certificates.
... data formats nss can accept certificates in several formats.
... in all cases the certificates are x509 version 1, 2, or 3.
...And 37 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
...this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together.
... you can read more about the relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.
...And 37 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in spring of 2017, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have css grid layout support in the public versions of firefox, chrome, opera, safari and edge.
...this is no longer an experimental specification, and you are safe to use it in production.
...this early specification did not contain all of the properties and values that the up-to-date specification has.
...And 37 more matches

Color picker tool - CSS: Cascading Style Sheets
<div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-pic...
...r-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; ...
... text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "s...
...And 36 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
we’ll find out which specifications you also need to take notice of if you want to learn flexbox, and find out why flexbox is different to some other modules.
... note: css versions 1 and 2 were a single monolithic specification where all of css was defined in one large document.
... as css became a more feature rich language, maintaining one huge specification became problematic, with different parts of css moving on at different speeds.
...And 36 more matches

Using media queries - CSS: Cascading Style Sheets
multiple queries can be combined in various ways by using logical operators.
... media queries are case-insensitive.
... media types media types describe the general category of a device.
...And 36 more matches

OpenType font features guide - CSS: Cascading Style Sheets
in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages.
... in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features.
... caution: there are many css attributes defined to leverage font features, but unfortunately many are not fully implemented.
...And 35 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in addition to the ability to place items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items.
... you can see auto-placement in action in the simplest of ways by creating a grid on a set of items.
...wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...And 35 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
grids can be used to lay out major page areas or small user interface elements.
... this article introduces the css grid layout and the new terminology that is part of the css grid layout level 1 specification.
... a grid is a set of intersecting horizontal and vertical lines defining columns and rows.
...And 35 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
to round off this set of guides to css grid layout, i am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout.
... we will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement.
... as you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout.
...And 35 more matches

Using CSS gradients - CSS: Cascading Style Sheets
you can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient()), and conic (created with the conic-gradient() function).
... you can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.
... gradients can be used anywhere you would use an <image>, such as in backgrounds.
...And 34 more matches

Localization technical reviews
this guide provides details on what a localization technical review is, what criteria are used for the technical reviews, and the process for requesting one and following its progress.
... the technical review process we use for new localizations can be confusing for any trying to start a new localization.
...this ensures that every user who downloads your localized mozilla application receives all of your hard work in a functional product.
...And 33 more matches

calICalendarView - Archive of obsolete content
summary an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.
... because of this close association between methods and attributes on the one hand, and content on the other, calicalendarview implementations are particularly well suited to xbl.
... there is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of dom nodes, even non-anonymous xul nodes.
...And 31 more matches

Using CSS animations - CSS: Cascading Style Sheets
animations consist of two components, a style describing the css animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
... there are three key advantages to css animations over traditional script-driven animation techniques: they’re easy to use for simple animations; you can create them without even having to know javascript.
...simple animations can often perform poorly in javascript (unless they’re well made).
...And 31 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
the two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid.
...two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts.
...i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.
...And 31 more matches

filter - CSS: Cascading Style Sheets
the filter css property applies graphical effects like blur or color shift to an element.
...you can also reference an svg filter with a url to an svg filter element.
... syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference...
...And 31 more matches

Grid template areas - CSS: Cascading Style Sheets
when you use css grid layout you always have lines, and this can be a straightforward way to place items on your grid.
... however, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement.
...you will see very quickly why we sometimes call this the ascii-art method of grid layout!
...And 30 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
flex-shrink: how much negative free space can be removed from this item?
...here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.
... there is a concept in css of min-content and max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit.
...And 29 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
one of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time.
... it enabled proper vertical alignment, so we can at last easily center a box.
... in this guide, we will take a thorough look at how the alignment and justification properties work in flexbox.
...And 28 more matches

CSS values and units - CSS: Cascading Style Sheets
depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units.
...css identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.
... in the css specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a <custom-ident>, <string>, or both.
...And 28 more matches

display - CSS: Cascading Style Sheets
some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification.
... see the table at the end of this document for all of the individual specifications.
...keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout.
...And 28 more matches

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
the amazing netscape fish cam page has been restructured and restyled for the new millennium, ditching tables for strong and accessible markup.
...i was privileged enough to have that chance recently: i was asked to redesign the amazing netscape fish cam page for a new millennium.
... to put that in perspective, i remember when the fish cam page first appeared and word of it circulated around the internet.
...And 26 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
in this article we will take a look at ways in which you can change the visual order of your content when using flexbox.
... we will also consider the implications of reordering items from an accessibility point of view.
... reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line.
...And 26 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing web development for more years than we care to remember might consider that css grid is a little bit like using “tables for layout”.
...this had some advantages over the “css positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display.
...sites such as the css zen garden showcased this ability.
...And 24 more matches

Value definition syntax - CSS: Cascading Style Sheets
in addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).
...a component can be a keyword, some characters considered as a literal, or a value of a given css data type or of another css property.
... the specific case of inherit, initial and unset all css properties accept the keywords inherit, initial and unset, that are defined throughout css.
...And 24 more matches

background-size - CSS: Cascading Style Sheets
the image can be left to its natural size, stretched, or constrained to fit the available space.
... using a width value only, in which case the height defaults to auto.
... using both a width and a height value, in which case the first sets the width and the second sets the height.
...And 24 more matches

cursor - CSS: Cascading Style Sheets
the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
... for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
... more than one <url> may be provided as fallbacks, in case some cursor image types are not supported.
...And 24 more matches

writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
... syntax /* keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below.
... vertical-rl for ltr scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the left of the previous line.
...And 24 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in this article we will fully explore how this fundamental feature of the specification works.
... starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines.
... a basic example as a very simple example we can take a grid with 3 column tracks and 3 row tracks.
...And 23 more matches

Overview of CSS Shapes - CSS: Cascading Style Sheets
the css shapes level 1 specification describes geometric shapes in css.
... they are, in level 1 of the specification, designed to be applied to floated items.
... this article provides an overview of what you can do with shapes.
...And 23 more matches

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
tutorial: show allocations per call path this page shows how to use the debugger api to show how many objects a web page allocates, sorted by the function call path that allocated them.
...components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(window); (function () { // the debugger we'll use to observe a tab's allocation.
... window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant.
...And 22 more matches

Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-image values.
... upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </...
... <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-checkbox" data-topic='slice-fill'></div> </div> </div> <!-- border-image-width --> <div id="border-width-control" class="category"> <div ...
...And 22 more matches

Block and inline layout in normal flow - CSS: Cascading Style Sheets
normal flow is defined in the css 2.1 specification, which explains that any boxes in normal flow will be part of a formatting context.
... they can be either block or inline, but not both at once.
... the behaviour of elements which have a block or inline formatting context is also defined in this specification.
...And 22 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level 3 which is the same standard flexbox uses for aligning items in its flex container.
... this specification details how alignment should work in all the different layout methods.
... layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints).
...And 22 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="pr...
...r-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; ...
... text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui slider */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; ...
...And 22 more matches

Localization Use Cases
this article documents a few opportunities to improve the localization of gaia (the ui layer of firefox os) by using l20n.
... in all presented examples, we try to show the existing code, explain the problem from the localizers' or developers' perspective, and suggest a solution.
... declensions in gaia's browser app, there's an about-browser string defined as follows in apps/browser/locales/browser: about-browser=about {{browserbrandshortname}} problem definition in many inflected languages (e.g.
...And 21 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties.
...those names can be anything you like.
... .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number.
...And 21 more matches

Visual formatting model - CSS: Cascading Style Sheets
much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information.
... when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications.
...user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.
...And 21 more matches

nsIApplicationCacheService
netwerk/base/public/nsiapplicationcacheservice.idlscriptable this interface manages the set of application cache groups that manage offline resources for web applications.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void cacheopportunistically(in nsiapplicationcache cache, in acstring key); nsiapplicationcache chooseapplicationcache(in acstring key); nsiapplicationcache createapplicationcache(in acstring group); void deactivategroup(in acstring group); nsiapplicationcache getactivecache(in acstring group); nsiapplicationcache getapplicationcache(in acstring clientid); void getgroups([optional] out unsigned long count, [array, size_is(count), retval] out string groupids); methods cacheopportunistically() flags the specified key as one that should be cached opportunistically.
... note: this method should propagate the entry to other application caches with the same opportunistic namespace; however, this is not currently implemented.
...And 20 more matches

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
the history of flexbox as with all css specifications the flexbox specification went through a large number of changes before it became the candidate recommendation that we have today.
... as a candidate recommendation we should not see large changes at this point to the spec, however this has not been the case with past flexbox iterations.
...however, prefixes ultimately were used in production code, and changes to the experimental specification caused people to need to update their sites to keep up.
...And 20 more matches

Subgrid - CSS: Cascading Style Sheets
level 2 of the css grid layout specification includes a subgrid value for grid-template-columns and grid-template-rows.
... this guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature.
... introduction to subgrid when you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created.
...And 20 more matches

<length> - CSS: Cascading Style Sheets
lengths can be used in numerous css properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
...depending on the unit, this can be the size of a specific character, the line height, or the size of the viewport.
... note: these units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.
...And 20 more matches

position - CSS: Cascading Style Sheets
the top, right, bottom, and left properties determine the final location of positioned elements.
...its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
...it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block.
...And 20 more matches

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
... content categories flow content, phrasing content, embedded content, palpable content.
... implicit aria role no corresponding role permitted aria roles any dom interface htmlcanvaselement attributes this element's attributes include the global attributes.
...And 20 more matches

How to enable locale switching in a XULRunner application - Archive of obsolete content
this article is for developers who have localised their xul application using dtd entity files and want to provide their users with a mechanism to switch the locale in the application itself.
... normally the application locale is inherited from the os environment of the host system, however there are situations when you might want to give users the option to override the default setting and choose a different locale.
...modify the application preferences first, you need to tell xulrunner that your application wishes to ignore the default os locale and that it will do its own choosing instead.
...And 19 more matches

Notification.Notification() - Web APIs
the notification() constructor creates a new notification object instance, which represents a user notification.
... syntax var mynotification = new notification(title, options); parameters title defines a title for the notification, which is shown at the top of the notification window.
... options optional an options object containing any custom settings that you want to apply to the notification.
...And 19 more matches

Box-shadow generator - CSS: Cascading Style Sheets
<div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> ...
... <div class="block info"> <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> </div> </div> </div> </div> <div class="wrap-right"> <div id="shadow_properties" class="category"> <div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> inset </div> <div class="ui-checkbox" data-topic='inset'></div> </div> <div class="slidergroup"> <div cl...
...n="-100" data-max="100" data-step="1" data-value="50"> </div> <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> </div> </div> </div> <div id="element_properties" class="category"> <div class="title"> class element properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> border </div> <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> </div> <div id="z-index" class=...
...And 19 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
this document details the general concepts found in the specification.
... older alignment methods css traditionally had very limited alignment capabilities.
... we were able to align text using text-align, center blocks using auto margins, and in table or inline-block layouts using the vertical-align property.
...And 19 more matches

Using CSS transitions - CSS: Cascading Style Sheets
instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
...with css transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
... animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
...And 19 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
using the display property we can switch between block and inline.
...only when the value of display is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications.
...you can see this if you take a <span> — normally an inline-level element — and apply display: flex to it.
...And 18 more matches

<transform-function> - CSS: Cascading Style Sheets
transformation functions can rotate, resize, distort, or move an element in 2d or 3d space.
... rotatey() rotates an element around the vertical axis.
... scaling (resizing) scale() scales an element up or down on the 2d plane.
...And 18 more matches

CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling transformation to the canvas units horizontally and/or vertically.
... by default, one unit on the canvas is exactly one pixel.
... a scaling transformation modifies this behavior.
...And 17 more matches

@media - CSS: Cascading Style Sheets
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
... note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface.
... description media types media types describe the general category of a device.
...And 17 more matches

Specificity - CSS: Cascading Style Sheets
how is specificity calculated?
...(the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
...although technically !important has nothing to do with specificity, it interacts directly with it.
...And 17 more matches

Viewport concepts - CSS: Cascading Style Sheets
on larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
... in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
... to recap, the viewport is basically the part of the document that is currently visible.
...And 17 more matches

<caption>: The Table Caption element - HTML: Hypertext Markup Language
the html <caption> element specifies the caption (or title) of a table.
... content categories none.
... tag omission the end tag can be omitted if the element is not immediately followed by ascii whitespace or a comment.
...And 17 more matches

calICalendarViewController - Archive of obsolete content
summary a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete items.
... implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included.
... calendar/base/public/calicalendarviewcontroller.idlscriptable please add a summary to this article.
...And 16 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
if you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap, or use the shorthand flex-flow with values of row wrap or column wrap.
...as the items can grow, they will expand larger than 160 px in order to fill each row completely.
... we can see the same thing happening with columns.
...And 16 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode.
... layout properties should work in the same way in vertical writing modes.
... the writing modes specification the css writing modes level 3 specification defines the impact a change the document writing mode has on flow layout.
...And 16 more matches

font-variant - CSS: Cascading Style Sheets
you can also set the css level 2 (revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.
... constituent properties this property is a shorthand for the following css properties: font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /* global values */ font-variant: inherit; font-variant: initial; font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal.
... longhand properties of font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.
...And 16 more matches

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document.
... this can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications.
... basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align.
...And 15 more matches

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
custom properties (sometimes referred to as css variables or cascading variables) are entities defined by css authors that contain specific values to be reused throughout a document.
... custom properties are subject to the cascade and inherit their value from their parent.
... basic usage declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid css value.
...And 15 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
compatibility note: if you wish to use this property on websites, you should test it very carefully.
...kbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>lorem</div> firefox chrome safari edge no special styling is applied.
... menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
...And 15 more matches

<custom-ident> - CSS: Cascading Style Sheets
it is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.
... syntax the syntax of <custom-ident> is similar to css identifiers (such as property names), except that it is case-sensitive.
... it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a backslash, \), a unicode character (in the format of a backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
...And 15 more matches

will-change - CSS: Cascading Style Sheets
these kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
... values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /* global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements.
... the browser already tries as hard as it can to optimize everything.
...And 15 more matches

Intl.Locale.prototype.caseFirst - JavaScript
the intl.locale.prototype.casefirst property is an accessor property that returns whether case is taken into account for the locale's collation rules.
... description a locale's collation rules are used to determine how strings are ordered in that locale.
... certain locales use a character's case (uppercase or lowercase) in the collation process.
...And 15 more matches

Using feature queries - CSS: Cascading Style Sheets
it doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do.
...there are often additional values added to properties in css, and so the fact that you have to test for property and value means that you can detect support for these values.
... testing for lack of support in addition to asking the browser if it supports a feature, you can test for the opposite by adding in the not keyword: @supports not (property: value) { css rules to apply } the css inside the following example feature query will run if the browser does not support row-gap.
...And 14 more matches

CSS Containment - CSS: Cascading Style Sheets
the aim of the css containment specification is to improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page.
... if the browser knows that a part of the page is independent, rendering can be optimized and performance improved.
... the specification defines a single css property contain.
...And 14 more matches

conic-gradient() - CSS: Cascading Style Sheets
because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... why is it called a "conic" gradient?
... if the color stops are much lighter on one side than the other, it can look like a cone from above.
...And 14 more matches

content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(valu...
...e string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated.
...this value can be any number of text characters.
...And 14 more matches

<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations.
... the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation.
... depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation.
...And 14 more matches

image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm.
... the user agent will scale an image when the page author specifies dimensions other than its natural size.
... scaling may also occur due to user interaction (zooming).
...And 14 more matches

margin-left - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse.
... this is called margin collapsing.
... in the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.
...And 14 more matches

pointer-events - CSS: Cascading Style Sheets
the pointer-events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
...in these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
...the element can only be the target of a pointer event when the visibility property is set to visible and e.g.
...And 14 more matches

Shorthand properties - CSS: Cascading Style Sheets
using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.
... the css specification defines shorthand properties to group the definition of common properties acting on the same theme.
...similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.
...And 13 more matches

font-weight - CSS: Cascading Style Sheets
note that only four font weights are considered for relative weight calculation; see the meaning of relative weights section below.
...note that only four font weights are considered for relative weight calculation; see the meaning of relative weights section below.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
...And 13 more matches

list-style-type - CSS: Cascading Style Sheets
moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.
... the cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.
...01, 02, 03, … 98, 99 lower-roman lowercase roman numerals e.g.
...And 13 more matches

Intl.Locale.prototype.calendar - JavaScript
the intl.locale.prototype.calendar property is an accessor property which returns the type of calendar used in the locale.
... description the calendar property returns the part of the locale that indicates the locale's calendar era.
... while most of the world uses the gregorian calendar, there are several regional calendar eras used around the world.
...And 13 more matches

AuthenticatorAssertionResponse.authenticatorData - Web APIs
the authenticatordata property of the authenticatorassertionresponse interface returns an arraybuffer containing information from the authenticator such as the relying party id hash (rpidhash), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator.
... syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least 37 bytes, containing the following fields: rpidhash (32 bytes) - a sha256 hash of the relying party id that was seen by the browser.
... flags (1 bytes) - a bitfield that indicates various attributes that were asserted by the authenticator.
...And 12 more matches

Coordinate systems - CSS: Cascading Style Sheets
when specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in algebra), its position is defined relative to a fixed point in the context.
... this fixed point is called the origin.
...these are generally only different in terms of where their origin is located.
...And 12 more matches

Basic Shapes - CSS: Cascading Style Sheets
css shapes can be defined using the <basic-shape> type, and in this guide i’ll explain how each of the different values accepted by this type work.
...you can see in the screenshot that the shape is being defined with reference to that part of the box model.
... you can add the various box values after your basic shape definition.
...And 12 more matches

font-size - CSS: Cascading Style Sheets
description there are several ways to specify the font size, including with keywords or numerical values for pixels or ems.
...by setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.
... font sizing settings can also be used in combination.
...And 12 more matches

margin-right - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse.
... this is called margin collapsing.
...its value can be positive, zero, or negative.
...And 12 more matches

RTCIceCandidate.candidate - Web APIs
the read-only property candidate on the rtcicecandidate interface returns a domstring describing the candidate in detail.
... most of the other properties of rtcicecandidate are actually extracted from this string.
... this property can be configured by specifying the value of the candidate property when constructing the new candidate object using rtcicecandidate().
...And 11 more matches

@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
...this can be a url to a remote font file location or the name of a font on the user's computer.
... to provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
...And 11 more matches

Alternative style sheets - CSS: Cascading Style Sheets
the web page can also provide its own user interface to let the user switch styles.
... try it out click here for a working example you can try out.
... details any stylesheet in a document falls into one of the following categories: persistent (no rel="alternate", no title=""): always applies to the document.
...And 11 more matches

background-image - CSS: Cascading Style Sheets
if a specified image cannot be drawn (for example, when the file denoted by the specified uri cannot be loaded), browsers handle it as they would a none value.
...if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.
... to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images.
...And 11 more matches

clamp() - CSS: Cascading Style Sheets
the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... the expressions can be math functions (see calc() for more information), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>), or nested min() and max() functions.
... as math expressions, so you can use addition, subtraction, multiplication and division without using the calc() function itself.
...And 11 more matches

cross-fade() - CSS: Cascading Style Sheets
the css cross-fade() function can be used to blend two or more images at a defined transparency.
... it can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.
... syntax important: the specification and current implementations have different syntaxes.
...And 11 more matches

image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
...)where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...the spacial dimension definition in the media specification indicates that percentages will be supported as well: xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ the image fragments can be used in url() notation as well.
...And 11 more matches

linear-gradient() - CSS: Cascading Style Sheets
if specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom).
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... the starting point is the location on the gradient line where the first color begins.
...And 11 more matches

mask-size - CSS: Cascading Style Sheets
the size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
... a <bg-size> can be specified in one of three ways: using the keyword contain using the keyword cover using width and height values to specify a size using width and height, you can supply one or two values: if only one value is given it sets the width, with the height set to auto.
... each value can be a <length>, a <percentage>, or auto.
...And 11 more matches

String.prototype.toLocaleUpperCase() - JavaScript
the tolocaleuppercase() method returns the calling string value converted to upper case, according to any locale-specific case mappings.
... syntax str.tolocaleuppercase() str.tolocaleuppercase(locale) str.tolocaleuppercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings.
... if multiple locales are given in an array, the best available locale is used.
...And 11 more matches

RTCIceCandidate.RTCIceCandidate() - Web APIs
the rtcicecandidate() constructor creates and returns a new rtcicecandidate object, which can be configured to represent a single ice candidate.
... syntax candidate = new rtcicecandidate([candidateinfo]); parameters candidateinfo optional an optional rtcicecandidateinit object providing information about the candidate; if this is provided, the candidate is initialized configured to represent the described candidate.
... return value a newly-created rtcicecandidate object, optionally configured based on the specified object based on the rtcicecandidateinit dictionary.
...And 10 more matches

Styling Columns - CSS: Cascading Style Sheets
as column boxes created inside multicol containers are anonymous boxes, there is little we can do to style them.
... however, we do have a few things that we can do.
... can i style the column boxes?
...And 10 more matches

Flow Layout and Overflow - CSS: Cascading Style Sheets
when there is more content than can fit into a container, an overflow situation occurs.
... giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example: the content goes into the box.
...this is why we can see the overflow content.
...And 10 more matches

clear - CSS: Cascading Style Sheets
vertical margins between two floated elements on the other hand will not collapse.
...this affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
...this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it.
...And 10 more matches

font-family - CSS: Cascading Style Sheets
values are separated by commas to indicate that they are alternatives.
... the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
...for example, "times" and "helvetica" are font families.
...And 10 more matches

font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.7; /* global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two forms: normal text is laid out using default settings.
...each setting is always one or more pairs consisting of a <string> of 4 ascii characters followed by a <number> indicating the axis value to set.
...the <number> can be fractional or negative, depending on the value range available in your font, as defined by the font designer.
...And 10 more matches

max-block-size - CSS: Cascading Style Sheets
that is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width.
... this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.
... any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal).
...And 10 more matches

min() - CSS: Cascading Style Sheets
the min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px).
...think of the min() value as providing the maximum value a property can have.
...And 10 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... a repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops.
...browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.
...And 10 more matches

CSS: Cascading Style Sheets
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
... css among the core languages of the open web and is standardized across web browsers according to the w3c specification.
... previously development of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation.
...And 10 more matches

JS_GetLocaleCallbacks
get and set locale specific string conversion and error message callbacks.
... syntax jslocalecallbacks * js_getlocalecallbacks(jsruntime *rt); void js_setlocalecallbacks(jsruntime *rt, jslocalecallbacks *callbacks); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...in a js_threadsafe build, the caller must be in a request on this jscontext.
...And 9 more matches

RTCIceCandidateInit.candidate - Web APIs
the optional property candidate in the rtcicecandidateinit dictionary specifies the value of the rtcicecandidate object's candidate property.
... value a domstring describing the properties of the candidate, taken directly from the sdp attribute "candidate".
... the candidate string specifies the network connectivity information for the candidate.
...And 9 more matches

::first-letter (:first-letter) - CSS: Cascading Style Sheets
some languages have digraphs that are always capitalized together, like the ij in dutch.
... in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element.
...in that case, ::first-letter will match the first letter of this generated content.
...And 9 more matches

src - CSS: Cascading Style Sheets
ps://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); values <url> [ format( <string># ) ]?
... <font-face-name> specifies the name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family.
... the name can optionally be enclosed in quotes.
...And 9 more matches

@import - CSS: Cascading Style Sheets
syntax @import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; where: url is a <string> or a <url> representing the location of the resource to import.
...note that the url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g.
... chrome://communicator/skin/).
...And 9 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
run an animation again the css animations specification doesn't offer a way to run an animation again.
... there's no magic resetanimation() method on elements, and you can't even just set the element's animation-play-state to "running" again.
... note that because of this, the box doesn't start with any animation effects in place, so it won't be animating.
...And 9 more matches

The stacking context - CSS: Cascading Style Sheets
this occurs because these elements have special properties which cause them to form a stacking context.
... element with a opacity value less than 1 (see the specification for opacity).
...stacking contexts are treated atomically as a single unit in the parent stacking context.
...And 9 more matches

Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
firefox initially implemented an early version of the scroll snap specification, called scroll snap points.
... in firefox 68 the new version of the specification will be shipped and these old properties removed.
... if you have only used the old firefox implementation of the specification, with the properties that are detailed in scroll snap points, you should update your code to use the new specification.
...And 9 more matches

Shapes From Images - CSS: Cascading Style Sheets
in this guide we will take a look at how we can create a shape from an image file with an alpha channel or even from a css gradient.
...rather than drawing a path with a complex polygon in css, you can create the shape in a graphics program and then use the path created by the pixels less opaque than a threshold value.
...pixels that are more opaque than this value will be used to calculate the area of the shape.
...And 9 more matches

Using CSS transforms - CSS: Cascading Style Sheets
these transformations include rotation, skewing, scaling, and translation both in the plane and in the 3d space.
... only elements positioned by the box model can be transformed.
...by default, it is at the center of the element and can be moved.
...And 9 more matches

background-attachment - CSS: Cascading Style Sheets
syntax /* keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; the background-attachment property is specified as one of the keyword values from the list below.
...(this is not compatible with background-clip: text.) local the background is fixed relative to the element's contents.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
...And 9 more matches

color - CSS: Cascading Style Sheets
syntax /* keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% ...
...it can't be a <gradient>, which is actually a type of <image>.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...And 9 more matches

contain - CSS: Cascading Style Sheets
the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.
... this allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the dom and not the entire page, leading to obvious performance benefits.
... this property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.
...And 9 more matches

perspective-origin - CSS: Cascading Style Sheets
syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point.
... it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the width of the element.
... y-position indicates the position of the ordinate of the vanishing point.
...And 9 more matches

revert - CSS: Cascading Style Sheets
the revert css keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
...it can be applied to any css property, including the css shorthand all.
... this removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.
...And 9 more matches

<string> - CSS: Cascading Style Sheets
most characters can be represented literally.
... all characters can also be represented with their respective unicode code points in hexadecimal, in which case they are preceded by a backslash (\).
... importantly, certain characters which would otherwise be invalid can be escaped with a backslash.
...And 9 more matches

text-rendering - CSS: Cascading Style Sheets
one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family).
... syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
...certain aspects of fonts — such as kerning — don't scale linearly.
...And 9 more matches

touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
...an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture.
... by explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures.
...And 9 more matches

transform - CSS: Cascading Style Sheets
the transform css property lets you rotate, scale, skew, or translate an element.
...in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.
... only transformable elements can be transformed.
...And 9 more matches

url() - CSS: Cascading Style Sheets
the url() function can be passed as a parameter of another css functions, like the attr() function.
... depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet.
... the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls.
...And 9 more matches

String.prototype.toLocaleLowerCase() - JavaScript
the tolocalelowercase() method returns the calling string value converted to lower case, according to any locale-specific case mappings.
... syntax str.tolocalelowercase() str.tolocalelowercase(locale) str.tolocalelowercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings.
... if multiple locales are given in an array, the best available locale is used.
...And 9 more matches

application/http-index-format specification - Archive of obsolete content
the application/http-index-format file format is an attempt to provide a generic, extensible file listing format that is principly machine readable.
...all lines must be terminated by a carriage return followed by a line feed.
...any illegal characters must be escaped via the url escaping syntax defined by rfc 1738.
...And 8 more matches

nsIApplicationCacheChannel
netwerk/base/public/nsiapplicationcachechannel.idlscriptable this interface is implemented by communication channels that support application caches.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsiapplicationcachecontainer last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void markofflinecacheentryasforeign(); attributes attribute type description chooseapplicationcache boolean when true, the channel will choose an application cache if one was not explicitly provided and none is available from the notification callbacks.
...exceptions thrown ns_error_already_opened if set after calling asyncopen() on the channel.
...And 8 more matches

:visited - CSS: Cascading Style Sheets
for privacy reasons, the styles that can be modified using this selector are very limited.
... styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.
...the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely.
...And 8 more matches

font-weight - CSS: Cascading Style Sheets
the font-weight property can separately be used to set how thick or thin characters in text should be displayed.
... for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
...And 8 more matches

@keyframes - CSS: Cascading Style Sheets
description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule.
... you can list the keyframe percentages in any order; they will be handled in the order they should occur.
...this can be used to animate an element from its initial state and back.
...And 8 more matches

@supports - CSS: Cascading Style Sheets
this is called a feature query.
... @supports (display: grid) { div { display: grid; } } @supports not (display: grid) { div { float: right; } } in javascript, @supports can be accessed via the css object model interface csssupportsrule.
...precedence of operators can be defined with parentheses.
...And 8 more matches

Consistent list indentation - CSS: Cascading Style Sheets
this often leads to frustration, because what works in one browser often doesn't have the same effect in another.
... for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them.
... in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.
...And 8 more matches

Inline formatting context - CSS: Cascading Style Sheets
in a vertical writing mode they would be laid out vertically starting at the top.
...the boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically.
... boxes forming a line are contained by a rectangular area called a line box.
...And 8 more matches

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
media queries can also be used to help users with disabilities understand your website better.
... reduced motion blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd).
... additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity.
...And 8 more matches

CSS reference - CSS: Cascading Style Sheets
use this css reference to browse an alphabetical index of all of the standard css properties, pseudo-classes, pseudo-elements, data types, and at-rules.
... you can also browse key css concepts and a list of selectors organized by type.
...t-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-be...
...And 8 more matches

Syntax - CSS: Cascading Style Sheets
the basic goal of the cascading stylesheet (css) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations.
...a property and value pair is called a declaration, and any css engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.
... both properties and values are case-insensitive by default in css.
...And 8 more matches

background-repeat - CSS: Cascading Style Sheets
a background image can be repeated along the horizontal and vertical axes, or not repeated at all.
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
... syntax /* keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* global values */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space roun...
...And 8 more matches

background - CSS: Cascading Style Sheets
ckground-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
...if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparentapplies toall elements.
...And 8 more matches

border-image-slice - CSS: Cascading Style Sheets
the above diagram illustrates the location of each region.
...these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
...it is discarded by default, but is used like a background image if the keyword fill is set.
...And 8 more matches

border-style - CSS: Cascading Style Sheets
this property is a shorthand for the following css properties: border-bottom-style border-left-style border-right-style border-top-style syntax /* keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* global values */ border-style: inherit; border-style: initial; border-style: unset; the border-style property may be specified using one, two, three, or four values.
...it can have the following values: none like the hidden keyword, displays no border.
...in the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
...And 8 more matches

font - CSS: Cascading Style Sheets
if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar.
... for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value.
... system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.).
...And 8 more matches

max() - CSS: Cascading Style Sheets
the max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px).
... think of the max() value as providing the minimum value a property can have.
...And 8 more matches

<position> - CSS: Cascading Style Sheets
the <position> (or <bg-position>) css data type denotes a two-dimensional coordinate used to set a location relative to an element box.
... if specified, an offset can be either a relative <percentage> value or an absolute <length> value.
... /* 1-value syntax */ keyword /* either the horizontal or vertical position; the other axis defaults to center */ value /* the position on the x-axis; the y-axis defaults to 50% */ /* 2-value syntax */ keyword keyword /* a keyword for each direction (the order is irrelevant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value ...
...And 8 more matches

text-decoration - CSS: Cascading Style Sheets
this means that if an element specifies a text decoration, then a child element can't remove the decoration.
... for example, in the markup <p>this text has <em>some emphasized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined.
... the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined.
...And 8 more matches

stroke-linecap - SVG: Scalable Vector Graphics
the stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
... note: as a presentation attribute stroke-linecap can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4...
...And 8 more matches

Displaying notifications (deprecated) - Archive of obsolete content
to see how to use the standard api, please read: using web notifications mobile only in gecko 2.0 available only in firefox mobile as of gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.
... for example, on android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.
... creating a notification the first thing you need to do is create the notification object by using the navigator.moznotification object's createnotification() method, as follows: var notification = navigator.moznotification.createnotification( "hey, check this out!", "this is a notification posted by " + "firefox 4.
...And 7 more matches

nsIApplicationCacheNamespace
netwerk/base/public/nsiapplicationcache.idlscriptable this interface represents an application cache namespace.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) application caches can store a set of namespace entries that affect loads from the application cache.
... if a load from the cache fails to match on an exact cache entry, the namespace entries are searched for a substring match.
...And 7 more matches

RTCPeerConnection.canTrickleIceCandidates - Web APIs
the read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which indicates whether or not the remote peer can accept trickled ice candidates.
... ice trickling is the process of continuing to send candidates after the initial offer or answer has already been sent to the other peer.
... this property is only set after having called rtcpeerconnection.setremotedescription().
...And 7 more matches

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.
... /* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
... no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction.
...And 7 more matches

-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
... high contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.
...And 7 more matches

size - CSS: Cascading Style Sheets
most of the time, this size corresponds to the target size of the printed page if applicable.
... size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions.
... syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page.
...And 7 more matches

Attribute selectors - CSS: Cascading Style Sheets
[attr|=value] represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (u+002d).
... [attr operator value i] adding an i (or i) before the closing bracket causes the value to be compared case-insensitively (for characters within the ascii range).
... [attr operator value s] adding an s (or s) before the closing bracket causes the value to be compared case-sensitively (for characters within the ascii range).
...And 7 more matches

Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-radius effects.
...7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px...
... 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; fon...
...And 7 more matches

Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
... this guide explains how the specification works with some common use case examples.
... the properties defined by the specification are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-width to an element, that element becomes a multi-column container, or multicol container for short.
...And 7 more matches

Using multi-column layouts - CSS: Cascading Style Sheets
</p> <p> excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
...if column-count is not also set, then the browser will automatically make as many columns as fit in the available width.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #wid { column-width: 100px; } result the exact details are described in the css3 specification.
...And 7 more matches

Shapes from box values - CSS: Cascading Style Sheets
the box values allowable as a shape value are: content-box padding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
... by using box values for shapes we can wrap our content around the edges defined by these values.
... in all of the examples below i am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.
...And 7 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries.
... mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track.
...once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.
...And 7 more matches

Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1...
... = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { ...
... // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ?
...And 7 more matches

background-position - CSS: Cascading Style Sheets
it can be defined using one to four values.
... if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position.
...thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container.
...And 7 more matches

border - CSS: Cascading Style Sheets
this is because the style defaults to none.
...importantly, border cannot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none.
...to make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side.
...And 7 more matches

box-sizing - CSS: Cascading Style Sheets
the box-sizing css property sets how the total width and height of an element is calculated.
... the box-sizing property can be used to adjust this behavior: content-box gives you the default css box-sizing behavior.
...this typically makes it much easier to size elements.
...And 7 more matches

break-inside - CSS: Cascading Style Sheets
we also have a <figure> containing an image and a caption.
... by default, it is possible for you to get a break between the image and its caption, which is not what we want.
... to avoid this, we have set break-inside: avoid on the <figure>, which causes them to always stay together.
...And 7 more matches

counters() - CSS: Cascading Style Sheets
the counters() css function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.
...it is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.
...the counters are rendered in the style indicated, defaulting to decimal if no style is specified.
...And 7 more matches

font-variant-ligatures - CSS: Cascading Style Sheets
res: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: contextual; /* <contextual-alt-values> */ font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligat...
... <historical-lig-values> these values control the ligatures used historically, in old books, like the german tz digraph being displayed ß.
...two values are possible: historical-ligatures activating these ligatures.
...And 7 more matches

<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... description css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster format.
...(in this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an svg or other vector format.
...And 7 more matches

<integer> - CSS: Cascading Style Sheets
integers can be used in numerous css properties, such as column-count, counter-increment, grid-column, grid-row, and z-index.
...the calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function.
...\35 escaped unicode characters are not allowed, even if they are an integer (here: 5).
...And 7 more matches

mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... the optional fill value, if used, can be placed anywhere in the declaration.
...for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
...And 7 more matches

resize - CSS: Cascading Style Sheets
syntax /* keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single keyword value from the list below.
... both the element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
... vertical the element displays a mechanism for allowing the user to resize it in the vertical direction.
...And 7 more matches

shape-outside - CSS: Cascading Style Sheets
this can be margin-box, border-box, padding-box, or content-box.
... <basic-shape> the float area is computed based on the shape created by of one of inset(), circle(), ellipse(), polygon(), or as added in the level 2 specification path().
... note: user agents must use the potentially cors-enabled fetch method defined by the html5 specification for all urls in a shape-outside value.
...And 7 more matches

text-align - CSS: Cascading Style Sheets
this means it works like vertical-align but in the horizontal direction.
... using a <string> value only, in which case the other value defaults to right.
... match-parent similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.
...And 7 more matches

text-underline-position - CSS: Cascading Style Sheets
this is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.
... left in vertical writing-modes, this keyword forces the line to be placed on the left side of the text.
... right in vertical writing-modes, this keyword forces the line to be placed on the right side of the text.
...And 7 more matches

Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used.
... message warning: date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead error type warning.
... the non-standard date.prototype.tolocaleformat method is deprecated and shouldn't be used anymore.
...And 7 more matches

Test your skills: The Cascade - Learn web development
the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on the cascade and inheritance.
... note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... in the example below see if you can match the image above.
...And 6 more matches

RTCIceTransport.getLocalCandidates() - Web APIs
the rtcicetransport method getlocalcandidates() returns an array of rtcicecandidate objects, one for each of the candidates that have been gathered by the local device during the current ice agent session.
... the local candidates are placed in this list by the ice agent prior to being delivered to the local client's code in an icecandidate event so that the client can forward the candidates to the remote peer.
... syntax localcandidates = rtcicetransport.getlocalcandidates(); parameters none.
...And 6 more matches

::after (:after) - CSS: Cascading Style Sheets
we can use these classes to add pseudo-elements to the end of paragraphs.
... html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
... we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a css :focus selector.
...And 6 more matches

::first-line (:first-line) - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used with the ::first-line pseudo-element: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family ...
... properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
...And 6 more matches

::placeholder - CSS: Cascading Style Sheets
::placeholder { color: blue; font-size: 1.5em; } only the subset of css properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
... syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...And 6 more matches

:checked - CSS: Cascading Style Sheets
/* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser.
...: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.
...And 6 more matches

:focus-visible - CSS: Cascading Style Sheets
(many browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs.
...=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
... <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline: 4px dashed darkorange; background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
...And 6 more matches

:target - CSS: Cascading Style Sheets
/* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
... html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this paragraph</i> using a url fragment.
...isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...And 6 more matches

:valid - CSS: Cascading Style Sheets
syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { po...
...sition: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } we set the <span>s to position: relative so that we can position the generated content relative to them.
... you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in.
...And 6 more matches

Spanning and Balancing Columns - CSS: Cascading Style Sheets
spanning the columns to cause an item to span across columns use the property column-span with a value of all.
... this will cause the element to span all of the columns.
... limitations of column-span in the current level 1 specification there are only two allowable values for column-span.
...And 6 more matches

Introduction to formatting contexts - CSS: Cascading Style Sheets
the basics of how they behave and how you can make use of these behaviors are also introduced.
... creating a new block formatting context the <html> element is not the only element capable of creating a block formatting context.
... any block-level element can be made to create a bfc by the application of certain css properties.
...And 6 more matches

Using CSS counters - CSS: Cascading Style Sheets
css counters let you adjust the appearance of content based on its location in a document.
... for example, you can use counters to automatically number the headings in a webpage.
...the same property can also be used to change its value to any specific number.
...And 6 more matches

Layout and the containing block - CSS: Cascading Style Sheets
most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case.
... if the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).
...contain: paint;) note: the containing block in which the root element (<html>) resides is a rectangle called the initial containing block.
...And 6 more matches

Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.
... media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied.
... media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query.
...And 6 more matches

Pseudo-classes - CSS: Cascading Style Sheets
for example, :hover can be used to change a button's color when the user's pointer hovers over it.
... note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
... syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector.
...And 6 more matches

Replaced elements - CSS: Cascading Style Sheets
the position of the replaced element can be affected using css, but not the contents of the replaced element itself.
... the only other impact css can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box.
... replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>.
...And 6 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
applications based on webkit or blink, such as safari and chrome, support a number of special webkit extensions to css.
...these properties will only work in webkit applications.
...r-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webki...
...And 6 more matches

all - CSS: Cascading Style Sheets
it can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.
... syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global keyword values.
... user origin rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
...And 6 more matches

animation - CSS: Cascading Style Sheets
ion | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="c...
...x; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('...
....animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var anim = animation[i]; if (btn.classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.classlist.contains('pause')) { anim.style.animationplaystate = 'paused'; togglebutton(btn, 'play'); } else { anim.classlist.remove('a' + (i + 1)); settimeout(function () { togglebutton(btn, i === 0 ?
...And 6 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... syntax /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle...
...And 6 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... syntax /* the corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* percentage values */ border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that cor...
...And 6 more matches

border-color - CSS: Cascading Style Sheets
each side can be set individually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.
... you can find more information about border colors in borders in applying color to html elements using css.
... constituent properties this property is a shorthand for the following css properties: border-bottom-color border-left-color border-right-color border-top-color syntax /* <color> values */ border-color: red; /* horizontal | vertical */ border-color: red #f015ca; /* top | vertical | bottom */ border-color: red rgb(240,30,50,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* global values */ border-color: inherit; border-color: initial; border-color: unset; the border-color property may be specified using one, two, three, or four values.
...And 6 more matches

border-image - CSS: Cascading Style Sheets
note: you should specify a separate border-style in case the border image fails to load.
... indeed, this is required according to the specification, although not all browsers implement this requirement.
... note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead.
...And 6 more matches

border-top-left-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
...And 6 more matches

border-top-right-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
...And 6 more matches

box-decoration-break - CSS: Cascading Style Sheets
values slice the element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page.
... note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction.
... see the css specification for details.
...And 6 more matches

font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /* global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.
... variable fonts variable fonts can offer a fine control over the degree to which an oblique face is slanted.
... you can select this using the <angle> modifier for the oblique keyword.
...And 6 more matches

grid-template-columns - CSS: Cascading Style Sheets
e-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid.
... auto is a keyword that is identical to maximal content if it's a maximum.
... note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
...And 6 more matches

mask-repeat - CSS: Cascading Style Sheets
a mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
... /* one-value syntax */ mask-repeat: repeat-x; mask-repeat: repeat-y; mask-repeat: repeat; mask-repeat: space; mask-repeat: round; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...e two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat in the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior.
...And 6 more matches

offset-path - CSS: Cascading Style Sheets
description this property defines a path an animated element can follow.
... early versions of the spec called this property motion-path.
... it was changed to offset-path because the property describes static positions, not motion.
...And 6 more matches

Guide to scroll anchoring - CSS: Cascading Style Sheets
this has happened because large images or some other elements have just loaded further up in the content.
...in most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.
... if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement.
...And 6 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green, with the colors repeating every 30px */ repeating-radial-gradient(circle at center, red 0, blue, green 30px); /* an elliptical gradient near the top left of its container, starting red, changing to green and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or transform-ori...
...And 6 more matches

transition-timing-function - CSS: Cascading Style Sheets
the transition-timing-function css property sets how intermediate values are calculated for css properties being affected by a transition effect.
... this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration.
...if there are fewer timing functions specified than in the transition-property list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property.
...And 6 more matches

<url> - CSS: Cascading Style Sheets
urls can be used in numerous css properties, such as background-image, cursor, and list-style.
...a url is a type of uri, and describes the location of a resource.
... a uri can be either a url or a name (urn) of a resource.
...And 6 more matches

visibility - CSS: Cascading Style Sheets
the property can also hide rows or columns in a <table>.
...the element cannot receive focus (such as when navigating through tab indexes).
...however, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present.
...And 6 more matches

SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the javascript warning "using //@ to indicate sourceurl pragmas is deprecated.
... use //# instead" occurs when there is a deprecated source map syntax in a javascript source.
... message warning: syntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
...And 6 more matches

glyph-orientation-vertical - SVG: Scalable Vector Graphics
the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered.
... when the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... this attribute is applied only to text written in a vertical writing-mode.
...And 6 more matches

JS::SetLargeAllocationFailureCallback
this article covers features introduced in spidermonkey 31 specify a new callback function for large memory allocation failure.
... syntax void js::setlargeallocationfailurecallback(jsruntime *rt, js::largeallocationfailurecallback afc, void *data); name type description rt jsruntime * the jsruntime for which to set the gc callback.
... cb js::largeallocationfailurecallback pointer to the new callback function to use.
...And 5 more matches

BasicCardResponse.cardNumber - Web APIs
the cardnumber property of the basiccardresponse dictionary contains the number of the card used to make the payment.
... syntax "cardnumber" : "number" value a domstring representing the credit card number.
... example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...And 5 more matches

BasicCardResponse.cardSecurityCode - Web APIs
the cardsecuritycode property of the basiccardresponse dictionary contains the security code of the card used to make the payment.
... syntax "cardsecuritycode" : "number" value a domstring representing the card security code.
... example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...And 5 more matches

BasicCardResponse.cardholderName - Web APIs
the cardnumber property of the basiccardresponse dictionary contains the cardholder name of the card used to make the payment.
... syntax name = basiccardresponse.cardholdername; value a domstring indicating the name of the cardholder.
... example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...And 5 more matches

RTCIceCandidateStats.candidateType - Web APIs
the rtcicecandidatestats interface's candidatetype property is a string which indicates the type of ice candidate the object represents.
... syntax candidatetype = rtcicecandidatestats.candidatetype; value a domstring whose value is one of the strings found in the rtcicecandidatetype enumerated type:host the candidate is a host candidate, whose ip address as specified in the rtcicecandidate.ip property is in fact the true address of the remote peer.
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously.
...And 5 more matches

::before (:before) - CSS: Cascading Style Sheets
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
...this method can often be used to add small touches to the ui and improve user experience.
... result special characters as this is css; not html, you can not use markup entities in content values.
...And 5 more matches

:empty - CSS: Cascading Style Sheets
children can be either element nodes or text (including whitespace).
...--></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this comment.
... --> </div> <div class="box"> <p><!-- i will be pink in all browsers because of the non-collapsible whitespace and elements around this comment.
...And 5 more matches

:focus - CSS: Cascading Style Sheets
syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
...wcag 2.1 sc 1.4.11 non-text contrast requires that the visual focus indicator be at least 3 to 1.
... accessible visual focus indicators: give your site some focus!
...And 5 more matches

:invalid - CSS: Cascading Style Sheets
x; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.
... people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning.
... typically, descriptive text and/or an icon are used.
...And 5 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
the :is() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
...ph inside a header, main or footer element that is being hovered */ :is(header, main, footer) p:hover { color: red; cursor: pointer; } /* the above is equivalent to the following */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } /* backwards-compatible version with :-*-any() and :matches() (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <com...
...y(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } :is(header, main, footer) p:hover { color: red; cursor: pointer; } let matcheditems; try { matcheditems = document.queryselectorall(':is(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':matches(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :i...
...And 5 more matches

system - CSS: Cascading Style Sheets
this system is useful in cases where the counter values are finite.
...also an optional <integer> can be specified after the the system, as the value of the first symbol.
...the value of a number in such a system can be found out by adding the digits in the number.
...And 5 more matches

font-stretch - CSS: Cascading Style Sheets
for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-stretch descriptor to explicitly specify the font face's stretch.
... in earlier versions of the font-stretch specification, the property accepts only the nine keyword values.
...however some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
...And 5 more matches

display-mode - CSS: Cascading Style Sheets
the display-mode css media feature can be used to test the display mode of an application.
... you can use it to provide a consistent user experience between launching a site from a url and launching it from a desktop icon.
... standalone standalone the application will look and feel like a standalone application.
...And 5 more matches

@page - CSS: Cascading Style Sheets
in the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.
... description you can't change all css properties with @page.
... you can only change the margins, orphans, widows, and page breaks of the document.
...And 5 more matches

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
...this document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.
...the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.
...And 5 more matches

Box alignment in Flexbox - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox.
... however, in flexbox you can change the main axis by setting flex-direction to column.
... in this case, justify-content will align items in the block direction.
...And 5 more matches

Handling content breaks in multicol - CSS: Cascading Style Sheets
in both contexts we control where and how things break by using properties of the css fragmentation specification.
... fragmentation basics the css fragmentation specification details how content breaks between the fragmentation containers, or fragmentainers.
... a column box can contain other markup and there are many places where a break would not be ideal.
...And 5 more matches

CSS Flexible Box Layout - CSS: Cascading Style Sheets
in the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
... both horizontal and vertical alignment of the children can be easily manipulated.
...you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch.
...And 5 more matches

Recipe: Media objects - CSS: Cascading Style Sheets
the image can be on the left or right.
... media objects can be nested.
...this means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object.
...And 5 more matches

attr() - CSS: Cascading Style Sheets
note: the attr() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
...it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
...it is not reparsed, and in particular the characters are used as-is instead of css escapes being turned into different characters.
...And 5 more matches

border-bottom - CSS: Cascading Style Sheets
as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified.
... constituent properties this property is a shorthand for the following css properties: border-bottom-color border-bottom-style border-bottom-width syntax border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
...rthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 5 more matches

border-left - CSS: Cascading Style Sheets
as with all shorthand properties, border-left always sets the values of all of the properties that it can set, even if they are not specified.
... constituent properties this property is a shorthand for the following css properties: border-left-color border-left-style border-left-width syntax border-left: 1px; border-left: 2px dotted; border-left: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
...he shorthand:border-left-color: a colorborder-left-style: discreteborder-left-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 5 more matches

border-right - CSS: Cascading Style Sheets
as with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified.
... constituent properties this property is a shorthand for the following css properties: border-right-color border-right-style border-right-width syntax border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
...shorthand:border-right-color: a colorborder-right-style: discreteborder-right-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 5 more matches

border-top - CSS: Cascading Style Sheets
as with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified.
... constituent properties this property is a shorthand for the following css properties: border-top-color border-top-style border-top-width syntax border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
...f the shorthand:border-top-color: a colorborder-top-style: discreteborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 5 more matches

box-shadow - CSS: Cascading Style Sheets
you can set multiple effects separated by commas.
... the box-shadow property enables you to cast a drop shadow from the frame of almost any element.
...<offset-y> specifies the vertical distance.
...And 5 more matches

env() - CSS: Cascading Style Sheets
the env() css function can be used to insert the value of a user agent-defined environment variable into your css, in a similar fashion to the var() function and custom properties.
... the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); } in addition, unlike custom properties, which cannot be used outside of declarations, the env() function can be used in place of any part of a property value, or any part of a descriptor (e.g.
... originally provided by the ios browser to allow developers to place their content in a safe area of the viewport, the safe-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
...And 5 more matches

font-size-adjust - CSS: Cascading Style Sheets
the font-size-adjust css property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).
... /* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.
... legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).
...And 5 more matches

<frequency-percentage> - CSS: Cascading Style Sheets
the <frequency-percentage> css data type represents a value that can be either a <frequency> or a <percentage>.
... description use in calc() where a <frequency-percentage> is specified as an allowable type, this means that the percentage resolves to a frequency and therefore can be used in a calc() expression.
... examples valid percentage values 90% positive percentage +90% positive percentage with leading + -90% negative percentage — not valid for all properties that use percentages invalid percentage values 90 % no space is allowed between the number and the unit valid frequency values 12hz positive integer 4.3hz non-integer 14khz the unit is case-insensitive, though non-si capitalization is not recommended.
...And 5 more matches

grid-column - CSS: Cascading Style Sheets
the grid-column css shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... each <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both.
... values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
...And 5 more matches

grid-template-rows - CSS: Cascading Style Sheets
auto is a keyword that is identical to maximal content if it's a maximum.
... note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
... fit-content( [ <length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
...And 5 more matches

height - CSS: Cascading Style Sheets
auto the browser will calculate and select a height for the specified element.
... accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
...And 5 more matches

ident - CSS: Cascading Style Sheets
syntax the syntax of <custom-ident> is similar to css identifiers (such as property names), except that it is case-sensitive.
... it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a backslash, \), a unicode character (in the format of a backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
... on the other hand, as there are several ways to escape a character, toto\?
...And 5 more matches

inherit - CSS: Cascading Style Sheets
the inherit css keyword causes the element for which it is specified to take the computed value of the property from its parent element.
... it can be applied to any css property, including the css shorthand all.
...for non-inherited properties, this specifies a behavior that typically makes relatively little sense and you may consider using initial instead, or unset on the all property.
...And 5 more matches

letter-spacing - CSS: Cascading Style Sheets
positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
... legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths.
... there is no one value that can ensure all font families automatically maintain their legibility.
...And 5 more matches

line-height - CSS: Cascading Style Sheets
on non-replaced inline elements, it specifies the height that is used to calculate line box height.
...in most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.
... <length> the specified <length> is used in the calculation of the line box height.
...And 5 more matches

margin - CSS: Cascading Style Sheets
syntax /* apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values.
...for example, in certain cases this value can be used to center an element.
... */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally centered */ notes horizontal centering to center something horizontally in modern browsers, you can use display: flex; justify-content: center; .
...And 5 more matches

object-fit - CSS: Cascading Style Sheets
you can alter the alignment of the replaced element's content object within the element's box using the object-position property.
... values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.
... scale-down the content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
...And 5 more matches

<percentage> - CSS: Cascading Style Sheets
numerous properties can use percentages, such as width, height, margin, padding, and font-size.
... note: only calculated values can be inherited.
...rgin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification.
...And 5 more matches

text-orientation - CSS: Cascading Style Sheets
it only affects text in vertical mode (when writing-mode is not horizontal-tb).
... it is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
...lays out the characters of vertical scripts naturally.
...And 5 more matches

<time-percentage> - CSS: Cascading Style Sheets
the <time-percentage> css data type represents a value that can be either a <time> or a <percentage>.
... examples use in calc() where a <time-percentage> is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a calc() expression.
... valid percentages 50% +50% optional plus sign -50% negative percentages are not valid for all properties that accept percentages invalid percentages 50 % space not allowed between the space and the percentage sign valid times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
...And 5 more matches

user-select - CSS: Cascading Style Sheets
the user-select css property controls whether the user can select text.
...until now, chromium chooses to fix the issues, make the final behavior meets the specifications.
...note that the selection object can contain these elements.
...And 5 more matches

surfaceScale - SVG: Scalable Vector Graphics
the surfacescale attribute represents the height of the surface for a light filter primitive.
... two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: t...
...ranslatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
...And 5 more matches

CanvasRenderingContext2D.lineCap - Web APIs
the canvasrenderingcontext2d.linecap property of the canvas 2d api determines the shape used to draw the end points of lines.
... note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods.
... syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints.
...And 4 more matches

RTCIceCandidatePair.local - Web APIs
the local property of the rtcicecandidatepair dictionary specifies the rtcicecandidate which describes the configuration of the local end of a viable webrtc connection.
... syntax localcandidate = rtcicecandidatepair.local; value an rtcicecandidate which describes the configuration of the local end of a viable pair of ice candidates.
... the rtcicecandidatepair is returned by the rtcicetransport method getselectedcandidatepair().
...And 4 more matches

-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a child svg image.
... if you reference an svg image in a webpage (such as with the <img> element or as a background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element.
...And 4 more matches

-moz-user-focus - CSS: Cascading Style Sheets
the -moz-user-focus css property is used to indicate whether an element can have the focus.
... /* keyword values */ -moz-user-focus: normal; -moz-user-focus: ignore; /* global values */ -moz-user-focus: inherit; -moz-user-focus: initial; -moz-user-focus: unset; by setting its value to ignore, you can disable focusing the element, which means that the user will not be able to activate the element.
... initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus.
...And 4 more matches

::selection - CSS: Cascading Style Sheets
::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored.
...election { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
... for people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.
...And 4 more matches

:active - CSS: Cascading Style Sheets
when using a mouse, "activation" typically starts when the user presses down the primary mouse button.
... note: on systems with multi-button mice, css3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
... /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
...And 4 more matches

:enabled - CSS: Cascading Style Sheets
an element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
... the element also has a disabled state, in which it can't be activated or accept focus.
...this helps the user understand which elements can be interacted with.
...And 4 more matches

@document - CSS: Cascading Style Sheets
it is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.
... @document url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions.
... the values provided to the url(), url-prefix(), domain(), and media-document() functions can be optionally enclosed by single or double quotes.
...And 4 more matches

prefers-reduced-motion - CSS: Cascading Style Sheets
important: an embedded example at the bottom of this page has a scaling movement that may be problematic for some readers.
... syntax no-preference indicates that the user has made no preference known to the system.
... reduce indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
...And 4 more matches

Box alignment in grid layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
...should you be in a vertical writing mode the inline axis will run vertically.
... the block axis crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in english are displayed one below the other vertically.
...And 4 more matches

Understanding CSS z-index - CSS: Cascading Style Sheets
in the most basic cases, html pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping.
... in this case, there is a single rendering flow, and all elements are aware of the space taken by others.
...in addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other.
...And 4 more matches

Descendant combinator - CSS: Cascading Style Sheets
the descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
... selectors that utilize a descendant combinator are called descendant selectors.
... /* list items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
...And 4 more matches

background-position-y - CSS: Cascading Style Sheets
the background-position-y css property sets the initial vertical position for each background image.
... center aligns the vertical center of the background image with the vertical center of the background position layer.
... <percentage> the offset of the given background image's vertical position relative to the container.
...And 4 more matches

<basic-shape> - CSS: Cascading Style Sheets
for this specification, this results in an empty float area.
... a <position> value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
...the list values interpolate as <length>, <percentage>, or calc() where possible.
...And 4 more matches

border-radius - CSS: Cascading Style Sheets
you can set a single radius to make circular corners, or two radii to make elliptical corners.
... note: as with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions.
...this is used to set an additional radius, so you can have elliptical corners.
...And 4 more matches

border-spacing - CSS: Cascading Style Sheets
the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.
... note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing.
... syntax /* <length> */ border-spacing: 2px; /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em; /* global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or two values.
...And 4 more matches

box-align - CSS: Cascading Style Sheets
/* keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical.
... notes the edge of the box designated the start for alignment purposes depends on the box's orientation: horizontal top vertical left the edge opposite to the start is designated the end.
... { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 400px; /* make this box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ box-align: center; /* as specified */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom o...
...And 4 more matches

box-lines - CSS: Cascading Style Sheets
the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
... /* keyword values */ box-lines: single; box-lines: multiple; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column.
... this behavior can be changed using the box-lines property.
...And 4 more matches

clip-path - CSS: Cascading Style Sheets
if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path.
... the geometry box can be one of the following values: margin-box uses the margin box as the reference box.
... <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
...And 4 more matches

counter() - CSS: Cascading Style Sheets
it is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.
... note: the counter() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
... check the browser compatibility table carefully before using this in production.
...And 4 more matches

flex-basis - CSS: Cascading Style Sheets
note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.
... syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>.
... content indicates automatic sizing, based on the flex item’s content.
...And 4 more matches

font-synthesis - CSS: Cascading Style Sheets
syntax this property can take any one of the following forms: the keyword value none.
... values none indicates that neither bold nor italic typeface may be synthesized.
... weight indicates that a bold typeface may be synthesized if needed.
...And 4 more matches

grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... somegridarea 4; grid-row: 4 somegridarea / 6; /* span + <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span 3 / 6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /* global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).
...And 4 more matches

image-orientation - CSS: Cascading Style Sheets
warning: this property is deprecated in the specification.
... description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated.
...for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property with the rotate keyword to specify rotation.
...And 4 more matches

<length-percentage> - CSS: Cascading Style Sheets
the <length-percentage> css data type represents a value that can be either a <length> or a <percentage>.
... html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a...
... length and therefore can be used in a calc() expression.
...And 4 more matches

mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
...percentages are relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets.
... auto the width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding mask-border-slice.
...And 4 more matches

mask - CSS: Cascading Style Sheets
it is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade.
...gth (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative lengths converted into absolute lengthsmask-composite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 4 more matches

min-width - CSS: Cascading Style Sheets
auto the browser will calculate and select a min-width for the specified element.
... formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that...
... specification.
...And 4 more matches

<number> - CSS: Cascading Style Sheets
4.01 positive fraction -456.8 negative fraction 0.0 zero +0.0 zero, with a leading + -0.0 zero, with a leading - .60 fractional number without a leading zero 10e3 scientific notation -3.4e-2 complicated scientific notation invalid numbers 12.
... specifications specification status comment css values and units module level 4the definition of '<number>' in that specification.
... editor's draft no significant change.
...And 4 more matches

object-position - CSS: Cascading Style Sheets
you can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property.
...relative or absolute offsets can be used.
... note: the position can be set so that the replaced element is drawn outside its box.
...And 4 more matches

repeating-linear-gradient() - CSS: Cascading Style Sheets
this can be altered with repeating the first color again as the last color.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point.
...And 4 more matches

scrollbar-color - CSS: Cascading Style Sheets
syntax /* keyword values */ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; /* <color> values */ scrollbar-color: rebeccapurple green; /* two valid colors.
... dark show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors.
... light show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors.
...And 4 more matches

text-combine-upright - CSS: Cascading Style Sheets
this property only has an effect in vertical writing modes.
... /* keyword values */ text-combine-upright: none; text-combine-upright: all; /* digits values */ text-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */ text-combine-upright: digits 4; /* fits up to 4 consecutive digits horizontally inside vertical text */ /* global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset; syntax values none there is no special processing.
... all attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.
...And 4 more matches

text-justify - CSS: Cascading Style Sheets
the text-justify css property sets what type of justification should be applied to text when text-align: justify; is set on an element.
... text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below.
... values none the text justification is turned off.
...And 4 more matches

<time> - CSS: Cascading Style Sheets
note: conversion between s and ms follows the logical 1s = 1000ms.
... examples valid times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
...12.0 this is a <number>, not a <time>, because it's missing a unit.
...And 4 more matches

width - CSS: Cascading Style Sheets
auto the browser will calculate and select a width for the specified element.
... accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text size.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-color: red; color: white; bor...
...And 4 more matches

ReferenceError: deprecated caller or arguments usage - JavaScript
the javascript strict mode-only exception "deprecated caller or arguments usage" occurs when the deprecated function.caller or function.arguments properties are used.
... message typeerror: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (edge) warning: referenceerror: deprecated caller usage (firefox) warning: referenceerror: deprecated arguments usage (firefox) typeerror: 'callee' and 'caller' cannot be accessed in strict mode.
... in strict mode, the function.caller or function.arguments properties are used and shouldn't be.
...And 4 more matches

CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
the canvascapturemediastreamtrack method requestframe() requests that a frame be captured from the canvas and sent to the stream.
... applications that need to carefully control the timing of rendering and frame capture can use requestframe() to directly specify when it's time to capture a frame.
... to prevent automatic capture of frames, so that frames are only captured when requestframe() is called, specify a value of 0 for the capturestream() method when creating the stream.
...And 3 more matches

CanvasCaptureMediaStreamTrack - Web APIs
the canvascapturemediastreamtrack interface represents the video track contained in a mediastream being generated from a <canvas> following a call to htmlcanvaselement.capturestream().
... part of the media capture and streams api.
... canvascapturemediastreamtrack.canvas read only returns the htmlcanvaselement object whose surface is captured in real-time.
...And 3 more matches

HTMLCanvasElement.captureStream() - Web APIs
the htmlcanvaselement capturestream() method returns a mediastream which includes a canvascapturemediastreamtrack containing a real-time video capture of the canvas's contents.
... syntax mediastream = canvas.capturestream(framerate); parameters framerate optional a double-precision floating-point value that indicates the rate of capture of each frame.
... if not set, a new frame will be captured each time the canvas changes; if set to 0, frames will not be captured automatically; instead, they will only be captured when the returned track's requestframe() method is called.
...And 3 more matches

ImageCapture.getPhotoCapabilities() - Web APIs
the getphotocapabilities() method of the imagecapture interface returns a promise that resolves with a photocapabilities object containing the ranges of available configuration options.
... syntax const capabilitiespromise = imagecaptureobj.getphotocapabilities() return value a promise that resolves with a photocapabilities object.
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an input range.
...And 3 more matches

window.cancelIdleCallback() - Web APIs
summary the window.cancelidlecallback() method cancels a callback previously scheduled with window.requestidlecallback().
... syntax window.cancelidlecallback(handle); parameters handle the id value returned by window.requestidlecallback() when the callback was established.
... specifications specification status comment cooperative scheduling of background tasks proposed recommendation initial definition.
...And 3 more matches

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
... custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.
...it represents the entirety of what a valid declaration can have as its value.
...And 3 more matches

-webkit-border-before - CSS: Cascading Style Sheets
the -webkit-border-before css property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.
... /* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color.
... it maps to a physical border depending on the element's writing mode, directionality, and text orientation.
...And 3 more matches

-webkit-line-clamp - CSS: Cascading Style Sheets
it only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.
... in most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.
... when applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
...And 3 more matches

-webkit-mask-repeat-x - CSS: Cascading Style Sheets
es */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
... repeat the mask image is repeated both horizontally and vertically.
...the mask-position property is ignored unless only one image can be displayed without clipping.
...And 3 more matches

:disabled - CSS: Cascading Style Sheets
an element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.
... the element also has an enabled state, in which it can be activated or accept focus.
...box document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
...And 3 more matches

:host() - CSS: Cascading Style Sheets
the :host() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host.
...you can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor.
... in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; con...
...And 3 more matches

:hover - CSS: Cascading Style Sheets
web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.
... syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
... specifications specification comment feedback html living standardthe definition of ':hover' in that specification.
...And 3 more matches

:in-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
... note: this pseudo-class only applies to elements that have (and can take) a range limitation.
... in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid.
...And 3 more matches

:optional - CSS: Cascading Style Sheets
accessibility concerns if a form contains optional <input>s, required inputs should be indicated using the required attribute.
... required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning.
... typically, descriptive text and/or an icon are used.
...And 3 more matches

:required - CSS: Cascading Style Sheets
/* selects any required <input> */ input:required { border: 1px dashed red; } this pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.
... if the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning.
... typically, descriptive text and/or an icon are used.
...And 3 more matches

speak-as - CSS: Cascading Style Sheets
for example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.
... for all other cases, specifying auto has the same effect as specifying speak-as: numbers.
... numbers the numerical value of the counter will be read out in the document language.
...And 3 more matches

@counter-style - CSS: Cascading Style Sheets
range defines the range of values over which the counter style is applicable.
...symbols can contain string, images or custom identifiers.
...for example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
...And 3 more matches

font-style - CSS: Cascading Style Sheets
for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-style descriptor to explicitly specify the font face's style.
... on the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized.
... true italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality.
...And 3 more matches

unicode-range - CSS: Cascading Style Sheets
syntax /* <unicode-range> values */ unicode-range: u+26; /* single codepoint */ unicode-range: u+0-7f; unicode-range: u+0025-00ff; /* codepoint range */ unicode-range: u+4??; /* wildcard range */ unicode-range: u+0025-00ff, u+4??; /* multiple values */ values single codepoint a single unicode character code point, for example u+26.
... wildcard range a range of unicode code points containing wildcard characters, that is using the '?' character, so for example u+4??
...for example, a site with many localizations could provide separate font resources for english, greek and japanese.
...And 3 more matches

color-gamut - CSS: Cascading Style Sheets
the color-gamut css media feature can be used to test the approximate range of colors that are supported by the user agent and the output device.
... srgb the output device can support approximately the srgb gamut or more.
... p3 the output device can support approximately the gamut specified by the dci p3 color space or more.
...And 3 more matches

orientation - CSS: Cascading Style Sheets
the orientation css media feature can be used to test the orientation of the viewport (or the page box, for paged media).
...opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
... landscape the viewport is in a landscape orientation, i.e., the width is greater than the height.
...And 3 more matches

prefers-color-scheme - CSS: Cascading Style Sheets
alternately, users can create the numeric preference ui.systemusesdarktheme to override the default behavior and return light (value: 0), dark (value: 1), or no-preference (value: 2).
... (any other value causes firefox to return light.) the prefers-color-scheme css media feature is used to detect if the user has requested the system use a light or dark color theme.
... syntax light indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an active preference.
...And 3 more matches

update - CSS: Cascading Style Sheets
the update css media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content.
... none once it has been rendered, the layout can no longer be updated.
... slow the layout may change dynamically according to the usual rules of css, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation.
...And 3 more matches

@namespace - CSS: Cascading Style Sheets
syntax /* default namespace */ @namespace url(xml-namespace-url); @namespace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace.
... the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies.
... @namespace can be used to define the default namespace for the style sheet.
...And 3 more matches

@viewport - CSS: Cascading Style Sheets
lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport.
... this is typically based on the size of the window on desktop browsers that aren't in full screen mode.
... on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use.
...And 3 more matches

At-rules - CSS: Cascading Style Sheets
nested at-rules — a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
...(at the candidate recommendation stage, but only implemented in gecko as of writing) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in font-variant-alternates for feature activated differently in opentype.
... (at the candidate recommendation stage, but only implemented in gecko as of writing) conditional group rules much like the values of properties, each at-rule has a different syntax.
...And 3 more matches

Resizing background images with background-size - CSS: Cascading Style Sheets
by doing so, you can scale the image upward or downward as desired.
...to do this, we can use a fixed background-size value of 150 pixels.
... html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
...And 3 more matches

Using URL values for the cursor property - CSS: Cascading Style Sheets
this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used.
... syntax the basic (css 2.1) syntax for this property is: cursor: [ <url> , ]* <keyword> this means that zero or more urls may be specified (comma-separated), which must be followed by one of the keywords defined in the css specification, such as auto or pointer.
...if that file does not exist or is not valid for some other reason, bar.gif is tried, and if that can't be used either, auto will be used.
...And 3 more matches

CSS Display - CSS: Cascading Style Sheets
ow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using gr...
...ids specifications specification status comment css display module level 3the definition of 'display' in that specification.
... candidate recommendation added run-in, flow, flow-root, contents and multi-keyword values.
...And 3 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
however, css pre-processors simply generate valid css, so the techniques used below can be written in pure css instead, if preferred.
... flexbox containers using the display property's flex value causes an element to generate a block-level flex container box.
... the inline-flex value causes an element to generate an inline-level flex container box.
...And 3 more matches

In Flow and Out of Flow - CSS: Cascading Style Sheets
all of the elements can be said to be in flow.
... taking an item out of flow all elements are in-flow apart from: floated items items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow items create a new block formatting context (bfc) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page.
... you can see the background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float.
...And 3 more matches

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
when a url points at a specific piece of a document, it can be difficult for the user to notice.
... find out how you can use some simple css to draw attention to the target of a url and improve the user's experience.
...selecting the "first" link, for example, will cause <h1 id="one"> to become the target element.
...And 3 more matches

Privacy and the :visited selector - CSS: Cascading Style Sheets
to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.
... little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
... limits to visited link styles you can style visited links, but there are limits to which styles you can use.
...And 3 more matches

Selector list - CSS: Cascading Style Sheets
/* selects all matching elements */ span, div { border: red 2px solid; } to reduce the size of style sheets, one can group selectors in comma-separated lists.
... h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists.
... #main, .content, article { font-size: 1.1em; } selector list invalidation a downside to using selector lists is that the following aren't equivalent: h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2:maybe-unsupported, h3 { font-family: sans-serif } this is because a single unsupported selector in a selector list invalidates the whole rule.
...And 3 more matches

Actual value - CSS: Cascading Style Sheets
for example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.
... calculating a property's actual value the user agent performs four steps to calculate a property's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
... next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block).
...And 3 more matches

align-content - CSS: Cascading Style Sheets
if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
...regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
...baseline<content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-content: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px...
...And 3 more matches

align-items - CSS: Cascading Style Sheets
if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
...regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
...baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-items: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px...
...And 3 more matches

<alpha-value> - CSS: Cascading Style Sheets
the <alpha-value> css data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.
... if given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used.
... if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.
...And 3 more matches

<angle-percentage> - CSS: Cascading Style Sheets
the <angle-percentage> css data type represents a value that can be either a <angle> or a <percentage>.
... use in calc() where an <angle-percentage> is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a calc() expression.
... specifications specification status comment css values and units module level 4the definition of '<angle-percentage>' in that specification.
...And 3 more matches

backdrop-filter - CSS: Cascading Style Sheets
the backdrop-filter css property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
... because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
... /* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
...And 3 more matches

background-color - CSS: Cascading Style Sheets
in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 3 more matches

border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
... constituent properties this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color.
... the physical border to which it maps depends on the element's writing mode, directionality, and text orientation.
...And 3 more matches

border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
... constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color.
... the physical border to which it maps depends on the element's writing mode, directionality, and text orientation.
...And 3 more matches

border-block - CSS: Cascading Style Sheets
the border-block css property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
... border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once.
... the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation.
...And 3 more matches

border-bottom-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific.
...ottom-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
... candidate recommendation no significant change.
...And 3 more matches

border-image-outset - CSS: Cascading Style Sheets
the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events.
... syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
...negative values are invalid and will cause the border-image-outset declaration to be ignored.
...And 3 more matches

border-inline - CSS: Cascading Style Sheets
the border-inline css property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
... border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing mode, directionality, and text orientation.
... the borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end.
...And 3 more matches

border-left-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific.
...0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
... candidate recommendation no significant change.
...And 3 more matches

border-right-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific.
...f border-right-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
... candidate recommendation no significant change.
...And 3 more matches

border-top-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific.
...valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
... candidate recommendation no significant change.
...And 3 more matches

border-width - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four values.
...if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific.
..."thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
...And 3 more matches

bottom - CSS: Cascading Style Sheets
the bottom css property participates in setting the vertical position of a positioned element.
... auto specifies that: for absolutely positioned elements, the position of the element is based on the top property, while height: auto is treated as a height based on the content; or if top is also auto, the element is positioned where it should vertically be positioned if it were a static element.
... for relatively positioned elements, the distance of the element from its normal position is based on the top property; or if top is also auto, the element is not moved vertically at all.
...And 3 more matches

box-orient - CSS: Cascading Style Sheets
the box-orient css property sets whether an element lays out its contents horizontally or vertically.
... /* keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the keyword values listed below.
... vertical the box lays out its contents vertically.
...And 3 more matches

break-after - CSS: Cascading Style Sheets
by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-a...
...fter' in that specification.
...And 3 more matches

break-before - CSS: Cascading Style Sheets
by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-...
...before' in that specification.
...And 3 more matches

column-width - CSS: Cascading Style Sheets
the container will have as many columns as can fit without any of them having a width less than the column-width value.
... this property can help you create responsive designs that fit different screen sizes.
... values <length> indicates the optimal column width.
...And 3 more matches

<dimension> - CSS: Cascading Style Sheets
unit identifiers are case insensitive.
... examples valid dimensions 12px 12 pixels 1rem 1 rem 1.2pt 1.2 points 2200ms 2200 milliseconds 5s 5 seconds 200hz 200 hertz 200hz 200 hertz (values are case insensitive) invalid dimensions 12 px the unit must come immediately after the number.
... specifications specification status comment css values and units module level 4the definition of '<dimension>' in that specification.
...And 3 more matches

<display-listitem> - CSS: Cascading Style Sheets
the list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.
... syntax a single value of list-item will cause the element to behave like a list item.
... this can be used together with list-style-type and list-style-position.
...And 3 more matches

element() - CSS: Cascading Style Sheets
this image is live, meaning that if the html element is changed, the css properties using the resulting value are automatically updated.
... a particularly useful scenario for using this would be to render an image in an html <canvas> element, then use that as a background.
... on gecko browsers, you can use the non-standard document.mozsetimageelement() method to change the element being used as the background for a given css background element.
...And 3 more matches

fit-content() - CSS: Cascading Style Sheets
the function can be used as a track size in css grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
... the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size.
...because the contents of it are wider than the maximum width, it is clamped at 300 pixels.
...And 3 more matches

font-feature-settings - CSS: Cascading Style Sheets
: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
... these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature.
... in particular, font-feature-settings shouldn't be used to enable small caps.
...And 3 more matches

font-stretch - CSS: Cascading Style Sheets
in earlier versions of the font-stretch specification, the property accepts only the nine keyword values.
... you can use font-stretch to select a condensed or expanded face from such fonts.
... the table below demonstrates the effect of supplying various different percentage values of font-stretch on two different fonts: 50% 62.5% 75% 87.5% 100% 112.5% 125% 150% 200% helvetica neue league mono variable helvetica neue, which is installed by default on macos, has a single condensed face in addition to the normal face.
...And 3 more matches

font-variant-alternates - CSS: Cascading Style Sheets
/* keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-...
...variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
... historical-forms this keyword enables historical forms — glyphs that were common in the past but not today.
...And 3 more matches

grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
... the grid-area property can also be set to a <custom-ident> which acts as a name for the area, which can then be placed using grid-template-areas.
...values */ grid-area: 4 some-grid-area; grid-area: 4 some-grid-area / 2 another-grid-area; /* span && [ <integer> || <custom-ident> ] values */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /* global values */ grid-area: inherit; grid-area: initial; grid-area: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of 1.
...And 3 more matches

grid-auto-columns - CSS: Cascading Style Sheets
this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.
... fit-content(argument) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
... auto is a keyword that is identical to maximal content if it's a maximum.
...And 3 more matches

grid-column-start - CSS: Cascading Style Sheets
a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both.
... values auto a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
...And 3 more matches

grid-row-start - CSS: Cascading Style Sheets
a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both.
... values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
...And 3 more matches

image-set() - CSS: Cascading Style Sheets
resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.
... syntax image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <url> values most commonly you'll see an url() <string> value, but the <image> can be any image type except for an image set.
... the image-set() function can not be nested inside another image-set() function.
...And 3 more matches

ime-mode - CSS: Cascading Style Sheets
this property should only be used for private web applications or to undo the property if it was previously set by legacy code.
... normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting.
... active the input method editor is initially active; text entry is performed through it unless the user specifically dismisses it.
...And 3 more matches

Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, which by default are set to the computed value of the parent element non-inherited properties, which by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no").
... a typical example of an inherited property is the color property.
... a typical example of a non-inherited property is the border property.
...And 3 more matches

initial - CSS: Cascading Style Sheets
it can be applied to any css property.
... this includes the css shorthand all, with which initial can be used to restore all css properties to their initial state.
... examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification.
...And 3 more matches