Search completed in 0.99 seconds.
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.
... the supporting browsers other than in internet explorer,
css grid layout is unprefixed in safari, chrome, opera, firefox and edge.
... the internet explorer and edge situation it should be remembered that the original implementation of
css grid layout happened in internet explorer 10.
...And 20 more matches
CSS values and units - CSS: Cascading Style Sheets
every
css declaration includes a property / value pair.
...there are a common set of data types -- values and units -- that
css properties accept.
... textual data types <custom-ident> pre-defined keywords as an <ident> <string> <url> text data types are either <string>, a quoted series of characters, or an <ident>, a "
css identifier" which is an unquoted string.
...And 19 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.
... in moving to
css we often spoke about
css for layout enabling a separation of content and markup and presentation.
...And 14 more matches
Using CSS transitions - CSS: Cascading Style Sheets
css transitions provide a way to control animation speed when changing
css properties.
...with
css transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
...
css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g.
...And 14 more matches
CSS Tutorials - CSS: Cascading Style Sheets
learning
css may be a daunting task.
... in order to help you, we have written numerous tutorials about
css.
... beginner-level
css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of
css?
...And 13 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
it lies at the core of
css, as emphasized by the name: cascading style sheets.
... this article explains what the cascade is, the order in which
css declarations cascade, and how this affects you, the web developer.
... which
css entities participate in the cascade only
css declarations, that is property/value pairs, participate in the cascade.
...And 12 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.
... complex websites have very large amounts of
css, often with a lot of repeated values.
... 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 12 more matches
CSS Object Model (CSSOM) - Web APIs
the
css object model is a set of apis allowing the manipulation of
css from javascript.
... it is much like the dom, but for the
css rather than the html.
... it allows users to read and modify
css style dynamically.
...And 7 more matches
Detecting CSS animation support - CSS: Cascading Style Sheets
css animations make it possible to do creative animations of content using nothing but
css.
... testing for
css animation support this code will check to see if
css animation support is available: var animation = false, animationstring = 'animation', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem = document.createelement('div'); if( elem.style.animationname !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domprefixes.length; i++ ) { if( elem.style[ domprefixes[i] + 'animationname' ] !== undefined ) { pfx = domprefix...
... then we check if the
css animation-name property on the style collection for the element specified by the variable elem is set.
...And 7 more matches
Using CSS animations - CSS: Cascading Style Sheets
css animations make it possible to animate transitions from one
css style configuration to another.
... 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.
...And 6 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
the
css box alignment module specifies
css features that relate to the alignment of boxes in the various
css box layout models: block layout, table layout, flex layout, and grid layout.
... the module aims to create a consistent method of alignment across all of
css.
... older alignment methods
css traditionally had very limited alignment capabilities.
...And 5 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.
...counters are, in essence, variables maintained by
css whose values may be incremented by
css rules to track how many times they're used.
... using counters manipulating a counter's value to use a
css counter, it must first be initialized to a value with the counter-reset property (0 by default).
...And 5 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.
... also included is a brief dom-
css /
cssom reference.
...And 5 more matches
CSSValue.cssValueType - Web APIs
the
cssvaluetype read-only property of the
cssvalue interface represents the type of the current computed
css property value.
... syntax
cssvaluetype =
cssvalue.
cssvaluetype; value an unsigned short representing a code defining the type of the value.
... possible values are: constant description
css_custom the value is a custom value.
...And 4 more matches
CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from html primitives.
...however, many more layouts are either possible or easier with
css grid than they were with tables.
... for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to
css positioned elements.
...And 4 more matches
CSS Images - CSS: Cascading Style Sheets
css images is a module of
css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using
css gradients presents a specific type of
css images, gradients, and how to create and use these.
... implementing image sprites in
css describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.
...And 4 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
the
css shapes level 1 specification describes geometric shapes in
css.
... there are a number of ways to create these shapes and in these guides we will find out how
css shapes work, and consider some ways you might like to use them.
...this means we can keep things used for styling inside the
css.
...And 4 more matches
CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the
css object model (
cssom) is a map of all
css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship.
... the
cssom is very similar to the document object model (dom).
... the
cssom, together with the dom, to build the render tree, which is in turn used by the browser to layout and paint the web page.
...And 3 more matches
CSSStyleSheet.cssRules - Web APIs
the read-only
cssstylesheet property
cssrules returns a live
cssrulelist which provides a real-time, up-to-date list of every
css rule which comprises the stylesheet.
... each item in the list is a
cssrule defining a single rule.
... syntax var rules =
cssstylesheet.
cssrules; value a live-updating
cssrulelist containing each of the
css rules making up the stylesheet.
...And 3 more matches
CSS Animations - CSS: Cascading Style Sheets
css animations is a module of
css that lets you animate the values of
css properties over time, using keyframes.
... reference
css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function
css at-rules @keyframes guides detecting
css animation support describes a technique for detecting if a browser supports
css animations.
... using
css animations step-by-step tutorial about how to create animations using
css.
...And 3 more matches
CSS Display - CSS: Cascading Style Sheets
css display is a module of
css that defines how the
css formatting box tree is generated from the document element tree and defines properties controlling it.
... reference
css properties display
css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides
css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow 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 me...
...thods 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 grids specifications specification status comment
css display module level 3the definition of 'display' in that specification.
...And 3 more matches
CSS Overflow - CSS: Cascading Style Sheets
the
css overflow module contains the features of
css relating to scrollable overflow handling in visual media.
... in
css overflow happens when the content of a box extends past one or more of the box's edges.
... ink overflow and scrollable overflow there are two types of overflow that you might encounter in
css.
...And 3 more matches
CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by windows ie 5.5.
...</div> result reference
css properties scrollbar-width scrollbar-color specifications specification status comment
css scrollbars level 1 working draft initial definition.
...rollbar-widthchrome no support noedge no support nofirefox full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind the layout.
css.scrollbar-width.enabled preference (needs to be set to true).
...And 3 more matches
Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space,
css transforms change the shape and position of the affected content without disrupting the normal document flow.
...
css transforms are implemented using a set of
css properties that let you apply affine linear transformations to html elements.
...
css transforms properties two major properties are used to define
css transforms: transform and transform-origin transform-origin specifies the position of the origin.
...And 3 more matches
CSS Layout cookbook - CSS: Cascading Style Sheets
the
css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites.
... note: if you are new to
css layout then you might first like to take a look at our
css layout learning module, as this will give you the basic grounding you need to make use of the recipes here.
...
css grid, float fallback, fit-content() sizing columns when to choose multi-column layout, flexbox or grid for your columns.
...And 3 more matches
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
the
cssstyledeclaration.getproperty
cssvalue() method interface returns a
cssvalue containing the
css value for a property.
... you should use
cssstyledeclaration.getpropertyvalue() instead.
... syntax var value = style.getproperty
cssvalue(property); parameters property is a domstring representing the property name to be retrieved.
...And 2 more matches
CSSUnitValue.CSSUnitValue() - Web APIs
the
cssunitvalue() constructor creates a new
cssunitvalue object which returns a new
cssunitvalue object which represents values that contain a single unit type.
... for example, "42px" would be represented by a
cssnumericvalue.
... syntax var
cssunitvalue = new
cssunitvalue() parameters value returns a double indicating the number of units.
...And 2 more matches
CSS Animations tips and tricks - CSS: Cascading Style Sheets
css animations make it possible to do incredible things with the elements that make up your documents and apps.
... run an animation again the
css animations specification doesn't offer a way to run an animation again.
... <div class="box"> </div> <div class="runbutton">click me to run the animation</div>
css content now we'll define the animation itself using
css.
...And 2 more matches
CSS Color - CSS: Cascading Style Sheets
css color is a
css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to html content.
... not all
css properties that take a <color> as a value are part of this module, but they do depend upon it.
... reference properties color color-adjust opacity data types <color> guides applying color to html elements using
css a guide to using
css to apply color to a variety of types of content.
...And 2 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.
...the specification defines a single
css property contain.
... <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <p>more content here.</p> </article> each article has the contain property with a value of content applied in the
css.
...And 2 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 can create this type of system using
css grid layout.
...with
css grid layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty.
...And 2 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
... declaring colors & creating effects all
css gradient types are a range of position-dependent colors.
... the colors produced by
css gradients can vary continuously with position, producing smooth color transitions.
...And 2 more matches
Questions about CSS - CSS: Cascading Style Sheets
cascading style sheets (
css) is a rule-based language allowing developers to define styles to apply to html elements (or other markup structures).
...
css gives more control over the appearance of a web page to the page creator than to the browser designer or the viewer.
... with
css, the sources of style definition for a given document element are in this order of precedence: the style attribute on an individual element tag the style element that defines a specific style sheet containing style declarations or a link element that links to a separate document containing the style element.
...And 2 more matches
CSSKeywordValue.CSSKeywordValue() - Web APIs
the
csskeywordvalue constructor creates a new
csskeywordvalue object which represents
css keywords and other identifiers.
... syntax var
csskeywordvalue = new
csskeywordvalue(val) parameters value sets or returns the value of the new
csskeywordvalue.
... examples the following example resets the
css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new
csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get('display').value); // 'initial' console.dir( keyword ); specifications specification status comment
css typed om level 1the definition of '
csskeywordvalue' in that specification.
CSSRule.cssText - Web APIs
the
csstext property of the
cssrule interface returns the actual text of a
cssstylesheet style-rule.
... note: do not confuse this property with element-style
cssstyledeclaration.
csstext.
...therefore, to modify it, use the stylesheet's
cssrules[index] properties .selectortext and .style (or its sub-properties).
... syntax string =
cssrule.
csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.
cssrules[0].
csstext); // body { background-color: darkblue; } </script> specifications specification status comment
css object model (
cssom)the definition of '
cssrule:
csstext' in that specification.
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the
css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
...(additionally, element boxes can be decorated with a shadow.) reference
css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-colo...
... applying color to html elements using
css an overview of how
css color can be used in html, including for borders.
... specifications specification status comment
css backgrounds and borders module level 3 candidate recommendation
css level 2 (revision 1) recommendation
css level 1 recommendation ...
CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of
css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
...ling the size of a box height width max-height max-width min-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the
css box model explains one of the fundamental concept of
css: the box model.
... this model defines how
css lays out elements, including their content, padding, border, and margin areas.
... specifications specification status comment
css basic box model working draft added margin-trim
css level 2 (revision 1) recommendation
css level 1 recommendation initial definition.
CSS Multi-column Layout - CSS: Cascading Style Sheets
css multi-column layout is a module of
css that adds support for multi-column layouts.
...therefore the properties now defined in the
css fragmentation specification are required in order to control how content breaks between columns.
... reference multiple-column layout properties column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns related
css fragmentation properties break-after break-before break-inside orphans widows guides basic concepts of multicol an overview of the multiple-column layout specification styling columns how to use column rules and manage the spacing between columns.
... specifications specification status comment
css multi-column layout module working draft initial definition ...
CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of
css that defines a
css box model optimized for user interface design, and the layout of items in one dimension.
... reference
css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment.
... justify-content align-content align-items align-self place-content place-items row-gap column-gap gap glossary entries flexbox flex container flex item main axis cross axis flex guides basic concepts of flexbox an overview of the features of flexbox relationship of flexbox to other layout methods how flexbox relates to other layout methods, and other
css specifications aligning items in a flex container how the box alignment properties work with flexbox.
... backwards compatibility of flexbox browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec specifications specification status comment
css flexible box layout module candidate recommendation initial definition.
CSS Fonts - CSS: Cascading Style Sheets
css fonts is a module of
css that defines font-related properties and how font resources are loaded.
...this article provides you with all you need to know about using opentype font features in
css.
... specifications specification status comment
css fonts module level 4 working draft adds font-variation-settings (and related higher-level properties) and font-optical-sizing.
...
css fonts module level 3 candidate recommendation adds font-feature-settings (and related higher-level properties)
css level 2 (revision 1) recommendation
css level 1 recommendation initial definition ...
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.
...while the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the
css grid layout method has been widely adopted.
...
css grid layout, and the box alignment specification are designed to work with writing modes in
css.
...in the next guide, we will look further into this interaction between
css grid layout, box alignment and writing modes.
Understanding CSS z-index - CSS: Cascading Style Sheets
in
css 2.1, each box has a position in three dimensions.
... (from
css 2.1 section 9.9.1 - layered presentation) this means that
css style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0).
...z position can be controlled with the
css z-index property.
...in fact a dedicated section has been reserved in the
css specification
css-2.1 appendix e to explain these rules better.
CSS Properties Reference - CSS: Cascading Style Sheets
common
css properties reference the following is a basic list of the most common
css properties with the equivalent of the dom notation which is usually accessed from javascript: note: this list is incomplete.
... for more
css properties see the main
css reference and mozilla
css extensions.
...
css javascript background background background-attachment backgroundattachment background-color backgroundcolor background-image backgroundimage background-position backgroundposition background-repeat backgroundrepeat border border border-bottom borderbottom border-bottom-color borderbottomcolor border-bottom-style borderbottomstyle border-bottom-width borderbottomwidth border-color bordercolor border-left borderleft border-left-color borderleftcolor border-left-style borderleftstyle border-left-width borde...
... border-style borderstyle border-top bordertop border-top-color bordertopcolor border-top-style bordertopstyle border-top-width bordertopwidth border-width borderwidth clear clear clip clip color color cursor cursor display display filter filter float
cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position l...
CSS Shapes - CSS: Cascading Style Sheets
css shapes describe geometric shapes for use in
css.
... for the level 1 specification,
css shapes can be applied to floating elements.
... reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of
css shapes shapes from box values basic shapes shapes from images edit shape paths in
css — firefox developer tools external resources a list of
css shapes resources
css shapes 101 creating non-rectangular layouts with
css shapes how to use
css shapes in your web design how to get started with
css shapes what i learned in one weekend with
css shapes
css vs.
... svg: shapes and arbitrarily-shaped ui components specifications specification status comment
css shapes module level 1 candidate recommendation initial definition ...
CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of
css that defines how elements styled with
css can be transformed in two-dimensional or three-dimensional space.
... reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using
css transforms step-by-step tutorial about how to transform elements styled with
css.
... specifications specification status comment
css transforms level 1 working draft initial definition.
...
css transforms level 2 editor's draft adds individual transforms.
CSS Transitions - CSS: Cascading Style Sheets
css transitions is a module of
css that lets you create gradual transitions between the values of specific
css properties.
... reference properties transition transition-delay transition-duration transition-property transition-timing-function guides using
css transitions step-by-step tutorial about how to create transitions using
css.
... this article describes each relevant
css property and explains how they interact with each other.
... specifications specification status comment
css transitions working draft initial definition.
CSS data types - CSS: Cascading Style Sheets
css data types define typical values (including keywords and units) accepted by
css properties and functions.
... index the data types defined by the set of
css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <tim...
...ing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment
css values and units module level 4 editor's draft
css values and units module level 3 candidate recommendation initial definition.
... see also
css units and values introduction to
css: values and units ...
CSSMathSum.CSSMathSum() - Web APIs
the
cssmathsum() constructor creates a new
cssmathsum object which creates a new
csskeywordvalue object which represents the result obtained by calling add(), sub(), or tosum() on
cssnumericvalue.
... syntax var
cssmathsum = new
cssmathsum() parameters values one or more double integers or
cssnumericvalue objects.
... specifications specification status comment
css typed om level 1the definition of '
cssmathsum()' in that specification.
CSSPositionValue.CSSPositionValue() - Web APIs
the
csspositionvalue constructor creates a new
csspositionvalue object which represents values for properties that take a position, for example object-position.
... syntax cvar
csspositionvalue = new
csspositionvalue(x, y) parameters x a position along the web page's horizontal axis.
... let somediv = document.getelementbyid('container'); let position = new
csspositionvalue(
css.px(5),
css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); // 5 10 ...
CSSStyleDeclaration.cssText - Web APIs
the
csstext property of the
cssstyledeclaration interface returns or sets the text of the element's inline style declaration only.
... not to be confused with stylesheet style-rule
cssrule.
csstext.
... example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.
csstext); // "color: red;" </script> specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration:
csstext' in that specification.
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
the
cssunparsedvalue() constructor creates a new
cssunparsedvalue object which represents property values that reference custom properties.
... syntax var
cssunparsedvalue = new
cssunparsedvalue(members) parameters members an array whose values must be either a usvstring or a
cssvariablereferencevalue.
... examples let value = new
cssunparsedvalue( ['4deg'] ), values = new
cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); //
cssunparsedvalue {0: "4deg", length: 1} console.log( values ); //
cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45px", length: 3} specifications specification status comment
css typed om level 1the definition of '
cssunparsedvalue' in that specification.
CSSValue.cssText - Web APIs
the
csstext property of the
cssvalue interface represents the current computed
css property value.
... syntax
csstext =
cssvalue.
csstext; value a domstring representing the current
css property value.
... example var styledeclaration = document.stylesheets[0].
cssrules[0].style; var
cssvalue = styledeclaration.getproperty
cssvalue("color"); console.log(
cssvalue.
csstext); specifications specification status comment document object model (dom) level 2 style specificationthe definition of '
cssvalue.
csstext' in that specification.
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard
css basic box model.
...
css determines the size, position, and properties (color, background, border size, etc.) of these boxes.
...this default behavior can be altered with the background-clip
css property.
CSS Counter Styles - CSS: Cascading Style Sheets
css counter styles is a module of
css that lets you define your own counter styles.
... reference properties counter-increment counter-reset at-rules @counter-style system additive-symbols negative prefix suffix range pad speak-as fallback guides using
css counters describes how to use counters to number any html element or to perform complex counting.
... specifications specification status comment
css counter styles level 3 candidate recommendation initial definition.
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.
...this can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write
css rules to place absolutely everything.
...it would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.there is an issue raised about this on the
csswg github repository, and you would be welcome to add your own use cases to this.
CSS Lists - CSS: Cascading Style Sheets
css lists is a module of
css that defines how lists can be laid out and styled.
... using
css counters explains how to use the
css counter properties to control list counters.
... specifications specification status comment
css lists module level 3 working draft
css level 2 (revision 1) recommendation initial definition ...
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.
... (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) guides basic concepts of logical properties and values logical properties for sizing logical properties for margins, borders and padding logical properties for floating and positioning specifications specification status comment
css logical properties and values level 1 editor's draft initial definition.
CSS Positioned Layout - CSS: Cascading Style Sheets
css positioned layout is a module of
css that defines how to position elements on the page.
... reference
css properties bottom clear float left position right top z-index guides understanding
css z-index presents the notion of stacking context and explains how z-ordering works, with several examples.
... specifications specification status comment
css positioned layout module level 3 working draft
css level 2 (revision 1) recommendation ...
CSS Scroll Snap - CSS: Cascading Style Sheets
css scroll snap is a module of
css that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
...
css scroll snap is the current implementation.
... reference
css properties on containers scroll-snap-type scroll-snap-stop scroll-padding scroll-padding-top scroll-padding-right scroll-padding-bottom scroll-padding-left scroll-padding-inline scroll-padding-inline-start scroll-padding-inline-end scroll-padding-block scroll-padding-block-start scroll-padding-block-end
css properties on children scroll-snap-align scroll-margin scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left scroll-margin-inline scroll-margin-inline-start scroll-margin-inline-end scroll-margin-block scroll-margin-block-start scroll-margin-block-end guides basic concepts of
css scroll snap browser compatibility and scroll snap specification specification status comment
css scroll...
CSS selectors - CSS: Cascading Style Sheets
css selectors define the elements to which a set of
css rules apply.
...additional attribute selectors
css level 2 (revision 1) recommendation added the > child and + adjacent sibling combinators.
...
css level 1 recommendation initial definition.
CSS Text - CSS: Cascading Style Sheets
css text is a module of
css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.
... reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment
css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text.
...
css text module level 3 working draft
css level 2 (revision 1) recommendation
css level 1 recommendation initial definition ...
CSSMathProduct.CSSMathProduct() - Web APIs
the
cssmathproduct() constructor creates a new
cssmathproduct object which creates a new
cssmathproduct object which syntax var
cssmathproduct = new
cssmathproduct() parameters arg a value for the
cssmathproduct object to be constructed either a double integer or a
cssnumericvalue.
... specifications specification status comment
css typed om level 1the definition of '
cssmathproduct()' in that specification.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <div id="container"> <p id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </div>
css :root { --first-color: #488cff; --second-color: #ffff8c; } #firstparagraph { background-color: var(--first-color); color: var(--second-color); } #secondparagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph { background-color: var(--first-color); color: var(--second-color); } result specif...
...ications specification status comment
css custom properties for cascading variables module level 1the definition of '--*' in that specification.
CSSOM View - CSS: Cascading Style Sheets
cssom view is a module of
css that lets you manipulate the visual view of a document, in particular its scrolling behavior.
... specifications specification status comment
css object model (
cssom) view module working draft initial definition.
CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a
css module that lets you define the rendering and functionality of features related to the user interface.
... specifications specification status comment
css basic user interface module level 4 working draft
css basic user interface module level 3 recommendation
css level 2 (revision 1) recommendation initial definition.
CSS Charsets - CSS: Cascading Style Sheets
css charsets is a module of
css that lets you specify the character set used in the style sheet.
... reference at-rules @charset specifications specification status comment
css level 2 (revision 1)the definition of '@charset' in that specification.
CSS Conditional Rules - CSS: Cascading Style Sheets
css conditional rules is a
css module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.
... reference at-rules @document @media @supports @import specifications specification status comment
css conditional rules module level 3 candidate recommendation initial definition ...
CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of
css that lets you define the size, zoom factor, and orientation of the viewport.
... reference at-rules @viewport specifications specification status comment
css device adaptation working draft initial definition ...
CSS Fragmentation - CSS: Cascading Style Sheets
css fragmentation is a module of
css that defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.
... reference box-decoration-break break-after break-before break-inside orphans widows specifications specification status comment
css fragmentation module level 3 candidate recommendation initial definition.
CSS Generated Content - CSS: Cascading Style Sheets
css generated content is a module of
css that defines how to add content to an element.
... reference properties content quotes specifications specification status comment
css generated content module level 3 working draft
css level 2 (revision 1) recommendation initial definition ...
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
it may help to realize that this is due to grid using the flow-relative directions defined in the
css writing modes specification.
...grid-column-end: -3; grid-row-start: -1; grid-row-end: -2; } .box4 { grid-column-start: -2; grid-column-end: -4; grid-row-start: -3; grid-row-end: -4; } stretching an item across the grid being able to address the start and end lines of the grid is useful as you can then stretch an item right across the grid with: .item { grid-column: 1 / -1; } gutters or alleys the
css grid specification includes the ability to add gutters between column and row tracks with the grid-column-gap and grid-row-gap properties.
CSS Masking - CSS: Cascading Style Sheets
css masking is a
css module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.
... reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment
css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.
CSS Namespaces - CSS: Cascading Style Sheets
css namespaces is a
css module that allows authors to specify xml namespaces in
css.
... reference at-rules @namespace specifications specification status comment
css namespaces module recommendation initial definition ...
CSS Paged Media - CSS: Cascading Style Sheets
css paged media is a module of
css that defines how page switches are handled.
... reference
css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status comment
css paged media module level 3 working draft
css fragmentation module level 3 candidate recommendation
css level 2 (revision 1) recommendation ...
CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of
css that provides the rendering model and formatting controls related to the display of ruby annotation.
... reference properties ruby-align ruby-position specifications specification status comment
css ruby layout module level 1 working draft initial definition ...
CSS Table - CSS: Cascading Style Sheets
css table is a
css module that defines how to lay out table data.
... reference properties border-collapse border-spacing caption-side empty-cells table-layout vertical-align specifications specification status comment
css level 2 (revision 1) recommendation initial definition ...
CSS Text Decoration - CSS: Cascading Style Sheets
css text decoration is a module of
css that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.
...e users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment
css text decoration module level 4 working draft
css text decoration module level 3 candidate recommendation
css level 2 (revision 1) recommendation
css level 1 recommendation initial definition ...
CSS Custom Properties for Cascading Variables - CSS: Cascading Style Sheets
css custom properties for cascading variables is a
css module that allows for the creation of custom properties that can be used over and over.
...
css properties --* specifications specification status comment
css custom properties for cascading variables module level 1 candidate recommendation initial definition ...
CSS Writing Modes - CSS: Cascading Style Sheets
css writing modes is a
css module that defines various international writing modes, such as left-to-right (e.g.
... reference properties direction glyph-orientation-horizontal text-combine-upright text-orientation unicode-bidi writing-mode specifications specification status comment
css writing modes module level 3 proposed recommendation
css level 2 (revision 1) recommendation
css level 1 recommendation initial definition ...
Microsoft CSS extensions - CSS: Cascading Style Sheets
microsoft applications such as edge and internet explorer support a number of special microsoft extensions to
css.
...-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast
css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
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.
...start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your
css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
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.
... webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your
css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
CSS Flow Layout - CSS: Cascading Style Sheets
guides block and inline layout in normal flow in flow and out of flow formatting contexts explained flow layout and writing modes flow layout and overflow reference glossary entries block (
css) ...
CSS3 - Archive of obsolete content
css3 is the latest evolution of the cascading style sheets language and aims at extending
css2.1.
... modules and the standardization process
css level 2 needed 9 years, from august 2002 to june 2011 to reach the recommendation status.
...in order to accelerate the standardization of non-problematic features, the
css working group of the w3c, in a decision referred as the beijing doctrine, divided
css in smaller components called modules .
...And 86 more matches
How CSS is structured - Learn web development
previous overview: first steps next now that you are beginning to understanding the purpose and use of
css, let's examine the structure of
css.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works.
... objective: to learn
css's fundamental syntax structures in detail.
...And 61 more matches
Using the CSS Typed Object Model - Web APIs
the
css typed object model api exposes
css values as typed javascript objects to allow their performant manipulation.
... converting
css object model value strings into meaningfully-typed javascript representations and back (via htmlelement.style) can incur a significant performance overhead.
... the
css typed om makes
css manipulation more logical and performant by providing object features (rather than
cssom string manipulation), providing access to types, methods, and an object model for
css values.
...And 56 more matches
Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and
css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... this includes linting code, handling
css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
... prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high level principles of cross browser testing.
...And 48 more matches
Organizing your CSS - Learn web development
previous overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge
css file can be challenging.
... in this article we will take a brief look at some best practices for writing your
css to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with
css organization and team working.
...And 46 more matches
CSSPrimitiveValue - Web APIs
the
cssprimitivevalue interface derives from the
cssvalue interface and represents the current computed value of a
css property.
... this interface represents a single
css value.
...an instance of this interface might be obtained from the getproperty
cssvalue() method of the
cssstyledeclaration interface.
...And 44 more matches
CSS Typed Object Model API - Web APIs
the
css typed object model api simplifies
css property manipulation by exposing
css values as typed javascript objects rather than strings.
... this not only simplifies
css manipulation, but also lessens the negative impact on performance as compared to htmlelement.style.
... generally,
css values can be read and written in javascript as strings, which can be slow and cumbersome.
...And 34 more matches
What is CSS? - Learn web development
overview: first steps next
css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
... this article explains what
css is, with a simple syntax example, and also covers some key terms about the language.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to learn what
css is.
...And 32 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.
... the attr()
css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
... /* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the
css.
...And 31 more matches
Using the CSS Painting API - Web APIs
the
css paint api is designed to enable developers to programmatically define images which can then be used anywhere a
css image can be invoked, such as
css background-image, border-image, mask-image, etc.
... to programmatically create an image used by a
css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint()
css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header:
css paint worklet in an external script file, we employ the registerpaint() function to name our
css paint worklet.
...the first is the name we give the worklet — this is the name we will use in our
css as the parameter of the paint() function when we want to apply this styling to an element.
...And 29 more matches
Debugging CSS - Learn web development
previous overview: building blocks next sometimes when writing
css you will encounter an issue where your
css doesn't seem to be doing what you expect.
...this article will give you guidance on how to go about debugging a
css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of
css.
...And 28 more matches
The Firefox codebase: CSS Guidelines
this document contains guidelines defining how
css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
... basics here are some basic tips that can optimize reviews if you are changing
css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment).
... the overriding
css section contains more information about this.
...And 27 more matches
CSSPrimitiveValue.primitiveType - Web APIs
the primitivetype read-only property of the
cssprimitivevalue interface represents the type of a
css value.
... syntax type =
cssprimitivevalue.primitivetype; value an unsigned short representing the type of the value.
... possible values are: constant description
css_attr the value is an attr() function.
...And 27 more matches
CSS basics - Learn web development
previous overview: getting started with the web next
css (cascading style sheets) is the code that styles web content.
...
css basics walks through what you need to get started.
... what is
css?
...And 26 more matches
Getting started with CSS - Learn web development
previous overview: first steps next in this article we will take a simple html document and apply
css to it, learning some practical things about the language along the way.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of linking a
css document to an html file, and be able to do simple text formatting with
css.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with
css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text.
...And 25 more matches
<color> - CSS: Cascading Style Sheets
the <color>
css data type represents a color in the srgb color space.
...to learn more about using color in html, see applying color to html elements using
css.
... there are a few caveats to consider when using color keywords: html only recognizes the 16 basic color keywords found in
css1, using a specific algorithm to convert unrecognized values (often to completely different colors).
...And 25 more matches
CSS values and units - Learn web development
previous overview: building blocks next every property used in
css has a value or set of values that are allowed for that property, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the different types of values and units used in
css properties.
... what is a
css value?
...And 23 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 describes how elements should be rendered on screen, on paper, in speech, or on other media.
...
css among the core languages of the open web and is standardized across web browsers according to the w3c specification.
...And 23 more matches
CSS - Archive of obsolete content
obsolete
css features -moz-bindingthe -moz-binding
css property is used by mozilla-based applications to attach an xbl binding to a dom element.-moz-border-bottom-colorsin mozilla applications like firefox, the -moz-border-bottom-colors
css property sets a list of colors for the bottom border.-moz-border-left-colorsin mozilla applications like firefox, the -moz-border-left-colors
css property sets a list of colors for the left border.-moz-border-right-colorsin mozilla applications like firefox, the -moz-border-right-colors
css property sets a list of colors for the right border.-moz-border-top-colorsin mozilla applications like firefox, the -moz-border-top-colors
css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended
css property.
...for example, moving a child of the stack far to the right will widen the stack so the child remains visible.-moz-text-blinkthe -moz-text-blink non-standard mozilla
css extension specifies the blink mode.-moz-window-shadowthe -moz-window-shadow
css property specifies whether a window will have a shadow.
... it only works on mac os x.-ms-acceleratorthe -ms-accelerator
css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression
css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining
css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit
css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.-ms-content-zoom-limit-maxthe -ms-content-zoom-limit-max
css property is a mic...
...And 22 more matches
font - CSS: Cascading Style Sheets
the font
css shorthand property sets all the different properties of an element's font.
... constituent properties this property is a shorthand for the following
css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
...f font is specified as a shorthand 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.
...And 22 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
with
css, there are lots of ways to add color to your html elements to create just the look you want.
... this article is a primer introducing each of the ways
css color can be used in html.
... we're going to touch on most of what you'll need to know when using color, including a list of what you can color and what
css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts.
...And 22 more matches
CSS building blocks - Learn web development
this module carries on where
css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper.
... the aim here is to provide you with a toolkit for writing competent
css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and
css layout.
... an understanding of the basics of
css, as discussed in the
css first steps module.
...And 21 more matches
CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about
css, along with answers that may help you on your quest to become a web developer.
... why doesn't my
css, which is valid, render correctly?
... why doesn't my
css, which is valid, render at all?
...And 20 more matches
CSSPrimitiveValue.getFloatValue() - Web APIs
the getfloatvalue() method of the
cssprimitivevalue interface is used to get a float value in a specified unit.
... if this
css value doesn't contain a float value or can't be converted into the specified unit, a domexception is raised.
... syntax var floatvalue =
cssprimitivevalue.getfloatvalue(unit); parameters unittype an unsigned short representing the code for the unit type, in which the value should be returned.
...And 20 more matches
CSSPrimitiveValue.setFloatValue() - Web APIs
the setfloatvalue() method of the
cssprimitivevalue interface is used to set a float value.
... syntax
cssprimitivevalue.setfloatvalue(unittype, floatvalue); parameters unittype an unsigned short representing the code for the unit type, in which the value should be returned.
... valid values are: constant description
css_cm the value is a <length> in centimeters.
...And 19 more matches
CSS and JavaScript animation performance - Web Performance
there are many ways to implement web animations, such as
css transitions/animations or javascript-based animations (using requestanimationframe()).
... in this article, we analyse the performance differences between
css- and javascript-based animation.
...
css transitions and animations both
css transitions and animations can be used to write animation.
...And 19 more matches
How CSS works - Learn web development
previous overview: first steps next we have learned the basics of
css, what it is for and how to write simple stylesheets.
... in this lesson we will take a look at how a browser takes
css and html and turns that into a webpage.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of how
css and html are parsed by the browser, and what happens when a browser encounters
css it does not understand.
...And 18 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
<style type="text/
css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
... mozilla 1.1+/opera 7 do not apply
css or execute the javascript.
... netscape 7.0x/mozilla 1.0.x do not apply
css but does execute the javascript.
...And 17 more matches
CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next
css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
...this article outlines some
css and javascript best practices that should be considered to ensure even complex content is as accessible as possible.
... prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript, and understanding of what accessibility is.
...And 17 more matches
Adding a new CSS property
this page describes how to add a new
css property to the style system.
... once you know which struct you're going to use (or that the property is a shorthand), you can add appropriate entry to ns
cssproplist.h.
... parsing to start implementing the parsing, first read the syntax line in the property's specification (whose syntax is in turn defined in the
css values and units specification) and any prose in the specification that adds additional restrictions to that syntax.
...And 17 more matches
Examine and edit CSS - Firefox Developer Tools
you can examine and edit
css in the inspector's
css pane.
... examine
css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to change the display of certain
css and rules view features.
... a warning icon appears next to unsupported
css properties or rules that have invalid values.
...And 17 more matches
CSSStyleDeclaration - Web APIs
the
cssstyledeclaration interface represents an object that is a
css declaration block, and exposes style information and various style-related methods and properties.
... a
cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">).
... via the
cssstylesheet api.
...And 17 more matches
@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values
css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
... this can help simplify your
css when using multiple fonts.
... the @font-feature-values at-rule may be used either at the top level of your
css or inside any
css conditional-group at-rule.
...And 17 more matches
Box-shadow generator - CSS: Cascading Style Sheets
this tool lets you construct
css box-shadow effects, to add box shadow effects to your
css objects.
... <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title">
css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" ...
...m"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div>
css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .s...
...And 17 more matches
Variable fonts guide - CSS: Cascading Style Sheets
they let you access all the variations contained in a given font file via
css and a single @font-face reference.
...the w3c has undertaken mapping them to existing
css attributes, and in one case introduced a new one, which you'll see below.
...you can use these four-letter tags in
css to specify a point along that axis of variation, as will be show in the code examples below.
...And 17 more matches
Fundamental CSS comprehension - Learn web development
objective: to test comprehension of fundamental
css theory, syntax and mechanics.
... grab the
css resources text file — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment.
...you could paste the html and fill in the
css into one of these online editors, and use this url to point the <img> element to the image file.
...And 16 more matches
Learn to style HTML using CSS - Learn web development
cascading stylesheets — or
css — is the first technology you should start learning after html.
... while html is used to define the structure and semantics of your content,
css is used to style it and lay it out.
... for example, you can use
css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
...And 16 more matches
Specificity - CSS: Cascading Style Sheets
specificity is the means by which browsers decide which
css property values are the most relevant to an element and, therefore, will be applied.
... specificity is based on the matching rules which are composed of different sorts of
css selectors.
... specificity is a weight that is applied to a given
css declaration, determined by the number of each selector type in the matching selector.
...And 16 more matches
Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the
css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide
css that will only run based on the result of that test.
... syntax
css feature queries are part of the
css conditional rules module, which also contains the media query @media rule; when you use feature queries, you will find they behave in a similar way to media queries.
... the difference is that with a media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for
css features.
...And 15 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.
... the
css syntax reflects this goal and its basic building blocks are: the property which is an identifier, that is a human-readable name, that defines which feature is considered.
...
css declarations setting
css properties to specific values is the core function of the
css language.
...And 15 more matches
CSS Houdini
houdini is a set of low-level apis that exposes parts of the
css engine, giving developers the power to extend
css by hooking into the styling and layout process of a browser’s rendering engine.
... houdini is a group of apis that give developers direct access to the
css object model (
cssom), enabling developers to write code the browser can parse as
css, thereby creating new
css features without waiting for them to be implemented natively in browsers.
...browsers parse the
cssom — including layout, paint, and composite processes — before applying any style updates found in scripts.
...And 15 more matches
Introduction to CSS layout - Learn web development
overview:
css layout next this article will recap some of the
css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
... prerequisites: the basics of html (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to give you an overview of
css page layout techniques.
...
css page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
...And 14 more matches
CSSRule - Web APIs
the
cssrule interface represents a single
css rule.
... the
cssrule interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.
... references to a
cssrule may be obtained by looking at a
cssstylesheet's
cssrules list.
...And 14 more matches
CSSStyleSheet - Web APIs
the
cssstylesheet interface represents a single
css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
... a stylesheet consists of a collection of
cssrule objects representing each of the rules in the stylesheet.
... the rules are contained in a
cssrulelist, which can be obtained from the stylesheet's
cssrules property.
...And 14 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
kground </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="property">background:</span> <span class="value"></span> </div> </div> </div>
css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-s...
...'images/arrow.svg'); background-size: 24px 24px; position: absolute; right: -10px; top: -9.5px; } /** * output */ #output { width: 100%; padding: 10px 0; margin: 20px 0 50px 0; border: 2px dashed #ccc; border-radius: 5px; display: table; font-size: 13px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #output .
css-property { width: 90%; margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-wrap: break-word; display: block; right: 0; } javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function g...
...ener('mousedown', resizestart); elem.appendchild(handle); }; return { makeresizable : makeresizable }; })(); /** * gradient point */ var gradientpoint = function gradientpoint(axis) { var point = document.createelement('div'); point.classname = 'gradient-point'; this.position = 0; this.node = point; this.axis = axis; this.color = new hsvcolor(0, 0, 100); this.
csscolor = this.color.getcolor(); this.
cssposition = 0; this.prevpoint = null; this.nextpoint = null; this.axis.num_points++; point.addeventlistener('click', this.activate.bind(this)); trackmouse(point, this.updatepositionm.bind(this), this.startmove.bind(this), this.endmove.bind(this)); axis.line.appendchild(point); return this; }; gradientpoint.prototype.deletepoint = funct...
...And 14 more matches
display - CSS: Cascading Style Sheets
the display
css property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
...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.
... syntax the
css display property is specified using keyword values.
...And 14 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
each package has its own skin,
css files and images that determine the appearance of that package.
... writing
css files for a package learn
css!
... this may seem obvious, but many of the nastiest problems we're seeing are being caused by people writing buggy or syntactically incorrect
css.
...And 13 more matches
Styling Vue components with CSS - Learn web development
in this article we'll explore the different ways of styling vue components with
css.
... prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... styling vue components with
css before we move on to add more advanced features to our app, we should add some basic
css to make it look better.
...And 13 more matches
CSSCounterStyleRule - Web APIs
the
csscounterstylerule interface represents an @counter-style at-rule.
... this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/
csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent
cssrule.
...And 13 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/
css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://
css-tricks.com/using-flexbox/ a complete guide to flexbox |
css-tricks visual guide to
css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
... instead, you will need to use a
css pre-processor to make the most of the following.
... however,
css pre-processors simply generate valid
css, so the techniques used below can be written in pure
css instead, if preferred.
...And 13 more matches
CSS property compatibility table for form controls - Learn web development
the following compatibility tables try to summarize the state of
css support for html forms.
... due to the complexity of
css and html forms, these tables can't be considered a perfect reference.
... property n t note
css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
...And 12 more matches
Using multi-column layouts - CSS: Cascading Style Sheets
the
css multi-column layout module extends the block layout mode to allow the easy definition of multiple columns of text.
... unfortunately this is impossible to do with
css and html without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.
... this limitation is solved by adding new
css properties to extend the traditional block layout mode.
...And 12 more matches
Shorthand properties - CSS: Cascading Style Sheets
shorthand properties are
css properties that let you set the values of multiple other
css properties simultaneously.
... the
css specification defines shorthand properties to group the definition of common properties acting on the same theme.
... for instance, the
css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position.
...And 12 more matches
Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of
css, svg, and mobile devices — and differentiates between the visual viewport and the layout viewport.
...: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in
css pixels, including padding (but not borders, margins, or vertical scrollbars, if present).
... the window.innerwidth is the width, in
css pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
...And 12 more matches
Visual formatting model - CSS: Cascading Style Sheets
in
css the visual formatting model describes how user agents take the document tree, and process and display it for visual media.
... 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.
...And 12 more matches
url() - CSS: Cascading Style Sheets
the url()
css function is used to include a file.
...the url() function can be passed as a parameter of another
css functions, like the attr() function.
...; src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another
css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...And 12 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
in this article we will take a look at how flexbox fits in with all the other
css 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 11 more matches
<url> - CSS: Cascading Style Sheets
the <url>
css data type denotes a pointer to a resource, such as an image or a font.
... urls can be used in numerous
css properties, such as background-image, cursor, and list-style.
... in
css level 1, the url() functional notation described only true urls.
...And 11 more matches
CSS performance optimization - Learn web development
for this reason,
css is render blocking, unless the browser knows the
css is not currently needed.
... the browser can paint the page once it has downloaded the
css and built the
css object model.
... browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the
cssom trees.
...And 10 more matches
<custom-ident> - CSS: Cascading Style Sheets
the <custom-ident>
css data type denotes an arbitrary user-defined string used as an identifier.
... syntax the syntax of <custom-ident> is similar to
css identifiers (such as property names), except that it is case-sensitive.
... to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global
css values (unset, initial, and inherit), as well as none.
...And 10 more matches
::before (:before) - CSS: Cascading Style Sheets
in
css, ::before creates a pseudo-element that is the first child of the selected element.
... syntax /*
css3 syntax */ ::before /*
css2 syntax */ :before note:
css3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... browsers also accept :before, introduced in
css2.
...And 9 more matches
min-width - CSS: Cascading Style Sheets
the min-width
css property sets the minimum width of an element.
...ied 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.
... editor's draft
css box sizing module level 3the definition of 'min-width' in that specification.
...And 9 more matches
position - CSS: Cascading Style Sheets
the position
css property sets how an element is positioned in a document.
...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.
...this effectively inhibits any "sticky" behavior (see the github issue on w3c
csswg).
...And 9 more matches
CSS selectors - Learn web development
previous overview: building blocks next in
css, selectors are used to target the html elements on our web pages that we want to style.
... there are a wide variety of
css selectors available, allowing for fine-grained precision when selecting elements to style.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn how
css selectors work in detail.
...And 8 more matches
CSS first steps - Learn web development
css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... this module provides a gentle beginning to your path towards
css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html.
... guides this module contains the following articles, which will take you through all the basic theory of
css, and provide opportunities for you to test out some skills.
...And 8 more matches
CSS - Web APIs
the
css interface holds useful
css-related methods.
... properties the
css interface is a utility interface and no object of this type can be created: only static properties are defined on it.
... static properties
css.paintworklet secure context provides access to the worklet responsible for all the classes related to painting.
...And 8 more matches
CSSNumericValue - Web APIs
the
cssnumericvalue interface of the
css typed object model api represents operations that all numeric values can perform.
... interfaces based on
cssnumericvalue below is a list of interfaces based on the
cssnumericvalue interface.
...
cssmathinvert
cssmathmax
cssmathmin
cssmathnegate
cssmathproduct
cssmathsum
cssmathvalue
cssnumericarray
cssperspective
csspositionvalue
cssrotate
cssskew
cssskeyx
cssskeyw
csstranslate
cssunitvalue properties none.
...And 8 more matches
@supports - CSS: Cascading Style Sheets
the @supports
css at-rule lets you specify declarations that depend on a browser's support for one or more specific
css features.
... @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.
...'='<attr-modifier> = i | s examples testing for the support of a given
css property @supports (animation-name: test) { … /*
css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given
css property or a prefixed version @supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspe...
...And 8 more matches
Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate
css3 border-image values.
... </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </div> </div> </div> <div id="output" class="category"> <div class="title">
css code </div> <div class="
css-property"> <span class="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </span> </div> <div class="
css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> ...
... </div> <div class="
css-property"> <span class="name"> border-image-outset: </span> <span id="out-border-outset" class="value"> </span> </div> <div class="
css-property"> <span class="name"> border-image-repeat: </span> <span id="out-border-repeat" class="value"> </span> </div> <div class="
css-property"> <span class="name"> border-image-source: </span> <span id="out-border-source" class="value"> </span> </div> </div> </div> </div>
css content /* grid of twelve * ========================================================================== *...
...And 8 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source: no dimensions or intrinsic ratio given this
css: background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; the rendered output would look like this: source: one specified dimension, no intrinsic ratio given this
css: background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; the rendered output would look like this: source: one specified dimension with intrinsic ratio given this
css: backg...
...round: url(100px-height-3x4-ratio.svg); background-size: 275px 125px; the rendered output would look like this: source: no specified width or height with intrinsic ratio given this
css: background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; the rendered output would look like this: using contain or cover specifying cover for background-size makes the picture as small as possible while still covering the entire background area.
... background: url(no-dimensions-or-ratio.svg); background-size: auto 150px; here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the
css.
...And 8 more matches
background-size - CSS: Cascading Style Sheets
the background-size
css property sets the size of the element's background image.
...
css <gradient>s have no intrinsic dimensions or intrinsic proportions.
...rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the
css3 background-size specification and with the
css3 image values gradient specification.
...And 8 more matches
max-width - CSS: Cascading Style Sheets
the max-width
css property sets the maximum width of an element.
... </div> </div>
css #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; } result specifications specification status comment
css box sizing module level 4the definition of 'max-width' in that specification.
... editor's draft
css box sizing module level 3the definition of 'max-width' in that specification.
...And 8 more matches
CSSKeyframesRule - Web APIs
the
csskeyframesrule interface describes an object representing a complete set of keyframes for a
css animation.
...it implements the
cssrule interface with a type value of 7 (
cssrule.keyframes_rule).
... properties as a
cssrule,
csskeyframesrule also implements the properties of these interfaces.
...And 7 more matches
CSSStyleDeclaration.setProperty() - Web APIs
the
cssstyledeclaration.setproperty() method interface sets a new value for a property on a
css style declaration object.
... syntax style.setproperty(propertyname, value, priority); parameters propertyname is a domstring representing the
css property name (hyphen case) to be modified.
... priority optional is a domstring allowing the "important"
css priority to be set.
...And 7 more matches
CSSStyleSheet.insertRule() - Web APIs
the
cssstylesheet.insertrule() method inserts a new
css rule into the current style sheet, with some restrictions.
... note: although insertrule() is exclusively a method of
cssstylesheet, it actually inserts the rule into
cssstylesheet.
cssrules — its internal
cssrulelist.
... index optional a positive integer less than or equal to stylesheet.
cssrules.length, representing the newly inserted rule's position in
cssstylesheet.
cssrules.
...And 7 more matches
::after (:after) - CSS: Cascading Style Sheets
in
css, ::after creates a pseudo-element that is the last child of the selected element.
... syntax /*
css3 syntax */ ::after /*
css2 syntax */ :after note:
css3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... browsers also accept :after, introduced in
css2.
...And 7 more matches
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter
css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
...
css3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... browsers also accept :first-letter, introduced in
css2.
...And 7 more matches
content - CSS: Cascading Style Sheets
the content
css property replaces an element with a generated value.
... <counter>() the value of a
css counter, generally a number.
... accessibility concerns
css-generated content is not included in the dom.
...And 7 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.
... easing functions
css supports three kinds of easing functions: linear, the subset of the cubic bézier curves that are functions, and staircase functions.
...p0 and p3 are the start and the end of the curve and, in
css these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range).
...And 7 more matches
font-weight - CSS: Cascading Style Sheets
the font-weight
css property sets the weight (or boldness) of the font.
...
css fonts level 4 extends the syntax to accept any number between 1 and 1000 and introduces variable fonts, which can make use of this much finer-grained range of font weights.
... for the example below to work, you'll need a browser that supports the
css fonts level 4 syntax in which font-weight can be any number between 1 and 1000.
...And 7 more matches
<length> - CSS: Cascading Style Sheets
the <length>
css data type represents a distance value.
... lengths can be used in numerous
css properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
... note: although <percentage> values are also
css dimensions, and are usable in some of the same properties that accept <length> values, they are not themselves <length> values.
...And 7 more matches
max-height - CSS: Cascading Style Sheets
the max-height
css property sets the maximum height of an element.
...tion 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 max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment
css box sizing module level 4the definition of 'max-height' in that specification.
... editor's draft
css box sizing module level 3the definition of 'max-height' in that specification.
...And 7 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.
...for
css, use horizontal-tb instead.
...for
css, use horizontal-tb instead.
...And 7 more matches
Sizing items in CSS - Learn web development
previous overview: building blocks next in the various lessons so far you have come across a number of ways to size items on a web page using
css.
... understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via
css and define a few terms around sizing that will help you in the future.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to understand the different ways we can size things in
css.
...And 6 more matches
Animating CSS properties - Firefox Developer Tools
the performance cost of animating a
css property can vary from one property to another, and animating expensive
css properties can result in jank as the browser struggles to hit a smooth frame rate.
... the frame rate and waterfall can give you insight into the work the browser's doing in a
css animation, to help diagnose performance problems.
... with
css animations you specify a number of keyframes, each of which uses
css to define the appearance of the element at a particular stage of the animation.
...And 6 more matches
CSSGroupingRule - Web APIs
an object implementing the
cssgroupingrule interface represents any
css at-rule that contains other rules nested within it.
... objects deriving from it :
cssconditionrule and its children:
cssmediarule,
csssupportsrule, and
cssdocumentrule.
...
csspagerule syntax the syntax is described using the webidl format.
...And 6 more matches
CSSMediaRule - Web APIs
the
cssmediarule interface represents a single
css @media rule.
... it implements the
cssconditionrule interface, and therefore the
cssgroupingrule and the
cssrule interface with a type value of 4 (
cssrule.media_rule).
... interface
cssmediarule :
cssconditionrule { readonly attribute medialist media; } properties as a
cssconditionrule, and therefore both a
cssgroupingrule and a
cssrule,
cssmediarule also implements the properties of these interfaces.
...And 6 more matches
CSSUnparsedValue - Web APIs
the
cssunparsedvalue interface of the
css typed object model api represents property values that reference custom properties.
... custom properties are represented by
cssunparsedvalue and var() references are represented using
cssvariablereferencevalue.
... constructor
cssunparsedvalue.
cssunparsedvalue() creates a new
cssunparsedvalue object.
...And 6 more matches
::first-line (:first-line) - CSS: Cascading Style Sheets
the ::first-line
css pseudo-element applies styles to the first line of a block-level element.
... /* selects the first line of a <p> */ p::first-line { color: red; }
css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... browsers also accept :first-line, introduced in
css2.
...And 6 more matches
At-rules - CSS: Cascading Style Sheets
at-rules are
css statements that instructs
css how to behave.
... they begin with an at sign, '@' (u+0040 commercial at), followed by an identifier and includes everything up to the next semicolon, ';' (u+003b semicolon), or the next
css block, whichever comes first.
... @import — tells the
css engine to include an external style sheet.
...And 6 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.
...the rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2 note that the
css 2.1 specification describes documents as being in a horizontal, top to bottom writing mode.
...while we don’t tend to think of inline elements as having a box, as with everything in
css they do.
...And 6 more matches
font-size - CSS: Cascading Style Sheets
the font-size
css property sets the size of the font.
... the em is a very useful unit in
css, since it automatically adapts its length relative to the font that the reader chooses to use.
...take the following html and
css: html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; } <div> <span>outer <span>inner</span> outer</span> </div> the result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px.
...And 6 more matches
font-variant - CSS: Cascading Style Sheets
the font-variant
css shorthand property allows you to set all the font variants for a font.
... 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.
...And 6 more matches
text-transform - CSS: Cascading Style Sheets
the text-transform
css property specifies how to capitalize an element's text.
... the capitalize keyword was under-specified in
css 1 and
css 2.1.
...internet explorer 9 was the closest to the
css 2 definition, but with some weird cases.) by precisely defining the correct behavior,
css text level 3 cleans this mess up.
...And 6 more matches
SVG and CSS - SVG: Scalable Vector Graphics
this page illustrates the application of
css to the specialized language for creating graphics: svg.
...so to apply different styles to them you should use
css custom properties.
...copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla
css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle ...
...And 6 more matches
CSS layout - Learn web development
at this point we've already looked at
css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
...we have covered the necessary prerequisites so we can now dive deep into
css layout, looking at different display settings, modern layout tools like flexbox,
css grid, and positioning, and some of the legacy techniques you might still want to know about.
... be comfortable with
css fundamentals, as discussed in introduction to
css.
...And 5 more matches
CSSNamespaceRule - Web APIs
the
cssnamespacerule interface describes an object representing a single
css @namespace at-rule.
... it implements the
cssrule interface, with a type value of 10 (
cssrule.namespace_rule).
... interface
cssnamespacerule :
cssrule { readonly attribute domstring namespaceuri; readonly attribute domstring?
...And 5 more matches
CSSPageRule - Web APIs
csspagerule is an interface representing a single
css @page rule.
... it implements the
cssrule interface with a type value of 6 (
cssrule.page_rule).
... interface
csspagerule :
cssrule { attribute domstring selectortext; readonly attribute
cssstyledeclaration style; }; properties as a
cssrule,
csspagerule also implements the properties of this interface.
...And 5 more matches
CSSPrimitiveValue.setStringValue() - Web APIs
the setstringvalue() method of the
cssprimitivevalue interface is used to set a string value.
... syntax
cssprimitivevalue.setstringvalue(stringtype, stringvalue); parameters stringtype an unsigned short representing the type of the value.
... possible values are: constant description
css_attr the value is an attr() function.
...And 5 more matches
CSSValue - Web APIs
the
cssvalue interface represents the current computed value of a
css property.
... properties
cssvalue.
csstext a domstring representing the current value.
...
cssvalue.
cssvaluetyperead only an unsigned short representing a code defining the type of the value.
...And 5 more matches
CSSValueList - Web APIs
the
cssvaluelist interface derives from the
cssvalue interface and provides the abstraction of an ordered collection of
css values.
... the items in the
cssvaluelist are accessible via an integral index, starting from 0.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
cssvaluelist" ta...
...And 5 more matches
CSS Painting API - Web APIs
the
css painting api — part of the
css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
... concepts and usage essentially, the
css painting api contains functionality allowing developers to create custom values for paint(), a
css <image> function.
...to find out more about how this is used, consult using the
css painting api.
...And 5 more matches
ElementCSSInlineStyle.style - Web APIs
when getting, it returns a
cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
... see the
css properties reference for a list of the
css properties accessible via style.
... the style property has the same (and highest) priority in the
css cascade as an inline style declaration set via the style attribute.
...And 5 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.
... with it, you specify a media query and a block of
css to apply to the document if and only if the media query matches the device on which the content is being used.
... note: in javascript, the rules created using @media can be accessed with the
cssmediarule
css object model interface.
...And 5 more matches
@page - CSS: Cascading Style Sheets
the @page
css at-rule is used to modify some
css properties when printing a document.
... description you can't change all
css properties with @page.
...attempts to change any other
css properties will be ignored.
...And 5 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.
... this is not a comprehensive guide to the use of writing modes in
css, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways.
... 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 5 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
css grid layout has been designed to work alongside other parts of
css, as part of a complete system for doing the layout.
... grid and flexbox the basic difference between
css grid layout and
css flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column.
... the same layout with
css grids in this next example, i create the same layout using grid.
...And 5 more matches
Replaced elements - CSS: Cascading Style Sheets
in
css, a replaced element is an element whose representation is outside the scope of
css; they're external objects whose representation is independent of the
css formatting model.
...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.
...And 5 more matches
Value definition syntax - CSS: Cascading Style Sheets
css value definition syntax, a formal grammar, is used for defining the set of valid values for a
css property or function.
...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 5 more matches
background-image - CSS: Cascading Style Sheets
the background-image
css property sets one or more background images on an element.
...how the images are drawn relative to the box and its borders is defined by the background-clip and background-origin
css properties.
... </p> <p>and no more.</p> </div>
css p { font-size: 1.5em; color: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); backgro...
...And 5 more matches
border-color - CSS: Cascading Style Sheets
the border-color shorthand
css property sets the color of an element's border.
... 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 5 more matches
<percentage> - CSS: Cascading Style Sheets
the <percentage>
css data type represents a percentage value.
...as with all
css dimensions, there is no space between the symbol and the number.
...round-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-align - CSS: Cascading Style Sheets
the text-align
css property sets the horizontal alignment of a block element or table-cell box.
...</p>
css .example { text-align: left; border: solid; } result centered text html <p class="example"> integer elementum massa at nulla placerat varius.
...</p>
css .example { text-align: center; border: solid; } result justify html <p class="example"> integer elementum massa at nulla placerat varius.
...And 5 more matches
Used value - CSS: Cascading Style Sheets
the used value of a
css property is its value after all calculations have been performed on the computed value.
... after the user agent has finished its calculations, every
css property has a used value.
...putes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div>
css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used w...
...And 5 more matches
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
... the browser applies
css style declarations to selected elements to display them properly.
...
css is one of the three core web technologies, along with html and javascript.
...And 4 more matches
Using CSS generated content - Learn web development
this article describes some ways in which you can use
css to add content when a document is displayed.
... one of the important advantages of
css is that it helps you to separate a document's style from its content.
... examples text content
css can insert text content before or after an element.
...And 4 more matches
CSSConditionRule - Web APIs
an object implementing the
cssconditionrule interface represents a single condition
css at-rule, which consists of a condition and a statement block.
... it is a child of
cssgroupingrule.
... two objects derive from it :
cssmediarule and
csssupportsrule.
...And 4 more matches
CSSKeyframeRule - Web APIs
the
csskeyframerule interface describes an object representing a set of style for a given keyframe.
...it implements the
cssrule interface with a type value of 8 (
cssrule.keyframe_rule).
... properties as a
cssrule,
csskeyframerule also implements the properties of these interfaces.
...And 4 more matches
CSSKeywordValue - Web APIs
the
csskeywordvalue interface of the the
css typed object model api creates an object to represent
css keywords and other identifiers.
... the interface instance name is a stringifier meaning that when used anywhere a string is expected it will return the value of
csskeyword.value.
... constructor
csskeywordvalue.
csskeywordvalue() creates a new
csskeywordvalue object.
...And 4 more matches
CSSMathSum - Web APIs
the
cssmathsum interface of the
css typed object model api represents the result obtained by calling add(), sub(), or tosum() on
cssnumericvalue.
... a
cssmathsum is the object type returned when the stylepropertymapreadonly.get() method is used on a
css property whosevalue is created with a calc() function.
... constructor
cssmathsum.
cssmathsum() creates a new
cssmathsum object.
...And 4 more matches
CSSStyleRule - Web APIs
cssstylerule represents a single
css style rule.
... it implements the
cssrule interface with a type value of 1 (
cssrule.style_rule).
... properties
cssstylerule.selectortext returns the textual representation of the selector for this rule, e.g.
...And 4 more matches
CSSUnitValue - Web APIs
the
cssunitvalue interface of the
css typed object model api represents values that contain a single unit type.
... for example, "42px" would be represented by a
cssnumericvalue.
... constructor
cssstylevalue.
cssunitvalue() creates a new
cssunitvalue object.
...And 4 more matches
system - CSS: Cascading Style Sheets
] | [ extends <counter-style-name> ]where <counter-style-name> = <custom-ident> examples cyclic counter if your browser supports it, this example will render a list like this: ◉ one ◉ two ◉ three
css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; } result fixed counter if your browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three 4 four 5 five
css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five...
...eight
css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> </ul> @counter-style abc { system: symbolic; symbols: a b c; suffix: ".
...seven
css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> </ul> @counter-style abc { system: alphabetic; symbols: a b c; suffix: ".
...And 4 more matches
@import - CSS: Cascading Style Sheets
the @import
css at-rule is used to import style rules from other style sheets.
... list-of-media-queries is a comma-separated list of media queries conditioning the application of the
css rules defined in the linked url.
...<mf-value>where <mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio> examples importing
css rules @import 'custom.
css'; @import url("chrome://communicator/skin/"); importing
css rules conditionally @import url("fineprint.
css") print; @import url("bluish.
css") speech; @import "common.
css" screen; @import url('landscape.
css') screen and (orientation:landscape); specifications specification status comment
css cascading and inheritance level 4the definition ...
...And 4 more matches
OpenType font features guide - CSS: Cascading Style Sheets
this article provides you with all you need to know about using opentype font features in
css.
... caution: there are many
css attributes defined to leverage font features, but unfortunately many are not fully implemented.
...it's possible to write
css to work both ways but this can become cumbersome.
...And 4 more matches
animation - CSS: Cascading Style Sheets
the animation shorthand
css property applies an animation between styles.
...{ togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for
css transitions.
... constituent properties this property is a shorthand for the following
css properties: animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function syntax the animation property is specified as one or more single animations, separated by commas.
...And 4 more matches
background-position - CSS: Cascading Style Sheets
the background-position
css property sets the initial position for each background image.
... html <div class="exampleone">example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div>
css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozilla...
...*/ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'background-position' in that specification.
...And 4 more matches
border-width - CSS: Cascading Style Sheets
the border-width shorthand
css property sets the width of an element's border.
... 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;...
... and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "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 ...
...And 4 more matches
caption-side - CSS: Cascading Style Sheets
the caption-side
css property puts the content of a table's <caption> on the specified side.
... this value was proposed for
css 2, but removed from the final
css 2.1 specification.
... this value was proposed for
css 2, but removed from the final
css 2.1 specification.
...And 4 more matches
clear - CSS: Cascading Style Sheets
the clear
css property sets whether an element must be moved below (cleared) floating elements that precede it.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div>
css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consecte...
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div>
css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...And 4 more matches
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
the column-gap
css property sets the size of the gap (gutter) between an element's columns.
...
css grid layout initially defined the grid-column-gap property.
...responding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div>
css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div>
css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows:...
...And 4 more matches
float - CSS: Cascading Style Sheets
the float
css property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
...table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as
cssfloat, with internet explorer versions 8 and older using stylefloat.
... this was an exception to the rule, that the name of the dom member is the camel-case name of the dash-separated
css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and escape <label>'s "for" as "htmlfor").
...And 4 more matches
font-stretch - CSS: Cascading Style Sheets
the font-stretch
css property selects a normal, condensed, or expanded face from a font.
...
css fonts level 4 extends the syntax to accept a <percentage> value as well.
... html <div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div>
css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; fo...
...And 4 more matches
font-style - CSS: Cascading Style Sheets
the font-style
css property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
... for the example below to work, you'll need a browser that supports the
css fonts level 4 syntax in which font-style: oblique can accept an <angle>.
... html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div>
css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amst...
...And 4 more matches
<integer> - CSS: Cascading Style Sheets
the <integer>
css data type is a special type of <number> that represents a whole number, whether positive or negative.
... integers can be used in numerous
css properties, such as column-count, counter-increment, grid-column, grid-row, and z-index.
...during the
css3 values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in april 2012 during the lc phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed.
...And 4 more matches
margin-left - CSS: Cascading Style Sheets
the margin-left
css property sets the margin area on the left side of an element.
...to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment
css basic box modelthe definition of 'margin-left' in that specification.
... working draft no significant change from
css 2.1.
...And 4 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient()
css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
... {{embedinteractiveexample("pages/
css/function-repeating-conic-gradient.html")}} the source for this interactive example is stored in a github repository.
... note: rendering of color stops in
css gradients follows the same rules as color stops in svg gradients.
...And 4 more matches
<string> - CSS: Cascading Style Sheets
the <string>
css data type represents a sequence of characters.
... strings are used in numerous
css properties, such as content, font-family, and quotes.
... note: html entities (such as or —) cannot be used in a
css <string>.
...And 4 more matches
transform - CSS: Cascading Style Sheets
the transform
css property lets you rotate, scale, skew, or translate an element.
... it modifies the coordinate space of the
css visual formatting model.
...that is, all elements whose layout is governed by the
css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
...And 4 more matches
Creating reusable content with CSS and XBL - Archive of obsolete content
this page illustrates how you can use
css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.
...information: xbl bindings the structure provided by markup languages and
css is not ideal for complex applications where parts need to be self-contained and reusable.
...you can use
css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element.
...And 3 more matches
Chrome-only CSS reference
this page lists
css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... ua stylesheets.) note: most of the
css properties exposed to the web in general are also usable in chrome stylesheets: see the
css documentation for a list of these.
... -moz-window-draggingthe -moz-window-dragging
css property specifies whether a window is draggable or not.
...And 3 more matches
CSSMathValue.operator - Web APIs
the
cssmathvalue.operator read-only property of the
cssmathvalue interface indicates the operator that the current subtype represents.
... for example, if the current
cssmathvalue subtype is
cssmathsum, this property will return the string "sum".
... syntax var astring =
cssmathvalue.operator; value a string.
...And 3 more matches
CSSPrimitiveValue.getCounterValue() - Web APIs
the getcountervalue() method of the
cssprimitivevalue interface is used to get the counter value.
... if this
css value doesn't contain a counter value, a domexception is raised.
... syntax var countervalue =
cssprimitivevalue.getcountervalue(); return value a counter object representing the counter value.
...And 3 more matches
CSSPrimitiveValue.getRectValue() - Web APIs
the getrectvalue() method of the
cssprimitivevalue interface is used to get a rect value.
... if this
css value doesn't contain a rect value, a domexception is raised.
... syntax var rectvalue =
cssprimitivevalue.getrectvalue(); return value a rect object representing the rect value.
...And 3 more matches
CSSPseudoElement - Web APIs
the
csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
... properties
csspseudoelement.element read only returns the originating/parent element of the pseudo-element.
...
csspseudoelement.type read only returns the pseudo-element selector as a
cssomstring.
...And 3 more matches
CSSRuleList - Web APIs
a
cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of
cssrule objects.
... description each
cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the
cssrulelist interface (such as
cssstylesheet.
cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet
css.
...in fact, .insertrule() and .deleterule() are not even methods of
cssrulelist, but only of
cssstylesheet.
...And 3 more matches
CSSStyleSheet.rules - Web APIs
rules is a deprecated legacy property of the
cssstylesheet interface.
... functionally identical to the preferred
cssrules property, it provides access to a live-updating list of the
css rules comprising the stylesheet.
... note: as a legacy property, you not use rules and should instead use the preferred
cssrules.
...And 3 more matches
CSSVariableReferenceValue - Web APIs
the
cssvariablereferencevalue interface of the
css typed object model api allows you to create a custom name for a built-in
css value.
... this object functionality is sometimes called a "
css variable" and serves the same purpose as the var() function.
... constructor
cssvariablereferencevalue.
cssvariablereferencevalue() creates a new
cssvariablereferencevalue object.
...And 3 more matches
Using the CSS properties and values API - Web APIs
the
css properties and values api — part of the
css houdini umbrella of apis — allows the registration of
css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...there are two ways to register a property, in javascript or in
css.
...the
css option does not.
...And 3 more matches
CSS Properties and Values API - Web APIs
the
css properties and values api — part of the
css houdini umbrella of apis — allows developers to explicitly define their
css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
... interfaces
css.registerproperty defines how a browser should parse a
css custom properties.
... access this interface through
css.registerproperty in javascript.
...And 3 more matches
:visited - CSS: Cascading Style Sheets
the :visited
css pseudo-class represents links that the user has already visited.
... 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.
... html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a>
css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status comment html living standardthe definition of ':visited'...
...And 3 more matches
@document - CSS: Cascading Style Sheets
the @document
css at-rule restricts the style rules contained within it based on the url of the document.
... escaped values provided to the regexp() function must additionally be escaped from the
css.
...to match a literal period, you would first need to escape it using regular expression rules (to \.), then escape that string using
css rules (to \\.).
...And 3 more matches
font-weight - CSS: Cascading Style Sheets
the font-weight
css descriptor allows authors to specify font weights for the fonts specified in the @font-face rule.
...the values for the
css descriptor is same as that of its corresponding font property.
...
css fonts level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces variable fonts, which can make use of this much finer-grained range of font weights.
...And 3 more matches
-webkit-animation - CSS: Cascading Style Sheets
the -webkit-animation boolean
css media feature is a chrome extension whose value is true if vendor-prefixed
css animations are supported.
... apple has a description in safari
css reference.
... syntax the -webkit-animation media feature is a boolean whose value is true if the vendor-prefixed
css animation properties are supported.
...And 3 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size
css property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
... 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:...
...here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the
css is actually essentially identical, save the name of the image file.
...And 3 more matches
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <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" da...
...ta-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div>
css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, r...
...it also makes it easy to convert between various color formats supported by
css, including: hexa colors, rgb (red/green/blue) and hsl (hue/saturation/lightness).
...And 3 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout introduces a two-dimensional grid system to
css.
...this article introduces the
css grid layout and the new terminology that is part of the
css grid layout level 1 specification.
...
css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example.
...And 3 more matches
Using media queries - CSS: Cascading Style Sheets
media queries are used for the following: to conditionally apply styles with the
css @media and @import at-rules.
... note: the examples on this page use
css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries.
... deprecated media types:
css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used.
...And 3 more matches
Pseudo-classes - CSS: Cascading Style Sheets
a
css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
...
css basic user interface module level 3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
... no significant change for pseudo-classes defined in
css level 2 (revision 1).
...And 3 more matches
background-repeat - CSS: Cascading Style Sheets
the background-repeat
css property sets how background images are repeated.
...the position of the non-repeated background image is defined by the background-position
css property.
...ml <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol>
css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { backgroun...
...And 3 more matches
border-bottom-width - CSS: Cascading Style Sheets
the border-bottom-width
css property sets the width of the bottom border of an element.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-bottom-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.
...
css level 2 (revision 1)the definition of 'border-bottom-width' in that specification.
...And 3 more matches
border-style - CSS: Cascading Style Sheets
the border-style shorthand
css property sets the line style for all four sides of an element's border.
... constituent properties 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 */ ...
... html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
css /* define look of the table */ table { border-width: 3px; background-color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {...
...And 3 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.
... by default in the
css box model, the width and height you assign to an element is applied only to the element's content box.
... the box-sizing property can be used to adjust this behavior: content-box gives you the default
css box-sizing behavior.
...And 3 more matches
break-inside - CSS: Cascading Style Sheets
the break-inside
css property sets how page, column, or region breaks should behave inside a generated box.
...duis suscipit faucibus dui sed ultricies.</p> </article>
css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem...
...; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment
css fragmentation module level 3the definition of 'break-inside' in that specification.
...And 3 more matches
color - CSS: Cascading Style Sheets
the color
css property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
... for an overview of using color in html, see applying color to html elements using
css.
...owing are all ways to make a paragraph's text red: p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%, 50%); } /* 50% translucent */ p { color: #ff000080; } p { color: rgba(255, 0, 0, 0.5); } p { color: hsla(0, 100%, 50%, 0.5); } specifications specification status comment
css color module level 4the definition of 'color' in that specification.
...And 3 more matches
column-span - CSS: Cascading Style Sheets
the column-span
css property makes it possible for an element to span across all columns when its value is set to all.
... </p> <p>this is a bunch of text split into three columns using the
css `columns` property.
... the text is equally distributed over the columns.</p> <p>this is a bunch of text split into three columns using the
css `columns` property.
...And 3 more matches
<dimension> - CSS: Cascading Style Sheets
the <dimension>
css data type represents a <number> with a unit attached to it, for example 10px.
...
css uses dimensions to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities.
... specifications specification status comment
css values and units module level 4the definition of '<dimension>' in that specification.
...And 3 more matches
<frequency> - CSS: Cascading Style Sheets
the <frequency>
css data type represents a frequency dimension, such as the pitch of a speaking voice.
... it is not currently used in any
css properties.
...as with all
css dimensions, there is no space between the unit literal and the number.
...And 3 more matches
<image> - CSS: Cascading Style Sheets
the <image>
css data type represents a two-dimensional image.
... description
css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster format.
... images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a
css gradient.
...And 3 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.
... specifications specification status comment
css cascading and inheritance level 4the definition of 'inherit' in that specification.
...And 3 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient()
css function creates an image consisting of a progressive transition between two or more colors along a straight line.
... note: rendering of color stops in
css gradients follows the same rules as color stops in svg gradients.
...a color can be declared as two adjacent color stops by including both positions in the
css declaration.
...And 3 more matches
<number> - CSS: Cascading Style Sheets
the <number>
css data type represents a number, being either an integer or a number with a fractional component.
... interpolation when animated, values of the <number>
css data type are interpolated as real, floating-point numbers.
... specifications specification status comment
css values and units module level 4the definition of '<number>' in that specification.
...And 3 more matches
padding - CSS: Cascading Style Sheets
the padding
css shorthand property sets the padding area on all four sides of an element at once.
... constituent properties this property is a shorthand for the following
css properties: padding-bottom padding-left padding-right padding-top syntax /* apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* global values */ padding: inherit; padding: initial; padding: unset; the padding property may be specified ...
...dding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3>
css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and...
...And 3 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.
... examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status comment
css values and units module level 3the definition of '<position>' in that specification.
... candidate recommendation relists links to both definitions: if
css backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
...And 3 more matches
<resolution> - CSS: Cascading Style Sheets
the <resolution>
css data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
... on screens, the units are related to
css inches, centimeters, or pixels, not physical values.
...as with all
css dimensions, there is no space between the unit literal and the number.
...And 3 more matches
text-decoration - CSS: Cascading Style Sheets
the text-decoration shorthand
css property sets the appearance of decorative lines on text.
... constituent properties this property is a shorthand for the following
css properties: text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.
...e users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status comment
css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
...And 3 more matches
transition - CSS: Cascading Style Sheets
the transition
css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
... constituent properties this property is a shorthand for the following
css properties: transition-delay transition-duration transition-property transition-timing-function syntax /* apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing ...
...this may be any one of: the keyword none the keyword all a <custom-ident> naming a
css property.
...And 3 more matches
Test your skills: CSS and JavaScript accessibility - Learn web development
this aim of this skill test is to assess whether you've understood our
css and javascript accessibility best practices article.
...
css accessibility 1 in the first task you are presented with a list of links.
...
css accessibility 2 in this next task you are presented with a simple bit of content — just headings and paragraphs.
...And 2 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
the grid inspector allows you to examine
css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... discovering
css grids when an html element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features.
... in the
css pane in the
css pane's rules view, any instance of a display: grid declaration gets a grid icon included within it: .
...And 2 more matches
CSS.supports() - Web APIs
the
css.supports() method returns a boolean value indicating if the browser supports a given
css feature, or not.
... syntax
css.supports(propertyname, value);
css.supports(supportcondition); parameters there are two distinct sets of parameters.
... the first one allows to test the support of a pair property-value: propertyname a domstring containing the name of the
css property to check.
...And 2 more matches
CSSMathValue - Web APIs
the
cssmathvalue interface of the
css typed object model api a base class for classes representing complex numeric values.
... interfaces based on
cssmathvalue below is a list of interfaces based on the
cssmathvalue interface.
...
cssmathinvert
cssmathmax
cssmathmin
cssmathnegate
cssmathproduct
cssmathsum properties
cssmathvalue.operator indicates the operator that the current subtype represents.
...And 2 more matches
CSSNumericValue.max() - Web APIs
the max() method of the
cssnumericvalue interface returns the highest value from among the values passed.
... syntax var
cssunitvalue =
cssnumericvalue.man(number1 ...
... numbern); parameters number either a number or a
cssnumericvalue.
...And 2 more matches
CSSNumericValue.min() - Web APIs
the min() method of the
cssnumericvalue interface returns the lowest value from among those values passed.
... syntax var
cssunitvalue =
cssnumericvalue.min(number1 ...
... numbern); parameters number either a number or a
cssnumericvalue.
...And 2 more matches
CSSNumericValue.parse() - Web APIs
the parse() method of the
cssnumericvalue interface converts a value string into an object whose members are value and the units.
... syntax var
cssnumericvalue =
cssnumericvalue.parse(
csstext); parameters
csstext a string containing numeric and unit parts.
... return value a
cssnumericvalue.
...And 2 more matches
CSSPositionValue - Web APIs
the
csspositionvalue interface of the the
css typed object model api represents values for properties that take a position, for example object-position.
... constructor
csspositionvalue.
csspositionvalue() creates a new
csspositionvalue object.
... properties
csspositionvalue.x returns the item's position along the web page's horizontal axis.
...And 2 more matches
CSSPrimitiveValue.getRGBColorValue() - Web APIs
the getrgbcolorvalue() method of the
cssprimitivevalue interface is used to get an rgb color value.
... if this
css value doesn't contain a rgb color value, a domexception is raised.
... syntax var rgbcolorvalue =
cssprimitivevalue.getrgbcolorvalue(); return value an rgbcolor object representing the color value.
...And 2 more matches
CSSPrimitiveValue.getStringValue() - Web APIs
the getstringvalue() method of the
cssprimitivevalue interface is used to get a string value.
... if this
css value doesn't contain a string value, a domexception is raised.
... syntax var stringvalue =
cssprimitivevalue.getstringvalue(); return value a string value.
...And 2 more matches
CSSStyleDeclaration.parentRule - Web APIs
the
cssstyledeclaration.parentrule read-only property returns a
cssrule that is the parent of this style block, e.g.
... a
cssstylerule representing the style for a
css selector.
... syntax var rule = styles.parentrule; value the
css rule that contains this declaration block or null if this
cssstyledeclaration is not attached to a
cssrule.
...And 2 more matches
CSSStyleSheet.addRule() - Web APIs
the obsolete
cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
... syntax var result =
cssstylesheet.addrule(selector, styleblock, index); parameters selector a domstring specifying the selector portion of the
css rule.
... index optional an optional index into the stylesheet's
cssrulelist at which to insert the new rule.
...And 2 more matches
CSSStyleValue.parse() - Web APIs
the parse() method of the
cssstylevalue interface sets a specific
css property to the specified values and returns the first value as a
cssstylevalue object.
... syntax
cssstylevalue.parse(property,
csstext) parameters property a
css property to set.
...
csstext a comma-separated string containing one or more values to apply to the provided property.
...And 2 more matches
CSSStyleValue.parseAll() - Web APIs
the parseall() method of the
cssstylevalue interface sets all occurences of a specific
css property to the specified value and returns an array of
cssstylevalue objects, each containing one of the supplied values.
... syntax
cssstylevalue.parseall(property, value) parameters property a
css property to set.
...
csstext a comma-separated string containing one or more values that apply to the provided property.
...And 2 more matches
CSSStyleValue - Web APIs
the
cssstylevalue interface of the the
css typed object model api is the base class of all
css values accessible through the typed om api.
... interfaces based on
cssstylevalue below is a list of interfaces based on the
cssstylevalue interface.
...
cssimagevalue
csskeywordvalue
cssnumericvalue
csspositionvalue
csstransformvalue
cssunparsedvalue methods
cssstylevalue.parse() sets a specific
css property to the specified values and returns the first value as a
cssstylevalue object.
...And 2 more matches
CSSSupportsRule - Web APIs
the
csssupportsrule interface describes an object representing a single
css @supports at-rule.
... it implements the
cssconditionrule interface, and therefore the
cssrule and
cssgroupingrule interfaces with a type value of 12 (
cssrule.supports_rule).
... interface
csssupportsrule :
cssconditionrule { } properties as a
cssconditionrule and therefore a
cssrule and a
cssgroupingrule,
csssupportsrule also implements the properties of these interfaces.
...And 2 more matches
CSSValueList.item() - Web APIs
the item() method of the
cssvaluelist interface is used to retrieve a
cssvalue by ordinal index.
... the order in this collection represents the order of the values in the
css style property.
... syntax var
cssvalue =
cssvaluelist.item(index); parameters index an unsigned long representing the index of the
css value within the collection.
...And 2 more matches
::selection - CSS: Cascading Style Sheets
the ::selection
css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
... ::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.
...<p>also try selecting text in this paragraph.</p>
css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { 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.
...And 2 more matches
:active - CSS: Cascading Style Sheets
the :active
css pseudo-class represents an element (such as a button) that is being activated by the user.
... 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.
...</p>
css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* 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 specifi...
...And 2 more matches
:first - CSS: Cascading Style Sheets
the :first
css pseudo-class, used with the @page at-rule, represents the first page of a printed document.
... (see :first-child for general first element of a node.) /* selects the first page when printing */ @page :first { margin-left: 50%; margin-top: 50%; } note: you can't change all
css properties with this pseudo-class.
... syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button>
css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example.
...And 2 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.
... 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; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ...
... specifications specification status comment
css scoping module level 1the definition of ':host()' in that specification.
...And 2 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
note: :matches() was renamed to :is() in
csswg issue #3258.
... 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.
...; } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your
css selectors.
...And 2 more matches
:target - CSS: Cascading Style Sheets
the :target
css pseudo-class represents a unique element (the target element) with an id matching the url's 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 javascrip...
...once targeted, the
css changes their display so that they are shown.
...And 2 more matches
font-stretch - CSS: Cascading Style Sheets
the font-stretch
css descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face rule.
...the values for the
css descriptor is same as that of its corresponding font property.
...
css fonts level 4 extends the syntax to accept a <percentage> value as well.
...And 2 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.
... the @font-face at-rule may be used not only at the top level of a
css, but also inside any
css conditional-group at-rule.
... @font-face cannot be declared within a
css selector.
...And 2 more matches
@keyframes - CSS: Cascading Style Sheets
the @keyframes
css at-rule controls the intermediate steps in a
css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
...this must match the identifier production in
css syntax.
... description javascript can access the @keyframes at-rule with the
css object model interface
csskeyframesrule.
...And 2 more matches
-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-transform-2d boolean
css media feature is a chrome extension whose value is true if vendor-prefixed
css 2d transforms are supported.
... apple has a description in safari
css reference.
... syntax -webkit-transform-2d is a boolean
css media feature whose value is true if the browser supports -webkit prefixed
css 2d transforms.
...And 2 more matches
-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-3d boolean
css media feature is a chrome extension whose value is true if vendor-prefixed
css 3d transforms are supported.
... syntax -webkit-transform-3d is a boolean
css media feature whose value is true if the browser supports -webkit prefixed
css 3d transforms.
... values true the browser supports the 3d
css transforms with the -webkit prefix.
...And 2 more matches
@viewport - CSS: Cascading Style Sheets
note: see https://github.com/w3c/
csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track.
... the @viewport
css at-rule lets you configure the viewport through which the document is viewed.
... @viewport { width: 100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a
css block that is delimited by curly braces.
...And 2 more matches
Alternative style sheets - CSS: Cascading Style Sheets
for example: <link href="reset.
css" rel="stylesheet" type="text/
css"> <link href="default.
css" rel="stylesheet" type="text/
css" title="default style"> <link href="fancy.
css" rel="alternate stylesheet" type="text/
css" title="fancy"> <link href="basic.
css" rel="alternate stylesheet" type="text/
css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "defa...
... no matter what style is selected, the rules from the reset.
css stylesheet will always be applied.
... living standard
css object model (
cssom)the definition of '
css style sheet collections' in that specification.
...And 2 more matches
Attribute selectors - CSS: Cascading Style Sheets
the
css attribute selector matches elements based on the presence or value of a given attribute.
... examples links
css a { color: blue; } /* internal links, beginning with "#" */ a[href^="#"] { background-color: gold; } /* links with "example" anywhere in the url */ a[href*="example"] { background-color: silver; } /* links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capital...
....org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages
css /* all divs with a `lang` attribute are bold.
...And 2 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
gecko 1.8 supports url values for the
css cursor property on windows and linux.
... 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.
... support for the
css 3 syntax for cursor values got added in gecko 1.8 (firefox 1.5): cursor: [ <uri> [ <x> <y> ]?
...And 2 more matches
Basic Concepts of Multicol - CSS: Cascading Style Sheets
key concepts and terminology multicol is unlike any of the other layout methods we have in
css in that it fragments the content, including all descendent elements, into columns.
... this happens in the same way that content is fragmented into pages when we work with
css paged media, for example by creating a print stylesheet.
... this
css would give the same result as example 1, column-count set to 3.
...And 2 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.
... if you want to include very old browsers with flexbox support then you can include the vendor prefixes in your
css in addition to the unprefixed version.
... display: table- the
css table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8.
...And 2 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
this can be contrasted with the two-dimensional model of
css grid layout, which controls columns and rows together.
...in the past,
css was heavily weighted towards horizontal and left-to-right writing modes.
... after a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as
css grid layout which follow the same patterns.
...And 2 more matches
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
in this guide i will explain how this works, what it is designed for and what situations really require
css grid layout rather than flexbox.
...we can compare our wrapped row example above with the
css grid version of that layout to see the difference.
... the following live sample uses
css grid layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns.
...And 2 more matches
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-relative mappings for many of the properties and values in
css.
...
css traditionally has sized things according to the physical dimensions of the screen.
...i have a layout using
css grid, the grid container has a width applied and i am using the align-self and justify-self properties to align the items.
...And 2 more matches
Descendant combinator - CSS: Cascading Style Sheets
/* 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.
... additionally, the white space characters of which the combinator is comprised may contain any number of
css comments.
... syntax selector1 selector2 { /* property declarations */ } examples
css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>item 1</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> <li> <div>item 2</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> </ul> result specifications specification status comment selectors level 4the definition of 'descendant combinator' in that specification.
...And 2 more matches
all - CSS: Cascading Style Sheets
the all shorthand
css property resets all of an element's properties except unicode-bidi, direction, and
css custom properties.
... 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.
...
css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
...And 2 more matches
animation-delay - CSS: Cascading Style Sheets
the animation-delay
css property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
... formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-delay' in that specification.
...And 2 more matches
animation-direction - CSS: Cascading Style Sheets
the animation-direction
css property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
... formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-direction' in that specification.
...And 2 more matches
background-attachment - CSS: Cascading Style Sheets
the background-attachment
css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
...</p>
css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p>
css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'backgro...
...And 2 more matches
background - CSS: Cascading Style Sheets
the background shorthand
css property sets all background style properties at once, such as color, image, origin and size, or repeat method.
... constituent properties this property is a shorthand for the following
css properties: background-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 backgroun...
...or> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p>
css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'background' in that specification.
...And 2 more matches
border-bottom - CSS: Cascading Style Sheets
the border-bottom shorthand
css property sets an element's bottom border.
... 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.
...</div>
css div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-bottom' in that specification.
...And 2 more matches
border-left - CSS: Cascading Style Sheets
the border-left shorthand
css property set an element's left border.
... 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.
...</div>
css div { border-left: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-left' in that specification.
...And 2 more matches
border-right - CSS: Cascading Style Sheets
the border-right shorthand
css property sets the properties of an element's right border.
... 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.
...</div>
css div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-right' in that specification.
...And 2 more matches
border-top - CSS: Cascading Style Sheets
the border-top shorthand
css property sets all the properties of an element's top border.
... 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.
...</div>
css div { border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-top' in that specification.
...And 2 more matches
border - CSS: Cascading Style Sheets
the border shorthand
css property sets an element's border.
... constituent properties this property is a shorthand for the following
css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below.
...amazing, isn't it?</div>
css div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border' in that specification.
...And 2 more matches
box-direction - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the box-direction
css property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
... formal definition initial valuenormalapplies toelements with a
css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of an...
...And 2 more matches
box-orient - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the box-orient
css property sets whether an element lays out its contents horizontally or vertically.
...this
css property will only apply to html elements with a
css display value of box or inline-box.
...And 2 more matches
break-after - CSS: Cascading Style Sheets
the break-after
css property sets how page, column, or region breaks should behave after a generated box.
...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 ...
...
css regions module level 1the definition of 'break-after' in that specification.
...And 2 more matches
break-before - CSS: Cascading Style Sheets
the break-before
css property sets how page, column, or region breaks should behave before a generated box.
...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...
...
css regions module level 1the definition of 'break-before' in that specification.
...And 2 more matches
calc() - CSS: Cascading Style Sheets
the calc()
css function lets you perform calculations when specifying
css property values.
...in this example, the
css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> ...
... let's look at some
css: input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available window width.
...And 2 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient()
css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
... note: rendering of color stops in
css gradients follows the same rules as color stops in svg gradients.
...while it is possible to create pie charts, checkerboards, and other effects with conic gradients,
css images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users.
...And 2 more matches
counter() - CSS: Cascading Style Sheets
the counter()
css function returns a string representing the current value of the named counter, if there is one.
... 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.
...)where <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li></li> <li></li> <li></li> </ol>
css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::after { content: "[" counter(listcounter) "] == [" counter(listcounter, upper-roman) "]"; } result decimal-leading-zero compared to lower-alpha html <ol> <li></li> <li></li> <li></li> </ol>
css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[...
...And 2 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.
... note: the counters() 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.
...-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol>
css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> ...
...And 2 more matches
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
firefox 70 implemented the two-value syntax for the display property, which is part of the
css display module level 3.
... one of the first things we learn about
css is that some elements are block-level and some are inline-level.
...for example to make a heading inline we would use the following
css: h1 { display: inline; } more recently we have gained
css grid layout and flexbox.
...And 2 more matches
<display-box> - CSS: Cascading Style Sheets
please note that the
css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by
css box concepts such as replaced elements.
...this is incorrect behavior according to the
csswg specification.
... more accessible markup with display: contents | hidde de vries display: contents is not a
css reset | adrian roselli examples in this first example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered.
...And 2 more matches
element() - CSS: Cascading Style Sheets
the element()
css function defines an <image> value generated from an arbitrary html element.
... this image is live, meaning that if the html element is changed, the
css properties using the resulting value are automatically updated.
... 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 2 more matches
font-family - CSS: Cascading Style Sheets
the font-family
css property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
...</div> specifications specification status comment
css fonts module level 4the definition of 'generic font families' in that specification.
...
css fonts module level 3the definition of 'font-family' in that specification.
...And 2 more matches
font-variation-settings - CSS: Cascading Style Sheets
the font-variation-settings
css property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.
... here are the registered axes along with their corresponding
css properties: axis tag
css property "wght" font-weight "wdth" font-stretch "slnt" (slant) font-style: oblique + angle "ital" font-style: italic "opsz" font-optical-sizing custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs,...
... weight (wght) the following live example's
css can be edited to allow you to play with font weight values.
...And 2 more matches
gap (grid-gap) - CSS: Cascading Style Sheets
the gap
css property sets the gaps (gutters) between rows and columns.
...
css grid layout initially defined the grid-gap property.
... examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
css #grid...
...And 2 more matches
height - CSS: Cascading Style Sheets
the height
css property specifies the height of an element.
... </div> </div>
css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status comment
css box sizing module level 4the definition of 'height' in that specification.
... editor's draft
css box sizing module level 3the definition of 'height' in that specification.
...And 2 more matches
image-orientation - CSS: Cascading Style Sheets
the image-orientation
css property specifies a layout-independent correction to the orientation of an image.
...will not apply any additional image rotation; the image is oriented as encoded or as other
css property values dictate.
... if used in conjunction with other
css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations.
...And 2 more matches
initial - CSS: Cascading Style Sheets
the initial
css keyword applies the initial (or default) value of a property to an element.
... 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.
...And 2 more matches
list-style-type - CSS: Cascading Style Sheets
the list-style-type
css property sets the marker (such as a disc, character, or custom counter style) of a list item element.
...ion typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol>
css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status comment
css counter styles level 3the definition of 'list-style-type' in that specification.
... candidate recommendation redefines
css2.1 counters.
...And 2 more matches
margin-bottom - CSS: Cascading Style Sheets
the margin-bottom
css property sets the margin area on the bottom of an element.
...entagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div>
css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px so...
...lid black; } div { width:320px; background-color:gold; } result specifications specification status comment
css basic box modelthe definition of 'margin-bottom' in that specification.
...And 2 more matches
margin-right - CSS: Cascading Style Sheets
the margin-right
css property sets the margin area on the right side of an element.
...he width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment
css basic box modelthe definition of 'margin-right' in that specification.
... working draft no significant change
css flexible box layout modulethe definition of 'margin-right' in that specification.
...And 2 more matches
margin - CSS: Cascading Style Sheets
the margin
css property sets the margin area on all four sides of an element.
... formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div>
css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ mar...
... specifications specification status comment
css basic box modelthe definition of 'margin' in that specification.
...And 2 more matches
object-fit - CSS: Cascading Style Sheets
the object-fit
css property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
...48a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section>
css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: conta...
...in; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment
css images module level 4the definition of 'object-fit' in that specification.
...And 2 more matches
offset-path - CSS: Cascading Style Sheets
the offset-path
css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or svg coordinate system.
...0 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the
css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the
css radial gradient size values from closest-side to farthest-corner, and the keyterm contain.
... <basic-shape> specifies a
css shape including circle(), ellipse(), inset(), polygon(), or path().
...And 2 more matches
outline-style - CSS: Cascading Style Sheets
the outline-style
css property sets the style of an element's outline.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in
css, e.g.
... html <div> <p class="auto">outline demo</p> </div>
css .auto { outline-style: auto; /* same result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to dashed and dotted html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div>
css .dotted { outline-style: dotted; /* same result as "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to solid and double html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div>
css .solid { outline-style:...
...And 2 more matches
overflow - CSS: Cascading Style Sheets
the overflow
css shorthand property sets the desired behavior for an element's overflow — i.e.
... constituent properties this property is a shorthand for the following
css properties: overflow-x overflow-y syntax /* keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* global values */ overflow: inherit; overflow: initial; overflow: unset; the overflow property is specified as one or two keywords chosen from the list of values below.
...in about:config, set layout.
css.overflow.moz-scrollbars.enabled to true description overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.
...And 2 more matches
paint() - CSS: Cascading Style Sheets
the paint()
css function defines an <image> value generated with a paintworklet.
... parameters optional additional parameters to pass to the paintworklet examples you can pass additional arguments via the
css paint() function.
... <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul>
css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/
csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); ...
...And 2 more matches
resize - CSS: Cascading Style Sheets
the resize
css property sets whether an element is resizable, and if so, in which directions.
... html <textarea>type some text here.</textarea>
css textarea { resize: none; /* disables resizability */ } result using resize with arbitrary elements you can use the resize property to make any element resizable.
... html <div class="resizable"> <p class="resizable"> this paragraph is resizable in all directions, because the
css `resize` property is set to `both` on this element.
...And 2 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.
... the revert keyword is different from and should not be confused with initial, which uses the initial value defined on a per-property basis by the
css specifications.
...And 2 more matches
right - CSS: Cascading Style Sheets
the right
css property participates in specifying the horizontal position of a positioned element.
...g blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div>
css #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constr...
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div>
css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status com...
...And 2 more matches
shape-outside - CSS: Cascading Style Sheets
the shape-outside
css property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
... <shape-box> the float area is computed according to the shape of a float element's edges (as defined by the
css box model).
... </p> </div>
css .main { width: 530px; } .left, .right { width: 40%; height: 12ex; background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 10...
...And 2 more matches
text-indent - CSS: Cascading Style Sheets
the text-indent
css property sets the length of empty space (indentation) that is put before lines of text in a block.
...e?where <length-percentage> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
css p { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p...
...>
css p { text-indent: 30%; background: plum; } result specifications specification status comment
css text module level 3the definition of 'text-indent' in that specification.
...And 2 more matches
text-overflow - CSS: Cascading Style Sheets
the text-overflow
css property sets how hidden overflow content is signaled to users.
...to make text overflow its container you have to set other
css properties: overflow and white-space.
... formal definition initial valueclipapplies toblock container elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ clip | ellipsis | <string> ]{1,2} examples
css p { width: 200px; border: 1px solid; padding: 2px 5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-string { /* not supported in most browsers, see the 'browser compatibil...
...And 2 more matches
text-shadow - CSS: Cascading Style Sheets
the text-shadow
css property adds shadows to text.
...adow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em georgia, serif; } <p class="white-text-with-blue-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> specifications specification status comment
css text decoration module level 3the definition of 'text-shadow' in that specification.
... candidate recommendation the
css property text-shadow was improperly defined in
css2 and dropped in
css2 (level 1).
...And 2 more matches
<transform-function> - CSS: Cascading Style Sheets
the <transform-function>
css data type represents a transformation that affects an element's appearance.
... in
css (and most computer graphics), the origin (0, 0) represents the top-left corner of any element.
...slate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main>
css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position:...
...And 2 more matches
white-space - CSS: Cascading Style Sheets
the white-space
css property sets how white space inside an element is handled.
...nitial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="
css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magn...
... excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #
css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #
css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#
css-code select"); var results = document.queryselector("#results p"); select.addeve...
...And 2 more matches
width - CSS: Cascading Style Sheets
the width
css property sets an element's width.
...<p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment
css box sizing module level 4the definition of 'width' in that specification.
... editor's draft
css box sizing module level 3the definition of 'width' in that specification.
...And 2 more matches
word-spacing - CSS: Cascading Style Sheets
the word-spacing
css property sets the length of space between words and between tags.
... examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div>
css #mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable.
...rst-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css text module level 3the definition of 'word-spacing' in that specification.
...And 2 more matches
CSS preprocessor - MDN Web Docs Glossary: Definitions of Web-related terms
a
css preprocessor is a program that lets you generate
css from the preprocessor's own unique syntax.
... there are many
css preprocessors to choose from, however most
css preprocessors will add some features that don't exist in pure
css, such as mixin, nesting selector, inheritance selector, and so on.
... these features make the
css structure more readable and easier to maintain.
... to use a
css preprocessor, you must install a
css compiler on your web server; or use the
css preprocessor to compile on the development environment, and then upload compiled
css file to the web server.
Use CSS to solve common problems - Learn web development
the following links provide solutions to common problems you may face when working with
css.
... common use cases basics how to apply
css to the dom how to use whitespace in
css how to write comments in
css how to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in
css how to debug
css in the browser
css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size
css boxes how to control overflowing content how to control the part of a
css box that the background is drawn under how do i define inline, block, and inline-block?
... how to change the box model completely using box-sizing how to control backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques
css allows some advanced design techniques.
... general how to calculate specificity of a
css selector how to control inheritance in
css advanced effects how to use filters in
css how to use blend modes in
css layout using
css flexible boxes using
css multi-column layouts using
css generated content ...
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine
css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... this header is a flex container: each navbar link is a flex item: the nav element within the header is both a flex item and a flex container which holds the navigation links: in the
css pane in the
css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex.
... clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related
css properties and see how the flex items are affected by your changes.
... the layout flex container section the
css pane's layout view includes a collapsible "flex container" section.
CSS.escape() - Web APIs
the
css.escape() static method returns a
cssomstring containing the escaped string passed as parameter, mostly for use as part of a
css selector.
... syntax escapedstr =
css.escape(str); parameters str the
cssomstring to be escaped.
... examples basic results
css.escape(".foo#bar") // "\.foo\#bar"
css.escape("()[]{}") // "\(\)\[\]\{\}"
css.escape('--a') // "--a"
css.escape(0) // "\30 ", the unicode code point of '0' is 30
css.escape('\0') // "\ufffd", the unicode replacement character in context uses to escape a string for use as part of a selector, the escape() method can be used: var element = document.queryselector('#' +
css.escape(id) + ' > img'); the escape() method can also be used for escaping strings, although it escapes characters that don't strictly need to be escaped: var element = document.queryselector('a[href="#' +
css.escape(fragment) + '"]'); specification specification status comment
css object model (
cssom)the defin...
...ition of '
css.escape()' in that specification.
CSS numeric factory functions - Web APIs
the
css numeric factory functions, such as
css.em() and
css.turn() are methods that return
cssunitvalues with the value being the numeric argument and the unit being the name of the method used.
... these functions create new numeric values less verbosely than using the
cssunitvalue.
cssunitvalue() constructor.
... syntax
css.number(number);
css.percent(number); // <length>
css.em(number);
css.ex(number);
css.ch(number);
css.ic(number);
css.rem(number);
css.lh(number);
css.rlh(number);
css.vw(number);
css.vh(number);
css.vi(number);
css.vb(number);
css.vmin(number);
css.vmax(number);
css.cm(number);
css.mm(number);
css.q(number);
css.in(number);
css.pt(number);
css.pc(number);
css.px(number); // <angle>
css.deg(number);
css.grad(number);
css.rad(number);
css.turn(number); // <time>
css.s(number);
css.ms(number); // <frequency>
css.hz(number);
css.khz(number); // <resolution>
css.dpi(number);
css.dpcm(number);
css.dppx(number); // <flex>
css.fr(number); examples we use the
css.vmax() numeric factory function to create a
cssunitvalue: let height =
css.vmax(50); console.log( height ); //...
...
cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the
css.px() factory function: myelement.attributestylemap.set('margin',
css.px(40)); let currentmargin = myelement.attributestylemap.get('margin'); console.log(currentmargin.value, currentmargin.unit); // 40, 'px' specification specification status comment
css object model (
cssom)the definition of 'numeric factory functions' in that specification.
CSS.registerProperty() - Web APIs
the
css.registerproperty() method registers custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
... syntax
css.registerproperty(propertydefinition); parameters a propertydefinition dictionary object, which can contain the following members: name a domstring indicating the name of the property being defined.
... examples the following will register a custom property, --my-color, using registerproperty(), as a color, give it a default value, and have it not inherit its value: window.
css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-color has been registered using the syntax <color> .
...egistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment
css properties and values api level 1the definition of 'the registerproperty() function' in that specification.
CSSImageValue - Web APIs
the
cssimagevalue interface of the
css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... the
cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() .
... examples we create an element <button>magic wand</button> we add some
css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
... we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the
cssimagevalue example console.log( allcomputedstyles.get('background-image') ); console.log( allcomputedstyles.get('background-image').tostring() ); specifications specification status comment
css typed om level 1the definition of '
cssimagevalue' in that specification.
CSSKeywordValue.value - Web APIs
the value property of the
csskeywordvalue interface returns or sets the value of the
csskeywordvalue.
... syntax var val =
csskeywordvalue.value
csskeywordvalue.value = val value a usvstring.
... examples the following example resets the
css display property to its defaults.
... let indicator = document.getelementbyid('indicator'); indicator.attributestylemap.set('display', new
csskeywordvalue('initial')); indicator.attributestylemap.get('display').value // 'initial' specifications specification status comment
css typed om level 1the definition of 'undefined' in that specification.
CSSMathProduct - Web APIs
the
cssmathproduct interface of the
css typed object model api represents the result obtained by calling add(), sub(), or tosum() on
cssnumericvalue.
... constructor
cssmathproduct.
cssmathproduct() creates a new
cssmathproduct object.
... properties
cssmathproduct.values returns a
cssnumericarray object which contains one or more
cssnumericvalue objects.
... specifications specification status comment
css typed om level 1the definition of '
cssmathproduct' in that specification.
CSSNumericValue.add() - Web APIs
the add() method of the
cssnumericvalue interface adds a supplied number to the
cssnumericvalue.
... syntax var
cssmathsum =
cssnumericvalue.add(double |
cssnumericvalue); parameters number either a number or a
cssnumericvalue.
... return value a
cssmathsum exceptions typeerror indicates that an invalid type was passed to the method.
... examples let mathsum =
css.px("23").add(
css.percent("4")).add(
css.cm("3")).add(
css.in("9")); // prints "calc(23px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status comment
css typed om level 1the definition of 'add' in that specification.
CSSNumericValue.div() - Web APIs
the div() method of the
cssnumericvalue interface divides the
cssnumericvalue by the supplied value.
... syntax var
cssnumericvalue =
cssnumericvalue.div(number); parameters number either a number or a
cssnumericvalue.
... return value a
cssmathproduct.
... examples let mathproduct =
css.px("24").div(
css.percent("4")); // prints "calc(24px / 4%)" mathproduct.tostring(); specifications specification status comment
css typed om level 1the definition of 'div' in that specification.
CSSNumericValue.mul() - Web APIs
the mul() method of the
cssnumericvalue interface multiplies the
cssnumericvalue by the supplied value.
... syntax var
cssmathproduct =
cssnumericvalue.mul(number); parameters number either a number or a
cssnumericvalue.
... return value a
cssmathproduct exceptions typeerror indicates that an invalid type was passed to the method.
... examples let mathsum =
css.px("23").mul(
css.percent("4")).mul(
css.cm("3")).mul(
css.in("9")); // prints "calc(23px * 4% * 3cm * 9in)" console.log(mathsum.tostring()); specifications specification status comment
css typed om level 1the definition of 'mul' in that specification.
CSSNumericValue.sub() - Web APIs
the sub() method of the
cssnumericvalue interface subtracts a supplied number from the
cssnumericvalue.
... syntax var
cssmathsum =
cssnumericvalue.sub(number); parameters number either a number or a
cssmathsum.
... return value a
cssmathsum exceptions typeerror indicates that an invalid type was passed to the method.
... examples let mathsum =
css.px("23").sum(
css.percent("4")).sum(
css.cm("3")).sum(
css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment
css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.to() - Web APIs
the to() method of the
cssnumericvalue interface converts a numberic value from one unit to another.
... syntax var
cssunitvalue =
cssnumericvalue.to(unit); parameters unit the unit to which you want to convert.
... return value a
cssmathsum.
... examples // prints "0.608542cm" console.log(
css.px("23").to("com").tostring()); specifications specification status comment
css typed om level 1the definition of 'to' in that specification.
CSSNumericValue.toSum() - Web APIs
the tosum() method of the
cssnumericvalue interface converts the object's value to a
cssmathsum object to values of the specified unit.
... syntax var
cssmathsum =
cssnumericvalue.tosum(units); parameters units the units to convert to.
... return value a
cssnumericvalue.
... examples let v =
css.px("23").add(
css.percent("4")).add(
css.cm("3")).add(
css.in("9")); v.tostring() // => "calc(23px + 4% + 3cm + 9in)" v.tosum("px", "percent").tostring() // => "calc(1000.39px + 4%)" specifications specification status comment
css typed om level 1the definition of 'tosum' in that specification.
CSSNumericValue.type - Web APIs
the type() method of the
cssnumericvalue interface returns the type of
cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
... syntax var
cssnumerictype =
cssnumericvalue.type(); parameters none.
... return value a
cssnumerictype object.
... examples let mathsum =
css.px("23").sub(
css.percent("4")).sub(
css.cm("3")).sub(
css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let
cssnumerictype = mathsum.type(); specifications specification status comment
css typed om level 1the definition of 'type' in that specification.
CSSOMString - Web APIs
cssomstring is used to denote string data in
cssom specifications and can refer to either domstring or usvstring.
... when a specification says
cssomstring, it depends on the browser vendors to choose whether to use domstring or usvstring.
... while browser implementations that use utf-8 internally to represent strings in memory can use usvstring when the specification says
cssomstring, implementations that already represent strings as 16-bit sequences might choose to use domstring instead.
... implementation differences browser domstring or usvstring for
cssomstring firefox (gecko) usvstring chrome (blink) usvstring safari (webkit) usvstring edge (edgehtml) - opera (blink) usvstring specifications specification status comment
css object model (
cssom)the definition of '
cssomstring' in that specification.
CSSPseudoElement.element - Web APIs
the element read-only property of the
csspseudoelement interface returns a reference to the originating element of the pseudo-element, in other words its parent element.
... syntax var originatingelement =
csspseudoelement.element; value an element representing the pseudo-element's originating element.
... examples the example below demonstrates the relationship between
csspseudoelement.element and element.pseudo(): const myelement = document.queryselector('q'); const
csspseudoelement = myelement.pseudo('::after'); const originatingelement =
csspseudoelement.element; console.log(myelement === originatingelement); // outputs true console.log(myelement.parentelement === originatingelement); // outputs false console.log(myelement.lastelementchild ===
csspseudoelement); // outputs false console.log(myelement.lastchild ===
csspseudoelement); // outputs false console.log(myelement.nextelementsibling ===
csspseudoelement); // outputs false console.log(myelement.nextsibling ===
csspseudoelement); // outputs false specifications specification sta...
...tus comment
css pseudo-elements level 4the definition of 'element' in that specification.
CSSStyleDeclaration.item() - Web APIs
the
cssstyledeclaration.item() method interface returns a
css property name from a
cssstyledeclaration by index.
... return value propertyname is a domstring that is the name of the
css property at the specified index.
... javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration.item()' in that specification.
... working draft document object model (dom) level 2 style specificationthe definition of '
cssstyledeclaration' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
the
cssstyledeclaration.removeproperty() method interface removes a property from a
css style declaration object.
... return value oldvalue is a domstring equal to the value of the
css property before it was removed.
... example the following javascript code removes the background-color
css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration.removeproperty()' in that specification.
... working draft document object model (dom) level 2 style specificationthe definition of '
cssstyledeclaration' in that specification.
CSSUnitValue.unit - Web APIs
the
cssunitvalue.unit read-only property of the
cssunitvalue interface returns a usvstring indicating the type of unit.
... syntax var astring =
cssunitvalue.unit; value a usvstring.
... examples the following creates a
csspositionvalue from individual
cssunitvalue constructors, then queries the
cssunitvalue.unit.
... let pos = new
csspositionvalue( new
cssunitvalue( 5, "px" ), new
cssunitvalue( 10, "em" )); console.log( pos.x.unit ); // "px" console.log( pos.y.unit ); // "em" specifications specification status comment
css typed om level 1the definition of '
cssunitvalue.unit' in that specification.
CSSUnitValue.value - Web APIs
the
cssunitvalue.value property of the
cssunitvalue interface returns a double indicating the number of units.
... syntax var
cssunitvalue =
cssunitvalue.value;
cssunitvalue.value =
cssunitvalue; value a double.
... examples the following creates a
csspositionvalue from individual
cssunitvalue constructors, then queries the
cssunitvalue.value.
... let pos = new
csspositionvalue( new
cssunitvalue( 5, "px" ), new
cssunitvalue( 10, "px" )); console.log( pos.x.value ); // 5 console.log( pos.y.value ); // 10 specifications specification status comment
css typed om level 1the definition of '
cssunitvalue.value' in that specification.
CSSUnparsedValue.entries() - Web APIs
the
cssunparsedvalue.entries() method returns an array of a given object's own enumerable property [key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... syntax
cssunparsedvalue.entries(obj) parameters obj the
cssunparsedvalue whose enumerable own property [key, value] pairs are to be returned.
... return value an array of the given
cssunparsedvalue object's own enumerable property [key, value] pairs.
... specifications specification status comment
css typed om level 1the definition of 'entries()' in that specification.
CSSUnparsedValue.forEach() - Web APIs
the
cssunparsedvalue.foreach() method executes a provided function once for each element of the
cssunparsedvalue.
... syntax
cssunparsedvalue.foreach(function callback(currentvalue[, index[, array]]) { // your iterator }[, thisarg]); parameters callback the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... arrayoptional the
cssunparsedvalue that foreach() is being called on.
... specifications specification status comment
css typed om level 1the definition of 'foreach()' in that specification.
ElementCSSInlineStyle - Web APIs
the element
cssinlinestyle mixin describes
cssom-specific features common to the htmlelement, svgelement and mathmlelement interfaces.
... note: element
cssinlinestyle is a mixin and not an interface; you can't actually create an object of type element
cssinlinestyle.
...when getting, it returns a
cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.methodsthis interface has no methods.
... specifications specification status comment
css object model (
cssom)the definition of 'htmlorforeignelement' in that specification.
-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for
css background-image lets you use a portion of a larger image as a background.
...however, this can be used for any
css background.
... the syntax for the rectangle is similar to the rect() function generating a <<shape>()>
css type.
...
css the
css defines one container style, then the styles for the four boxes that comprise the complete image.
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomleft
css property can be used to round the bottom-left corner of an element's outline.
... syntax the value of -moz-outline-radius-bottomleft is either a
css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a
css <length>.
... html <p>look at this paragraph's bottom-left corner.</p>
css p { margin: 10px; border: solid cyan; outline: dotted green; -moz-outline-radius-bottomleft: 2em; } result specifications not part of any standard.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomright
css property can be used to round the bottom-right corner of an element's outline.
... syntax the value of -moz-outline-radius-bottomright is either a
css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a
css <length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p>
css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topleft
css property can be used to round the top-left corner of an element's outline.
... syntax the value of -moz-outline-radius-topleft is either a
css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a
css <length>.
... html <p>look at this paragraph's top-left corner.</p>
css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topleft: 2em; } result specifications not part of any standard.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topright
css property can be used to round the top-right corner of an element's outline.
... syntax the value of -moz-outline-radius-topright is either a
css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a
css <length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p>
css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke
css property specifies the width and color of strokes for text characters.
... /* width and color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following
css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples adding a red text stroke html <p id="example">the stroke of this text is red.</p>
css #example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; } result specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke' in that specification.
... living standard initial standardization safari
css reference '-webkit-text-stroke' in that document.
::marker - CSS: Cascading Style Sheets
the ::marker
css pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
... ::marker { color: blue; font-size: 1.2em; } allowable properties only certain
css properties can be used in a rule with ::marker as a selector: all font properties the white-space property color text-combine-upright, unicode-bidi and direction properties the content property all animation and transition properties the specification states that additional
css properties may be supported in future.
... syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul>
css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status comment
css pseudo-elements level 4the definition of '::marker' in that specification.
...
css lists module level 3the definition of '::marker' in that specification.
:blank - CSS: Cascading Style Sheets
note: the :blank selector is considered at risk, as the
csswg keeps changing it.
... see
csswg issue #1967.
... the :blank
css pseudo-class selects empty user input elements (eg.
... html <textarea></textarea>
css textarea:blank { border: 3px solid red; } result specifications specification status comment selectors level 4the definition of ':blank' in that specification.
:focus - CSS: Cascading Style Sheets
the :focus
css pseudo-class represents an element (such as a form input) that has received focus.
... 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.
... quick tip: never remove
css outlines specifications specification status comment html living standardthe definition of ':focus' in that specification.
...
css level 2 (revision 1)the definition of ':focus' in that specification.
:fullscreen - CSS: Cascading Style Sheets
the :fullscreen
css pseudo-class matches every element which is currently in full-screen mode.
... html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using
css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...
css the magic happens in the
css.
... #fs-toggle:not(:fullscreen) { background-color: #afa; } when the document is in full-screen mode, the following
css applies instead, setting the background color to a pale shade of red.
:hover - CSS: Cascading Style Sheets
the :hover
css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
... 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.
...
css working group drafts github issues selectors level 3the definition of ':hover' in that specification.
...
css level 2 (revision 1)the definition of ':hover' in that specification.
:link - CSS: Cascading Style Sheets
the :link
css pseudo-class represents an element that has not yet been visited.
... html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a>
css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification.
...
css level 2 (revision 1)the definition of ':link' in that specification.
...
css level 1the definition of ':link' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown
css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
... html <input placeholder="type something here!">
css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number">
css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style.
...e:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form>
css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
@charset - CSS: Cascading Style Sheets
the @charset
css at-rule specifies the character encoding used in the style sheet.
... @charset "utf-8"; this at-rule is useful when using non-ascii characters in some
css properties, like content.
... the @charset
css at-rule.
...d invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a
css <string> */ specifications specification status comment
css level 2 (revision 1)the definition of '@charset' in that specification.
font-style - CSS: Cascading Style Sheets
the font-style
css descriptor allows authors to specify font styles for the fonts specified in the @font-face rule.
...the values for the
css descriptor is same as that of its corresponding font property.
... @font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; } specifications specification status comment
css fonts module level 4the definition of 'font-style' in that specification.
... working draft adds oblique keyword with angle value
css fonts module level 3the definition of 'font-style' in that specification.
-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.
... and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated
css2 system colors.
... because high contrast mode themes are dynamic, use these color keywords in place of other
css color values.
... content if at all possible, prefer updating html markup over modifying content using
css2 system color keywords.
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
the -webkit-device-pixel-ratio is a non-standard boolean
css media feature which is an alternative to the standard resolution media feature.
... values <number> the number of device pixels used to represent each
css px.
...} examples html <p>this is a test of your device's pixel density.</p>
css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } } result specifications specification status comment compatib...
... living standard initial standardization safari
css reference 'media query extensions' in that document.
-webkit-transition - CSS: Cascading Style Sheets
the -webkit-transition boolean
css media feature is a chrome extension whose value is true if the browsing context supports
css transitions.
... apple has a description in safari
css reference; this is now called simply transition there.
... syntax @media (-webkit-transition) { /*
css to use if transitions are supported */ } examples use @supports instead do not use the -webkit-transition media feature.
... instead, test for transition support using the
css @supports at-rule, like this: @supports (transition: initial) { /*
css to use if transitions are supported */ } obsolete example before this became obsolete, you could use -webkit-transition in your
css like this: @media (-webkit-transition) { /*
css to use if transitions are supported */ } specifications not part of any standard.
aural - CSS: Cascading Style Sheets
the aural
css media type is used for devices that have speech output capabilities.
... syntax the aural
css media type—which has been deprecated in favor of the speech media type—was used to specify a block of
css that applied only when the content is being presented using a speech synthesis device.
... @media aural { /* speech-specific styles here */ } updating existing
css to use the speech media type should be as simple as replacing aural with speech.
... examples basic example @media aural { body { voice-family: paul } } specifications specification status comment
css level 2 (revision 2)the definition of 'aural' in that specification.
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.
... 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.
... fast the layout may change dynamically according to the usual rules of
css, and the output device is not unusually constrained in speed, so regularly-updating things like
css animations can be used.
... examples html <p>if this text animates for you, you are using a fast-updating device.</p>
css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification.
Coordinate systems - CSS: Cascading Style Sheets
this guide describes the standard coordinate systems used by the
css object model.
... it's actually possible to change the definitions and orientations of these coordinate systems using
css properties such as transform.
... standard
cssom coordinate systems there are four standard coordinate systems used by the
css object model, as described below.
... <span id="offsety">0</span> </p> <p> client-relative: <span id="clientx">0</span>, <span id="clienty">0</span> </p> <p> page-relative: <span id="pagex">0</span>, <span id="pagey">0</span> </p> <p> screen-relative: <span id="screenx">0</span>, <span id="screeny">0</span> </p> </div> </div> </div>
css the
css is pretty much just for appearances here.
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.
...it means that you can actually see, right there in the
css, what this layout looks like.
... redefining the grid using media queries as our layout is now contained in one part of the
css, this makes it very easy to make changes at different breakpoints.
... </div> </div> grid definition shorthands having looked at various ways of placing items on our grids and many of the properties used to define grid, this is a good time to take a look at a couple of shorthands that are available for defining the grid and many things about it all in one line of
css.
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.
... named grid lines when using
css grid you can name lines on your grid and then position items based on those names rather than the line number.
... specification specification status comment
css grid layout module level 2 working draft initial definition of subgrids.
...a presentation from
cssconf.eu ...
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.
... the reference box understanding the reference box used by
css shapes is important when using basic shapes, as it defines each shape's coordinate system.
... for an excellent description of references boxes as they apply to
css shapes see understanding reference boxes for
css shapes.
...the below
css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.
Shapes from box values - CSS: Cascading Style Sheets
a straightforward way to create a shape is to use a value from the
css box model.
...
css box model the values listed above correspond to the various parts of the
css box model.
... a box in
css has content, padding, border, and margin.
...you still have a border, even if you have not used the
css border property.
Class selectors - CSS: Cascading Style Sheets
the
css class selector matches elements based on the contents of their class attribute.
...ents with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples
css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifi...
... recommendation
css level 2 (revision 1)the definition of 'child selectors' in that specification.
... recommendation
css level 1the definition of 'child selectors' in that specification.
ID selectors - CSS: Cascading Style Sheets
the
css id selector matches an element based on the value of the element’s id attribute.
... /* the element with id="demo" */ #demo { border: red 2px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples
css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.
... recommendation
css level 2 (revision 1)the definition of 'id selectors' in that specification.
... recommendation
css level 1the definition of 'id selectors' in that specification.
Tools - CSS: Cascading Style Sheets
css offers a number of powerful features that can be tricky to use, or have a number of parameters, so that it's helpful to be able to visualize them while you work on them.
... this page offers links to a number of useful tools that will help you build the
css to style your content using these features.
...this is not really yet a useful tool, but will be!linear-gradient generatorthis tool can be used to create custom
css3 linear-gradient() backgrounds.
... other tools
css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io
css menus -
cssmenumaker.com a mighty, modern
css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
Type selectors - CSS: Cascading Style Sheets
the
css type selector matches elements by node name.
...*/ a { color: red; } syntax element { style properties } examples
css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.
... recommendation no changes
css level 2 (revision 1)the definition of 'type selectors' in that specification.
... recommendation
css level 1the definition of 'type selectors' in that specification.
Universal selectors - CSS: Cascading Style Sheets
the
css universal selector (*) matches elements of any type.
... /* selects all elements */ * { color: green; } beginning with
css3, the asterisk may be used in combination with namespaces: ns|* - matches all elements in namespace ns *|* - matches all elements |* - matches all elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors.
... examples
css * [lang^=en] { color: green; } *.warning { color: red; } *#maincontent { border: 1px solid blue; } .floating { float: left } /* automatically clear the next sibling after a floating element */ .floating + * { clear: left; } html <p class="warning"> <span lang="en-us">a green span</span> in a red paragraph.
... recommendation defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements
css level 2 (revision 1)the definition of 'universal selector' in that specification.
align-content - CSS: Cascading Style Sheets
the
css align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
...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...
...'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment
css box alignment module level 3the definition of 'align-content' in that specification.
...
css flexible box layout modulethe definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
the
css align-items property sets the align-self value on all direct children as a group.
...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-c...
...es'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment
css box alignment module level 3the definition of 'align-items' in that specification.
...
css flexible box layout modulethe definition of 'align-items' in that specification.
<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.
... interpolation when animated, values of the <alpha-value>
css data type are interpolated as real, floating-point numbers.
...o set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status comment
css color module level 4the definition of '<alpha-value>' in that specification.
...
css color module level 3the definition of '<alpha-value>' in that specification.
animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-mode
css property sets how a
css animation applies styles to its target before and after its execution.
...the element will instead be displayed using any other
css rules applied to it.
... html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div>
css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see
css animations for more examples.
... specifications specification status comment
css animationsthe definition of 'animation-fill-mode' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio
css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
... in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment
css box sizing module level 4the definition of 'aspect-ratio' in that specification.
... for mapped valuesfirefox partial support 71notes partial support 71notes notes firefox 71 adds internal support only for mapped values no support 69 — 71notes disabled notes firefox 69 adds internal support only for mapped valuesdisabled from version 69 until version 71 (exclusive): this feature is behind the layout.
css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
... full support 79edge full support 79firefox full support 71 full support 71 no support 69 — 71disabled disabled from version 69 until version 71 (exclusive): this feature is behind the layout.
css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
background-clip - CSS: Cascading Style Sheets
the background-clip
css property sets whether an element's background extends underneath its border box, padding box, or content box.
...rmal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p>
css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: te...
...xt; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'background-clip' in that specification.
...
css backgrounds and borders module level 4the definition of 'background-clip' in that specification.
background-color - CSS: Cascading Style Sheets
the background-color
css property sets the background color of an element.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div class="exampleone"> lorem ipsum dolor sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div>
css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: #777799; color: #ffffff; } result specifications specification comment feedback
css backgrounds and borders module level 3the definition of 'background-color' in that specification.
... though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> backgrounds level 3 github issues
css level 2 (revision 1)the definition of 'background-color' in that specification.
...
css level 1the definition of 'background-color' in that specification.
border-bottom-color - CSS: Cascading Style Sheets
the border-bottom-color
css property sets the color of an element's bottom border.
... it can also be set with the shorthand
css properties border-color or border-bottom.
... note which side of the box is <span class="redtext">red</span>.</p> </div>
css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification.
...
css level 2 (revision 1)the definition of 'border-bottom-color' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius
css property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius
css property, the value of this property is then reset to its initial value by the shorthand property.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
... the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.
border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius
css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-right-radius
css property, the value of this property is then reset to its initial value by the shorthand property.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
... the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
the border-bottom-style
css property sets the line style of an element's bottom border.
...ating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
css /* define look of the table */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groo...
...ve;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
...
css level 2 (revision 1)the definition of 'border-bottom-style' in that specification.
border-image - CSS: Cascading Style Sheets
the border-image
css property draws an image around a given element.
... constituent properties this property is a shorthand for the following
css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repea...
...the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div>
css to match the size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions.
...ding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div>
css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-left-color - CSS: Cascading Style Sheets
the border-left-color
css property sets the color of an element's left border.
... it can also be set with the shorthand
css properties border-color or border-left.
... note which side of the box is <span class="redtext">red</span>.</p> </div>
css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-left-color' in that specification.
...
css level 2 (revision 1)the definition of 'border-left-color' in that specification.
border-left-style - CSS: Cascading Style Sheets
the border-left-style
css property sets the line style of an element's left border.
...nset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border...
...-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
...
css level 2 (revision 1)the definition of 'border-left-style' in that specification.
border-left-width - CSS: Cascading Style Sheets
the border-left-width
css property sets the width of the left border of an element.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 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.
...
css level 2 (revision 1)the definition of 'border-left-width' in that specification.
...
css level 1the definition of 'border-left-width' in that specification.
border-right-color - CSS: Cascading Style Sheets
the border-right-color
css property sets the color of an element's right border.
... it can also be set with the shorthand
css properties border-color or border-right.
... note which side of the box is <span class="redtext">red</span>.</p> </div>
css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-right-color' in that specification.
...
css level 2 (revision 1)the definition of 'border-right-color' in that specification.
border-right-style - CSS: Cascading Style Sheets
the border-right-style
css property sets the line style of an element's right border.
...examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8...
... {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
...
css level 2 (revision 1)the definition of 'border-right-style' in that specification.
border-right-width - CSS: Cascading Style Sheets
the border-right-width
css property sets the width of the right border of an element.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if 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.
...
css level 2 (revision 1)the definition of 'border-right-width' in that specification.
...
css level 1the definition of 'border-right-width' in that specification.
border-top-color - CSS: Cascading Style Sheets
the border-top-color
css property sets the color of an element's top border.
... it can also be set with the shorthand
css properties border-color or border-top.
... note which side of the box is <span class="redtext">red</span>.</p> </div>
css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-top-color' in that specification.
...
css level 2 (revision 1)the definition of 'border-top-color' in that specification.
border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-radius
css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius
css property, the value of this property is then reset to its initial value by the shorthand property.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
...ot a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.
border-top-right-radius - CSS: Cascading Style Sheets
the border-top-right-radius
css property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-right-radius
css property, the value of this property is then reset to its initial value by the shorthand property.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
... a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.
border-top-style - CSS: Cascading Style Sheets
the border-top-style
css property sets the line style of an element's top border.
...nset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-sty...
...le: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
...
css level 2 (revision 1)the definition of 'border-top-style' in that specification.
border-top-width - CSS: Cascading Style Sheets
the border-top-width
css property sets the width of the top border of an element.
...it also applies to ::first-letter.inheritednocomputed 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.
...
css level 2 (revision 1)the definition of 'border-top-width' in that specification.
...
css level 1the definition of 'border-top-width' in that specification.
box-flex - CSS: Cascading Style Sheets
it does not match either the old
css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).
... the -moz-box-flex and -webkit-box-flex
css properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.
...this attribute does not have a corresponding
css property.
... formal definition initial value0applies toelements that are direct children of an element with a
css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style> div.example { display: -moz-box; display: -webkit-box; border: 1px solid black; width: 100%; } div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla */ ...
clip-path - CSS: Cascading Style Sheets
the clip-path
css property creates a clipping region that sets what part of an element should be shown.
... note: a computed value other than none results in the creation of a new stacking context the same way that
css opacity does for values other than 1.
...="0" width="90" height="90"/> </clippath> </defs> </svg> <select id="clippath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <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...
...
css shapes module level 2the definition of 'path' in that specification.
clip - CSS: Cascading Style Sheets
the clip
css property defines a visible portion of an element.
... formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image
css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> ...
...les/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment
css masking module level 1the definition of 'clip' in that specification.
...
css level 2 (revision 1)the definition of 'clip' in that specification.
column-count - CSS: Cascading Style Sheets
the column-count
css property breaks an element's content into the specified number of columns.
... syntax /* keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other
css properties, such as column-width.
... formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the
css `column-count` property.
...</p>
css .content-box { column-count: 3; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-count' in that specification.
column-width - CSS: Cascading Style Sheets
the column-width
css property sets the ideal column width in a multi-column layout.
... auto the width of the column is determined by other
css properties, such as column-count.
...</p>
css .content-box { column-width: 100px; } result specifications specification status comment
css writing modes level 4the definition of 'column-width' in that specification.
...
css multi-column layout modulethe definition of 'column-width' in that specification.
columns - CSS: Cascading Style Sheets
the columns
css shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
... constituent properties this property is a shorthand for the following
css properties: column-count column-width syntax /* column width */ columns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the values listed below, in any order.
... of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns using the
css `columns` property.
...</p>
css .content-box { columns: 3 auto; } result specifications specification status comment
css multi-column layout modulethe definition of 'columns' in that specification.
counter-increment - CSS: Cascading Style Sheets
the counter-increment
css property increases or decreases the value of a
css counter by a given value.
... note: the counter's value can be reset to an arbitrary number using the counter-reset
css property.
...]+ | none examples incrementing named counters h1 { counter-increment: chapter section 2 page; /* increases the value of the chapter and page counters by 1, and the section counter by 2 */ } specifications specification status comment
css lists module level 3the definition of 'counter-increment' in that specification.
...
css level 2 (revision 1)the definition of 'counter-increment' in that specification.
counter-reset - CSS: Cascading Style Sheets
the counter-reset
css property resets a
css counter to a given value.
... note: the counter's value can be increased or decreased using the counter-increment
css property.
...]+ | none examples resetting named counters h1 { counter-reset: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment
css lists module level 3the definition of 'counter-reset' in that specification.
...
css level 2 (revision 1)the definition of 'counter-reset' in that specification.
cross-fade() - CSS: Cascading Style Sheets
the
css cross-fade() function can be used to blend two or more images at a defined transparency.
... the function can be used in
css anywhere an ordinary image reference can be used.
...h>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div>
css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), ...
... 75%); } result specifications specification status comment
css images module level 4the definition of 'cross-fade()' in that specification.
cursor - CSS: Cascading Style Sheets
the cursor
css property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.
... keyword values move your mouse over values to see their live appearance in your browser: category
css value example description general auto the ua will determine the cursor to display based on the current context.
...resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment
css basic user interface module level 3the definition of 'cursor' in that specification.
...
css level 2 (revision 1)the definition of 'cursor' in that specification.
direction - CSS: Cascading Style Sheets
the direction
css property sets the direction of text, table columns, and horizontal overflow.
... unlike the dir attribute in html, the direction property is not inherited from table columns into table cells, since
css inheritance follows the document tree, and table cells are inside of rows but not inside of columns.
... formal definition initial valueltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment
css writing modes module level 3the definition of 'direction' in that specification.
...
css level 2 (revision 1)the definition of 'direction' in that specification.
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.
... note: unlike other
css properties, user agent-defined property names are case-sensitive.
... this is because the accompanying
css is the equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other
css properties, user agent property names are case-sensitive.
... specifications specification status comment
css environment variables module level 1the definition of 'env()' in that specification.
filter - CSS: Cascading Style Sheets
the filter
css property applies graphical effects like blur or color shift to an element.
... included in the
css standard are several functions that achieve predefined effects.
...the parameter is specified as a
css length, but does not accept percentage values.
...the function accepts a parameter of type <shadow> (defined in
css3 backgrounds), with the exception that the inset keyword is not allowed.
fit-content() - CSS: Cascading Style Sheets
the fit-content()
css function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
... 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.
... </div> <div>flexible item</div> </div>
css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status comment
css box sizing module lev...
...
css grid layoutthe definition of 'fit-content()' in that specification.
flex-direction - CSS: Cascading Style Sheets
the flex-direction
css property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
...if the visual (
css) order is important, then screen reader users will not have access to the correct reading order.
...ground-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </div>
css #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status c...
...omment
css flexible box layout modulethe definition of 'flex-direction' in that specification.
flex-wrap - CSS: Cascading Style Sheets
the flex-wrap
css property sets whether flex items are forced onto one line or can wrap onto multiple lines.
... see using
css flexible boxes for more properties and information.
... <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div>
css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex...
...; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status comment
css flexible box layout modulethe definition of 'flex-wrap' in that specification.
flex - CSS: Cascading Style Sheets
the flex
css shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
... constituent properties this property is a shorthand for the following
css properties: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* global values */ flex: inherit; flex: initial; flex: ...
...| <'flex-basis'> ] examples setting flex: auto html <div id="flex-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div>
css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
... "block" : "none"; }); #flex-container { width: 100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status comment
css flexible box layout modulethe definition of 'flex' in that specification.
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).
...er formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p>
css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment
css fonts module level 3the definition of 'font-size-adjust' in that specification.
... candidate recommendation initial definition the
css property font-size-adjust was initially defined in
css 2, but dropped in
css 2.1.
... it has been newly defined in
css 3.
font-variant-caps - CSS: Cascading Style Sheets
the font-variant-caps
css property controls the use of alternate glyphs for capital letters.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p>
css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment
css fonts module level 3the definition of 'font-variant-caps' in that specification.
... full support 52edge full support 79firefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.
css.font-features.enabled preference (needs to be set to true).
...ull support 52chrome android full support 52firefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.
css.font-features.enabled preference (needs to be set to true).
font-variant-ligatures - CSS: Cascading Style Sheets
the font-variant-ligatures
css property controls which ligatures and contextual forms are used in textual content of the elements it applies to.
...l-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/
css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligatures<br> if fi ff tf ft jf ...
...</p> <p class="historical-ligatures"> historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-historical-ligatures"> no-historical-ligatures<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p> <p class="no-contextual"> no-contextual<br> if fi ff tf ft jf fj </p> <p class="contextual"> contextual<br> if fi ff tf ft jf fj </p>
css p { font-family: lora, serif; } .normal { font-variant-ligatures: normal; } .none { font-variant-ligatures: none; } .common-ligatures { font-variant-ligatures: common-ligatures; } .no-common-ligatures { font-variant-ligatures: no-common-ligatures; } .discretionary-ligatures { font-variant-ligatures: discretionary-ligatures; } .no-discretionary-ligatures { font-variant-ligature...
...l-ligatures { font-variant-ligatures: historical-ligatures; } .no-historical-ligatures { font-variant-ligatures: no-historical-ligatures; } .contextual { font-variant-ligatures: contextual; } .no-contextual { font-variant-ligatures: no-contextual; } .contextual { font-variant-ligatures: contextual; } result specifications specification status comment
css fonts module level 3the definition of 'font-variant-ligatures' in that specification.
font-variant-position - CSS: Cascading Style Sheets
the font-variant-position
css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p>
css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment
css fonts module level 3the definition of 'font-variant-position' in that specification.
...rome no support noedge no support nofirefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.
css.font-features.enabled preference (needs to be set to true).
... no support nochrome android no support nofirefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.
css.font-features.enabled preference (needs to be set to true).
<frequency-percentage> - CSS: Cascading Style Sheets
the <frequency-percentage>
css data type represents a value that can be either a <frequency> or a <percentage>.
...the pitch of a speaking voice, are not currently used in any
css properties.
... specifications specification status comment
css values and units module level 4the definition of '<frequency-percentage>' in that specification.
... editor's draft
css values and units module level 3the definition of '<frequency-percentage>' in that specification.
<gradient> - CSS: Cascading Style Sheets
the <gradient>
css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... a
css gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment
css images module level 4the definition of '<gradient>' in that specification.
... working draft adds conic-gradient
css images module level 3the definition of '<gradient>' in that specification.
grid-template - CSS: Cascading Style Sheets
the grid-template
css property is a shorthand property for defining grid columns, rows, and areas.
... constituent properties this property is a shorthand for the following
css properties: grid-template-areas grid-template-columns grid-template-rows syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" ...
...<track-size> ]+ <line-names>?where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template
css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main {...
... background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification status comment
css grid layoutthe definition of 'grid-template' in that specification.
ident - CSS: Cascading Style Sheets
the <ident>
css data type denotes an arbitrary string used as an identifier.
... syntax the syntax of <custom-ident> is similar to
css identifiers (such as property names), except that it is case-sensitive.
... specifications specification status comment
css values and units module level 4the definition of '<ident>' in that specification.
... editor's draft
css values and units module level 3the definition of '<ident>' in that specification.
justify-content - CSS: Cascading Style Sheets
the
css justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
...[ <content-position> | left | right ]where <content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution
css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option...
...pace-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment
css box alignment module level 3the definition of 'justify-content' in that specification.
...
css flexible box layout modulethe definition of 'justify-content' in that specification.
left - CSS: Cascading Style Sheets
the left
css property participates in specifying the horizontal position of a positioned element.
... <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div>
css #wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; backgro...
... 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status comment
css positioned layout module level 3the definition of 'left' in that specification.
...
css level 2 (revision 1)the definition of 'left' in that specification.
<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 ...
...therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200px); specifications specification status comment
css values and units module level 4the definition of '<length-percentage>' in that specification.
... editor's draft
css values and units module level 3the definition of '<length-percentage>' in that specification.
letter-spacing - CSS: Cascading Style Sheets
the letter-spacing
css property sets the horizontal spacing behavior between text characters.
...line.inheritedyescomputed valuean optimum value consisting of either an absolute length or the keyword normalanimation typea length formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p>
css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; } result specifications specification status comment
css text module level 3the definition of 'letter-spacing' in that specification.
...
css level 2 (revision 1)the definition of 'letter-spacing' in that specification.
...
css level 1the definition of 'letter-spacing' in that specification.
list-style - CSS: Cascading Style Sheets
the list-style
css shorthand property allows you set all the list style properties at once.
... constituent properties this property is a shorthand for the following
css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ li...
...s specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> list 2 <ul class="two"> <li>list item a</li> <li>list item b</li> <li>list item c</li> </ul>
css .one { list-style: circle; } .two { list-style: square inside; } result specifications specification status comment
css lists module level 3the definition of 'list-style' in that specification.
...
css level 2 (revision 1)the definition of 'list-style' in that specification.
margin-top - CSS: Cascading Style Sheets
the margin-top
css property sets the margin area on the top of an element.
...taining blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment
css basic box modelthe definition of 'margin-top' in that specification.
... working draft no significant change
css level 2 (revision 1)the definition of 'margin-top' in that specification.
...
css level 1the definition of 'margin-top' in that specification.
mask-border - CSS: Cascading Style Sheets
the mask-border
css shorthand property lets you create a mask along the edge of an element's border.
... constituent properties this property is a shorthand for the following
css properties: mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
...pretty neat, isn't it?</div>
css to match the size of a single diamond, we will use a value of 90 divided by 3, or 30, for slicing the image into corner and edge regions.
...epeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status comment
css masking module level 1the definition of 'mask-border' in that specification.
mask-origin - CSS: Cascading Style Sheets
the mask-origin
css property sets the origin of a mask.
...in other words, this property specifies the origin position of an image specified by the mask-image
css property.
...elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box
css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padd...
...">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-origin' in that specification.
mask-repeat - CSS: Cascading Style Sheets
the mask-repeat
css property sets how mask images are repeated.
...the position of the non-repeated mask image is defined by the mask-position
css property.
...tion initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask
css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</o...
... specifications specification status comment
css masking module level 1the definition of 'mask-repeat' in that specification.
mask-size - CSS: Cascading Style Sheets
the mask-size
css property specifies the sizes of the mask images.
...ize: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size
css property, the value of this property is then reset to its initial value by the shorthand property.
... element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage
css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksiz...
...100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-size' in that specification.
max-block-size - CSS: Cascading Style Sheets
the max-block-size
css property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode.
...mode affect the mapping of max-block-size to max-width or max-height as follows: values of writing-mode max-block-size is equivalent to horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-mode values sideways-lr and sideways-rl were removed from the
css writing modes level 3 specification late in its design process.
...</div>
css the
css defines three classes.
... .standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment
css logical properties and values level 1the definition of 'max-block-size' in that specification.
max() - CSS: Cascading Style Sheets
the max()
css function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a
css property value.
... formal syntax max( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum size for a font another use case for
css functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.
... let's look at some
css: h1 { font-size: 2rem; } h1.responsive { font-size: max(4vw, 2em, 2rem); } the font-size will at minimum be 2rems, or twice the default size of font for the page.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status comment
css values and units module level 4the definition of 'max()' in that specification.
min-height - CSS: Cascading Style Sheets
the min-height
css property sets the minimum height of an element.
...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 min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status comment
css box sizing module level 4the definition of 'min-height' in that specification.
... editor's draft
css box sizing module level 3the definition of 'min-height' in that specification.
...
css level 2 (revision 1)the definition of 'min-height' in that specification.
min() - CSS: Cascading Style Sheets
the min()
css function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a
css property value.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for
css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.
... let's look at some
css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width.
... <form> <label>type something:</label> <input type="text"> </form> specifications specification status comment
css values and units module level 4the definition of 'min()' in that specification.
minmax() - CSS: Cascading Style Sheets
the minmax()
css function defines a size range greater than or equal to min and less than or equal to max.
... it is used with
css grids.
... formal syntax minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples
css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { ...
... </div> </div> result specifications specification status comment
css grid layoutthe definition of 'minmax()' in that specification.
object-position - CSS: Cascading Style Sheets
the object-position
css property specifies the alignment of the selected replaced element's contents within the element's box.
... <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/>
css the
css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
... result specifications specification status comment
css images module level 3the definition of 'object-position' in that specification.
... see also other image-related
css properties: object-fit, image-orientation, image-rendering, image-resolution.
opacity - CSS: Cascading Style Sheets
the opacity
css property sets the opacity of an element.
...ial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div>
css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width=...
..."128" height="146" class="opacity">
css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment
css color module level 4the definition of 'opacity' in that specification.
...
css color module level 3the definition of 'opacity' in that specification.
order - CSS: Cascading Style Sheets
the order
css property sets the order to lay out an item in a flex or grid container.
...if the visual (
css) order is important, then screen reader users will not have access to the correct reading order.
...ters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses
css to create a classic two-sidebar layout surrounding a content block.
... html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer>
css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; } result specifications specification status comment
css flexible box layout modulethe definition of 'order' in that specification.
outline - CSS: Cascading Style Sheets
the outline
css shorthand property set all the outline properties in a single declaration.
... constituent properties this property is a shorthand for the following
css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below.
...th; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a>
css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment
css basic user interface module level 3the definition of 'outline' in that specification.
...
css level 2 (revision 1)the definition of 'outline' in that specification.
padding-bottom - CSS: Cascading Style Sheets
the padding-bottom
css property sets the height of the padding area on the bottom of an element.
...ne.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment
css basic box modelthe definition of 'padding-bottom' in that specification.
...
css level 2 (revision 1)the definition of 'padding-bottom' in that specification.
...
css level 1the definition of 'padding-bottom' in that specification.
padding-left - CSS: Cascading Style Sheets
the padding-left
css property sets the width of the padding area to the left of an element.
...st-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment
css basic box modelthe definition of 'padding-left' in that specification.
...
css level 2 (revision 1)the definition of 'padding-left' in that specification.
...
css level 1the definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
the padding-right
css property sets the width of the padding area on the right of an element.
...line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment
css basic box modelthe definition of 'padding-right' in that specification.
...
css level 2 (revision 1)the definition of 'padding-right' in that specification.
...
css level 1the definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
the padding-top
css property sets the height of the padding area on the top of an element.
...first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment
css basic box modelthe definition of 'padding-top' in that specification.
...
css level 2 (revision 1)the definition of 'padding-top' in that specification.
...
css level 1the definition of 'padding-top' in that specification.
page-break-after - CSS: Cascading Style Sheets
the page-break-after
css property adjusts page breaks after the current element.
...may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples setting a page break after footnotes /* move to a new page after footnotes */ div.footnotes { page-break-after: always; } specifications specification status comment
css logical properties and values level 1the definition of 'recto and verso' in that specification.
...
css paged media module level 3the definition of 'page-break-after' in that specification.
...
css level 2 (revision 1)the definition of 'page-break-after' in that specification.
page-break-before - CSS: Cascading Style Sheets
the page-break-before
css property adjusts page breaks before the current element.
...r agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples avoid a page break before the dic /* avoid page break before the div */ div.note { page-break-before: avoid; } specifications specification status comment
css logical properties and values level 1the definition of 'recto and verso' in that specification.
...
css paged media module level 3the definition of 'page-break-before' in that specification.
...
css level 2 (revision 1)the definition of 'page-break-before' in that specification.
perspective - CSS: Cascading Style Sheets
the perspective
css property determines the distance between the z=0 plane and the user in order to give a 3d-positioned element some perspective.
...their z-axis coordinates are greater than the value of the perspective
css property — are not drawn.
... <div class="container"> <div class="cube pers650"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> </tbody> </table>
css the
css establishes classes that can be used to set the perspective to different distances.
...: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment
css transforms level 2the definition of 'perspective' in that specification.
place-content - CSS: Cascading Style Sheets
the place-content
css shorthand property allows you to align content along both the block and inline directions at once (i.e.
... constituent properties this property is a shorthand for the following
css properties: align-content justify-content syntax /* positional alignment */ /* align-content does not take left and right values */ place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; /* baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline center; p...
...change", update); var writingm = document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; });
css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8f...
...f; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } result specifications specification status comment
css box alignment module level 3the definition of 'place content' in that specification.
place-self - CSS: Cascading Style Sheets
the place-self
css shorthand property allows you to align an individual item in both the block and inline directions at once (i.e.
... constituent properties this property is a shorthand for the following
css properties: align-self justify-self syntax /* keyword values */ place-self: auto center; place-self: normal start; /* positional alignment */ place-self: center normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* basel...
... html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article>
css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-c...
...olor: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment
css box alignment module level 3the definition of 'place-self' in that specification.
quotes - CSS: Cascading Style Sheets
the quotes
css property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the
css content property.
...that's the question!</q>
css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most browsers, the default value of quotes is auto (firefox 70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
... html <div lang="fr"> <q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <div> <hr> <div lang="en"> <q>this is an english quote.</q> <div>
css /*q { quotes: auto; }*/ result specifications specification status comment
css generated content module level 3the definition of 'quotes' in that specification.
... working draft
css level 2 (revision 1)the definition of 'quotes' in that specification.
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient()
css function creates an image consisting of repeating linear gradients.
... note: rendering of color stops in
css gradients follows the same rules as color stops in svg gradients.
... note: please see using
css gradients for more examples.
... specifications specification status comment
css images module level 3the definition of 'repeating-linear-gradient()' in that specification.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
the row-gap
css property sets the size of the gap (gutter) between an element's grid rows.
...
css grid layout initially defined the grid-row-gap property.
...ted valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div>
css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-templa...
...te-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specifications specification status comment
css box alignment module level 3the definition of 'row-gap' in that specification.
shape-image-threshold - CSS: Cascading Style Sheets
the shape-image-threshold
css property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
...the gradient is established as a
css shape using shape-outside, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.
...</p>
css #gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } the shape is established here using background-image with a linear gradient rather than an image file.
... result specifications specification status comment
css shapes module level 1the definition of 'shape-image-threshold' in that specification.
Specified value - CSS: Cascading Style Sheets
the specified value of a
css property is the value it receives from the document's style sheet.
... examples html <p>my specified color is given explicitly in the
css.</p> <div>the specified values of all my properties default to their initial values, because none of them are given in the
css.</div> <div class="fun"> <p>the specified value of my font family is not given explicitly in the
css, so it is inherited from my parent.
... however, the border is not an inheriting property.</p> </div>
css .fun { border: 1px dotted pink; font-family: fantasy; } p { color: green; } result specifications specification status comment
css level 2 (revision 2)the definition of 'cascaded value' in that specification.
... working draft
css level 2 (revision 1)the definition of 'cascaded value' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
the text-combine-upright
css property sets the combination of characters into the space of a single character.
... html <p lang="ja" class="exampletext">平成20年4月16日に</p>
css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
... html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p>
css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment
css writing modes level 4the definition of 'text-combine-upright' in that specification.
... candidate recommendation add digits value
css writing modes module level 3the definition of 'text-combine-upright' in that specification.
text-rendering - CSS: Cascading Style Sheets
the text-rendering
css property provides information to the rendering engine about what to optimize for when rendering text.
... /* keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any
css standard.
... html <p class="small">lyowat - ff fi fl ffl</p> <p class="big">lyowat - ff fi fl ffl</p>
css .small { font: 19.9px "constantia", "times new roman", "georgia", "palatino", serif; } .big { font: 20px "constantia", "times new roman", "georgia", "palatino", serif; } result optimizespeed vs optimizelegibility this example shows the difference between the appearance of optimizespeed and optimizelegibility (in your browser; other browsers may vary).
... html <p class="speed">lyowat - ff fi fl ffl</p> <p class="legibility">lyowat - ff fi fl ffl</p>
css p { font: 1.5em "constantia", "times new roman", "georgia", "palatino", serif } .speed { text-rendering: optimizespeed; } .legibility { text-rendering: optimizelegibility; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'text-rendering' in that specification.
<time> - CSS: Cascading Style Sheets
the <time>
css data type represents a time value expressed in seconds or milliseconds.
... specifications specification status comment
css values and units module level 4the definition of '<time>' in that specification.
... editor's draft
css values and units module level 3the definition of '<time>' in that specification.
...
css level 2 (revision 1)the definition of '<time>' in that specification.
matrix3d() - CSS: Cascading Style Sheets
the matrix3d()
css function defines a 3d transformation as a 4x4 homogeneous matrix.
... html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section>
css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width:...
...</div>
css html { width: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demons...
...ransform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ); } 50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1.1 ) } } result specifications specification status comment
css transforms level 2the definition of 'matrix3d()' in that specification.
rotate3d() - CSS: Cascading Style Sheets
the rotate3d()
css function defines a transformation that rotates an element around a fixed axis in 3d space, without deforming it.
...a non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole
css property.
...ℝℙ2 cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div>
css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div>
css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { t...
...ransform: rotate3d(1, 2, -1, 192deg); background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'rotate3d()' in that specification.
translateZ() - CSS: Cascading Style Sheets
the translatez()
css function repositions an element along the z-axis in 3d space, i.e., closer to or farther away from the viewer.
... html <div>static</div> <div class="moved">moved</div>
css div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
... result specifications specification status comment
css transforms level 2the definition of 'transform' in that specification.
... editor's draft adds 3d transform functions to the
css transforms standard.
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.
...in both cases, the
css declaration stays valid.
... formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/
css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/
css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-...
...start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function: step-start; } .step-end { transition-timing-function: step-end; } specifications specification status comment
css transitionsthe definition of 'transition-timing-function' in that specification.
unset - CSS: Cascading Style Sheets
the unset
css keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
... unset can be applied to any
css property, including the
css shorthand all.
... examples color html <p>this text is red.</p> <div class="foo"> <p>this text is also red.</p> </div> <div class="bar"> <p>this text is green (default inherited value).</p> </div>
css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial default, not inherited).</p> </div>
css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; } result specifications specification status comment
css cascading and inheritance level 4the definition of 'unset' in that specification.
...
css cascading and inheritance level 3the definition of 'unset' in that specification.
visibility - CSS: Cascading Style Sheets
the visibility
css property shows or hides an element without changing the layout of a document.
...notice the second paragraph is still occupying space.</p>
css .visible { visibility: visible; } .not-visible { visibility: hidden; } table example html <table> <tr> <td>1.1</td> <td class="collapse">1.2</td> <td>1.3</td> </tr> <tr class="collapse"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table>
css .collapse { visibility: collapse; } tab...
...le { border: 1px solid red; } td { border: 1px solid gray; } specifications specification status comment
css flexible box layout modulethe definition of 'visibility' in that specification.
...
css level 2 (revision 1)the definition of 'visibility' in that specification.
widows - CSS: Cascading Style Sheets
the widows
css property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
...it has a little bit more text than the first one.</p> </div>
css div { background-color: #8cffa0; columns: 3; widows: 2; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment
css fragmentation module level 3the definition of 'widows' in that specification.
...
css multi-column layout modulethe definition of 'widows' in that specification.
...
css level 2 (revision 1)the definition of 'widows' in that specification.
zoom - CSS: Cascading Style Sheets
the non-standard zoom
css property can be used to control the magnification level of an element.
...however, unlike
css transforms, zoom affects the layout size of the element.
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p>
css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div>
css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; disp...
...apple has a description in the safari
css reference.
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a
css selector is the part of a
css rule that describes what elements in a document the rule will match.
... consider this
css: p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p> element), "div.warning" (which makes any <div> element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.
... we can then apply this
css to some html, such as: <p>this is happy text.</p> <div class="warning"> be careful!
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of
css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine.
...
css offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device.
... learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the
css styles that are specified within the curly braces of the media query; for example: only applying certain
css styles for devices below 768 pixels.
Edit Shape Paths in CSS - Firefox Developer Tools
the shape path editor is a tool that helps you see and edit shapes created using clip-path and also the
css shape-outside property and <basic-shape> values.
... activate / deactivate the shape path editor the shape path editor is accessed via the
css rules panel, which can be opened as described in the guide to opening the inspector.
...to understand the margin box, and other boxes used by
css shapes see our guide to shapes from box values.
CSS.paintWorklet (Static property) - Web APIs
paintworklet is a static, read-only property of the
css interface that provides access to the paintworklet, which programmatically generates an image where a
css property expects a file.
... syntax var worklet =
css.paintworklet; value the paintworklet object.
... <script> if ('paintworklet' in
css) {
css.paintworklet.addmodule('checkerboard.js'); } </script> specifications specification status comment
css painting api level 1the definition of 'paintworklet' in that specification.
CSSMathProduct.values - Web APIs
the
cssmathproduct.values read-only property of the
cssmathproduct interface returns a
cssnumericarray object which contains one or more
cssnumericvalue objects.
... syntax var
cssnumericarray =
cssmathproduct.values; value a
cssnumericarray.
... specifications specification status comment
css typed om level 1the definition of 'values' in that specification.
CSSMathSum.values - Web APIs
the
cssmathsum.values read-only property of the
cssmathsum interface returns a
cssnumericarray object which contains one or more
cssnumericvalue objects.
... syntax var
cssnumericarray =
cssmathsum.values; value a
cssnumericarray.
... specifications specification status comment
css typed om level 1the definition of 'values' in that specification.
CSSNamespaceRule.namespaceURI - Web APIs
the
cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace.
... syntax var namespaceuri =
cssnamespacerule.namespaceuri returns a domstring containing a uri.
... specifications specification status comment
css object model (
cssom)the definition of 'namespaceuri' in that specification.
CSSNamespaceRule.prefix - Web APIs
the
cssnamespacerule.prefix read-only property returns a domstring with the name of the prefix associated to this namespace.
... syntax var prefix =
cssnamespacerule.prefix returns a domstring containing the prefix associated to this namespace.
... specifications specification status comment
css object model (
cssom)the definition of 'namespaceuri' in that specification.
CSSNumericValue.equals() - Web APIs
the equals() method of the
cssnumericvalue interface returns a boolean indicating whether the passed value are strictly equal.
... syntax var boolean =
cssnumericvalue.equals(number); parameters number either a number or a
cssnumericvalue.
... let
cssmathsum = new
cssmathsum(
css.px(1),
css.px(2)); let matching
cssmathsum = new
cssmathsum(
css.px(1),
css.px(2)); // prints true console.log(
cssmathsum.equals(matching
cssmathsum)); let other
cssmathsum =
cssmathsum(
css.px(2),
css.px(1)); // prints false console.log(
cssmathsum.equals(other
cssmathsum)); // also prints false console.log(
css.cm("1").equal(
css.in("0.393701"))); specifications specification status comment
css typed om level 1the definition of 'equals' in that specification.
CSSNumericValue.sum() - Web APIs
the sub() method of the
cssnumericvalue interface subtracts a supplied number from the
cssnumericvalue.
... syntax var
cssmathsum =
cssnumericvalue.sub(number); parameters number either a number or a
cssmathsum return value a
cssmathsum exceptions typeerror indicates that an invalid type was passed to the method.
... examples let mathsum =
css.px("23").sum(
css.percent("4")).sum(
css.cm("3")).sum(
css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment
css typed om level 1the definition of 'sub' in that specification.
CSSPositionValue.x - Web APIs
the x property of the
csspositionvalue interface returns returns the item's position along the web page's horizontal axis.
... syntax var x =
csspositionvalue.x value a
cssnumericvalue.
... let somediv = document.getelementbyid('container'); let position = new
csspositionvalue(
css.px(5),
css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSPositionValue.y - Web APIs
the y property of the
csspositionvalue interface returns the item's position along the vertical axis.
... syntax var y =
csspositionvalue.y value a
cssnumericvalue.
... let replaceel = document.getelementbyid('container'); let position = new
csspositionvalue(
css.px(5),
css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSRule.parentStyleSheet - Web APIs
the parentstylesheet property of the
cssrule interface returns the stylesheet object in which the current rule is defined.
... syntax var stylesheet =
cssrule.parentstylesheet parameters stylesheet is a stylesheet object.
...} specifications specification status comment
css object model (
cssom)the definition of '
cssrule: parentstylesheet' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
the
cssstyledeclaration.getpropertypriority() method interface returns a domstring that provides all explicitly set priorities on the
css property.
... example the following javascript code checks whether margin is marked as important in a
css selector rule: var declaration = document.stylesheets[0].
cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration.getpropertypriority()' in that specification.
... working draft document object model (dom) level 2 style specificationthe definition of '
cssstyledeclaration' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
the
cssstyledeclaration.getpropertyvalue() method interface returns a domstring containing the value of a specified
css property.
... example the following javascript code queries the value of the margin property in a
css selector rule: var declaration = document.stylesheets[0].
cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration.getpropertyvalue()' in that specification.
... working draft document object model (dom) level 2 style specificationthe definition of '
cssstyledeclaration' in that specification.
CSSStyleDeclaration.length - Web APIs
the read-only property returns an integer that represents the number of style declarations in this
css declaration block.
... example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment
css object model (
cssom)the definition of '
cssstyledeclaration.length' in that specification.
... working draft document object model (dom) level 2 style specificationthe definition of '
cssstyledeclaration' in that specification.
CSSStyleRule.selectorText - Web APIs
the
cssrule.selectortext property gets the textual representation of the selector for the rule set.
... syntax string =
cssrule.selectortext example // for
cssrule: body { background-color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.
cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
... specifications specification status comment
css object model (
cssom)the definition of '
cssstylerule.selectortext' in that specification.
CSSStyleRule.styleMap - Web APIs
the stylemap read-only property of the
cssstylerule interface returns a stylepropertymap object which provides access to the rule's property-value pairs.
... syntax var stylepropertymap =
cssstylerule.stylemap; value a stylepropertymap object.
... specifications specification status comment
css typed om level 1the definition of 'stylemap' in that specification.
CSSStyleSheet.deleteRule() - Web APIs
the
cssstylesheet method deleterule() removes a rule from the stylesheet object.
... syntax
cssstylesheet.deleterule(index) parameters index the index into the stylesheet's
cssrulelist indicating the rule to be removed.
... mystyles.deleterule(0); specifications specification status comment
css object model (
cssom)the definition of '
cssstylesheet.deleterule()' in that specification.
CSSStyleSheet.ownerRule - Web APIs
the read-only
cssstylesheet property ownerrule returns the
cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document.
... syntax var ownerrule =
cssstylesheet.ownerrule; value a
cssimportrule corresponding to the @import rule which imported the stylesheet into the document.
... let rulelist = document.stylesheets[0].
cssrules; for (let rule of rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].
cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } } specifications specification status comment
css object model (
cssom)the definition of '
cssstylesheet.ownerrule' in that specification.
CSSStyleSheet.removeRule() - Web APIs
the obsolete
cssstylesheet method removerule() removes a rule from the stylesheet object.
... syntax
cssstylesheet.removerule(index) parameters index the index into the stylesheet's
cssrulelist indicating the rule to be removed.
... mystyles.removerule(0); you can rewrite this to use the standard deleterule() method very easily: mystyles.deleterule(0); specifications specification status comment
css object model (
cssom)the definition of '
cssstylesheet.removerule()' in that specification.
CSSUnparsedValue.keys() - Web APIs
the
cssunparsedvalue.keys() method returns a new array iterator object that contains the keys for each index in the array.
... syntax
cssunparsedvalue.keys() parameters none.
... specifications specification status comment
css typed om level 1the definition of 'keys()' in that specification.
CSSUnparsedValue.length - Web APIs
the length read-only property of the
cssunparsedvalue interface returns the number of items in the object.
... syntax var length =
cssunparsedvalue.length; value an integer.
... examples in this example we employ the
cssunparsedvalue.
cssunparsedvalue() constructor, then query the length: let values = new
cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( values.length ) // 3 specifications specification status comment
css typed om level 1the definition of 'length' in that specification.
CSSUnparsedValue.values() - Web APIs
the
cssunparsedvalue.values() method returns a new array iterator object that contains the values for each index in the
cssunparsedvalue object.
... syntax
cssunparsedvalue.values() parameters none.
... specifications specification status comment
css typed om level 1the definition of 'values()' in that specification.
CSSValueList.length - Web APIs
the length read-only property of the
cssvaluelist interface represents the number of
cssvalues in the list.
... syntax var length =
cssvaluelist.length; value an unsigned long representing the number of
cssvalues.
... specifications specification status comment document object model (dom) level 2 style specificationthe definition of '
cssvaluelist.length' in that specification.
CSSVariableReferenceValue() - Web APIs
creates a new
cssvariablereferencevalue.
... syntax new
cssvariablereferencevalue(variable[, fallback]]) parameters variable a custom property name.
... specifications specification status comment
css typed om level 1the definition of '
cssvariablereferencevalue()' in that specification.
CSSVariableReferenceValue.fallback - Web APIs
the fallback read-only property of the
cssvariablereferencevalue interface returns the custom property fallback value of the
cssvariablereferencevalue.
... syntax var fallback =
cssvariablereferencevalue.fallback; value a
cssunparsedvalue.
... specifications specification status comment
css typed om level 1the definition of 'fallback' in that specification.
CSSVariableReferenceValue.variable - Web APIs
the variable property of the
cssvariablereferencevalue interface returns the custom property name of the
cssvariablereferencevalue.
... syntax var variable =
cssvariablereferencevalue.variable; value a usvstring beginning with -- (that is, a custom property name).
... specifications specification status comment
css typed om level 1the definition of 'variable' in that specification.
CSS Counter Styles - Web APIs
the
css counter styles module allows to define custom counter styles, which can be used for
css list-marker and generated-content counters.
... interfaces
csscounterstylerule represents an @counter-style rule.
... specifications specification status comment
css counter styles level 3 candidate recommendation initial definition ...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
creating space around and inside elements is the job of
css.
... how does
css process whitespace?
...there are rules in the browser engine that decide which whitespace characters are useful and which aren’t — these are specified at least in part in
css text module level 3, and especially the parts about the
css white-space property and whitespace processing details, but we also offer an easier explanation below.
-moz-outline-radius - CSS: Cascading Style Sheets
in mozilla applications like firefox, the -moz-outline-radius
css shorthand property can be used to give an element's outline rounded corners.
... /* one value */ -moz-outline-radius: 25px; /* two values */ -moz-outline-radius: 25px 1em; /* three values */ -moz-outline-radius: 25px 1em 12%; /* four values */ -moz-outline-radius: 25px 1em 12% 4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following
css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius.
... html <p>this element has a rounded outline!</p>
css p { margin: 5px; border: 1px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 25px; } result notes dotted or dashed radiused corners were rendered as solid until firefox 50, bug 382721 future versions of gecko/firefox may drop this property completely.
-moz-user-focus - CSS: Cascading Style Sheets
the -moz-user-focus
css property is used to indicate whether an element can have the focus.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element.">
css .ignored { -moz-user-focus: ignore; } specifications not part of any standard.
... a similar property, user-focus, was proposed in early drafts of a predecessor of the
css3 ui specification, but was rejected by the working group.
-webkit-box-reflect - CSS: Cascading Style Sheets
the -webkit-box-reflect
css property lets you reflect the content of an element in one specific direction.
...to achieve reflection on the web, the standard way is to use the
css element() function.
...the standard way to do reflection in
css is to use the
css element() function.
-webkit-line-clamp - CSS: Cascading Style Sheets
the -webkit-line-clamp
css property allows limiting of the contents of a block container to the specified number of lines.
...the
css overflow module level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.
...</p>
css p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } result specifications specification status comment
css overflow module level 3the definition of '-webkit-line-clamp' in that specification.
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the -webkit-overflow-scrolling
css property controls whether or not touch devices use momentum-based scrolling for a given element.
... </p> </div>
css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling immediately */ } results specifications not part of any standard.
... apple has a description in the safari
css reference.
-webkit-text-fill-color - CSS: Cascading Style Sheets
the -webkit-text-fill-color
css property specifies the fill color of characters of text.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color
css p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; } html <p>this text is green.</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-fill-color' in that specification.
... living standard initial standardization safari
css reference '-webkit-text-fill-color' in that document.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
the -webkit-text-stroke-color
css property specifies the stroke color of characters of text.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000">
css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specific...
... living standard initial standardization safari
css reference '-webkit-text-stroke-color' in that document.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-text-stroke-width
css property specifies the width of the stroke for text.
... formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths
css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment ...
... living standard initial standardization safari
css reference '-webkit-text-stroke-width' in that document.
::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-webkit-inner-spin-button
css pseudo-element is used to style the inner part of the spinner button of number picker input elements.
... changing the cursor in the spin controls in this example, the
css cursor is changed to pointer whenever the cursor is positioned over the inner part of the input's spin controls.
... html <input type="number">
css input[type=number]::-webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard.
::cue - CSS: Cascading Style Sheets
the ::cue
css pseudo-element matches webvtt cues within a selected element.
... syntax ::cue | ::cue( <selector> ) permitted properties rules whose selectors include this element may only use the following
css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration ...
...text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space examples styling webvtt cues as white-on-black the following
css sets the cue style so that the text is white and the background is a translucent black box.
::grammar-error - CSS: Cascading Style Sheets
the ::grammar-error
css pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
... allowable properties only a small subset of
css properties can be used in a rule with ::grammar-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
... html <p>my friends is coming to the party tonight.</p>
css ::grammar-error { text-decoration: underline red; color: red; } result specifications specification status comment
css pseudo-elements level 4the definition of '::grammar-error' in that specification.
::placeholder - CSS: Cascading Style Sheets
the ::placeholder
css pseudo-element represents the placeholder text in an <input> or <textarea> element.
... ::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.
... mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!">
css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here...">
css input::placeholder { color: green; } result specifications specification status comment
css pseudo-elements level 4the definition of '::placeholder' in that specification.
::slotted() - CSS: Cascading Style Sheets
the ::slotted()
css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more information).
... this only works when used inside
css placed within a shadow dom.
...shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">superhero</span> </person-details> specifications specification status comment
css scoping module level 1the definition of '::slotted' in that specification.
::spelling-error - CSS: Cascading Style Sheets
the ::spelling-error
css pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.
... allowable properties only a small subset of
css properties can be used in a rule with ::spelling-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.
... html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p>
css ::spelling-error { text-decoration: wavy red; } result specifications specification status comment
css pseudo-elements level 4the definition of '::spelling-error' in that specification.
:checked - CSS: Cascading Style Sheets
the :checked
css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
...="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select>
css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; co...
...><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label>
css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: 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 *...
:dir() - CSS: Cascading Style Sheets
the :dir()
css pseudo-class matches elements based on the directionality of the text contained in them.
...it doesn't account for styling directionality, i.e., the directionality set by
css properties such as direction.
... formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div>
css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification.
:empty - CSS: Cascading Style Sheets
the :empty
css pseudo-class represents any element that has no children.
...comments, processing instructions, and
css content do not affect whether an element is considered empty.
...--></p> </div>
css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
:first-child - CSS: Cascading Style Sheets
the :first-child
css pseudo-class represents the first element among a group of sibling elements.
... syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div>
css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul>
css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications spec...
...
css level 2 (revision 1)the definition of ':first-child' in that specification.
:first-of-type - CSS: Cascading Style Sheets
the :first-of-type
css pseudo-class represents the first element of its type among a group of sibling elements.
... syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p>
css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article>
css article :first-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification.
:host-context() - CSS: Cascading Style Sheets
the :host-context()
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's ancestor(s) in the place it sits inside the dom hierarchy.
... 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; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ...
... specifications specification status comment
css scoping module level 1the definition of ':host-context()' in that specification.
:host - CSS: Cascading Style Sheets
the :host
css pseudo-class selects the shadow host of the shadow dom containing the
css it is used inside — in other words, this allows you to select a custom element from inside its shadow dom.
... 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; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ...
... specifications specification status comment
css scoping module level 1the definition of ':host' in that specification.
:lang() - CSS: Cascading Style Sheets
the :lang()
css pseudo-class matches elements based on the language they are determined to be in.
... html <div lang="en"><q>this english quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div>
css :lang(en) > q { quotes: '\201c' '\201d' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203a'; } result specifications specification status comment selectors level 4the definition of ':lang()' in that specification.
...
css level 2 (revision 1)the definition of ':lang()' in that specification.
:last-of-type - CSS: Cascading Style Sheets
the :last-of-type
css pseudo-class represents the last element of its type among a group of sibling elements.
... syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p>
css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article>
css article :last-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':last-of-type' in that specification.
:left - CSS: Cascading Style Sheets
the :left
css pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.
... syntax :left examples setting a margin for left-hand pages @page :left { margin: 2in 3in; } specifications specification status comment
css paged media module level 3the definition of ':left' in that specification.
...
css level 2 (revision 1)the definition of ':left' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
the :nth-last-child()
css pseudo-class matches elements based on their position among a group of siblings, counting from the end.
... table example html <table> <tbody> <tr> <td>first line</td> </tr> <tr> <td>second line</td> </tr> <tr> <td>third line</td> </tr> <tr> <td>fourth line</td> </tr> <tr> <td>fifth line</td> </tr> </tbody> </table>
css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending o...
... html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol>
css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
:only-child - CSS: Cascading Style Sheets
the :only-child
css pseudo-class represents an element without any siblings.
... syntax :only-child examples basic example html <div> <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div>
css div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example html <ol> <li>first <ul> <li>this list has just one element.</li> </ul> </li> <li>second <ul> <li>this list has three elements.</li> <li>this list has three elements.</li> <li>this list has three elements.</li> </ul> ...
...</li> </ol>
css li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } result specifications specification status comment selectors level 4the definition of ':only-child' in that specification.
:right - CSS: Cascading Style Sheets
the :right
css pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.
... syntax :right examples setting margins for right-hand pages @page :right { margin: 2in 3in; } specifications specification status comment
css paged media module level 3the definition of ':right' in that specification.
...
css level 2 (revision 1)the definition of ':right' in that specification.
:scope - CSS: Cascading Style Sheets
the :scope
css pseudo-class represents elements that are a reference point for selectors to match against.
... no support 20 — 32disabled disabled from version 20 until version 32 (exclusive): this feature is behind the layout.
css.scope-pseudo.enabled preference (needs to be set to true).
... full support 20disabled disabled from version 20: this feature is behind the layout.
css.scope-pseudo.enabled preference (needs to be set to true).
:where() - CSS: Cascading Style Sheets
the :where()
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.
...in other versions of firefox it is behind a pref — layout.
css.is-where-selectors.enabled).
...hrome, visit chrome://flags.edge no support nofirefox full support 78 full support 78 full support 77notes disabled notes enabled by default in firefox nightly.disabled from version 77: this feature is behind the layout.
css.is-where-selectors.enabled preference (needs to be set to enabled).
@counter-style - CSS: Cascading Style Sheets
the @counter-style
css at-rule lets you define counter styles that are not part of the predefined set of styles.
... @counter-style thumbs { system: cyclic; symbols: "\1f44d"; suffix: " "; } ul { list-style: thumbs; } the initial version of
css defined a set of useful counter styles.
... specifications specification status comment
css counter styles level 3the definition of 'counter-style' in that specification.
src - CSS: Cascading Style Sheets
the src
css descriptor of the @font-face rule specifies the resource containing font data.
... as with other urls in
css, the url may be relative, in which case it is resolved relative to the location of the style sheet containing the @font-face rule.
...| local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+ examples specifying font resources using url() and local() @font-face { font-family: examplefont; src: local(example font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } specifications specification status comment
css fonts module level 3the definition of 'src' in that specification.
unicode-range - CSS: Cascading Style Sheets
the unicode-range
css descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page.
... in the
css we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font.
... html <div>me & you = us</div>
css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status comment
css fonts module level 3the definition of 'unicode-range' in that specification.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
the -moz-device-pixel-ratio gecko-only
css media feature can be used to apply styles based on the number of device pixels per
css pixel.
... syntax <number> the number of device pixels per
css pixel.
... example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this
csswg article for compatibility good practices regarding resolution and dppx.
aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio
css media feature can be used to test the aspect ratio of the viewport.
...</div>
css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to en...
...type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe>
css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level...
color-index - CSS: Cascading Style Sheets
the color-index
css media feature can be used to test the number of entries in the output device's color lookup table.
... examples basic example html <p>this is a test.</p>
css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors.
... <link rel="stylesheet" href="http://foo.bar.com/base.
css" /> <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.
css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
color - CSS: Cascading Style Sheets
the color
css media feature can be used to test the number of bits per color component (red, green, blue) of the output device.
... see applying color to html elements using
css to learn more about using
css to apply color to html.
... examples html <p>this text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p>
css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @media (min-color: 8) { p { color: #24ba13; } } result specifications specification status comment media queries level 4the definition of 'color' in that specification.
forced-colors - CSS: Cascading Style Sheets
the forced-colors
css media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.
...the browser provides the color palette to authors through the
css system color keywords and, if appropriate, it triggers the appropriate value of prefers-color-scheme so that authors can adapt the page.
... html <div class="colors">weird color box</div>
css .colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } } result specifications specification status comment media queries level 5the definition of 'forced-colors' in that specification.
shape - CSS: Cascading Style Sheets
the shape
css media feature can be used to test the shape of the device to distinguish recrangular and round displays.
... examples basic example html <h1>hello world!</h1>
css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens.
... <head> <link rel="stylesheet" href="default.
css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.
css" /> <link media="screen and (shape: round)" rel="stylesheet" href="round.
css" /> </head> specifications specification status
css round display level 1the definition of 'shape' in that specification.
@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a
css style sheet.
...to match this behaviour, the default namespace in
css does not apply to attribute selectors.
...ult and prefixed namespaces @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* this matches all xhtml <a> elements, as xhtml is the default unprefixed namespace */ a {} /* this matches all svg <a> elements */ svg|a {} /* this matches both xhtml and svg <a> elements */ *|a {} specifications specification status comment
css namespaces modulethe definition of '@namespace' in that specification.
marks - CSS: Cascading Style Sheets
the marks
css at-rule descriptor, used with the @page at-rule, adds crop and/or cross marks to the presentation of the document.
... formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment
css paged media module level 3the definition of 'marks' in that specification.
... working draft initial definition this
css property was initially proposed in
css level 2, but was dropped from
css level 2 (revision 1).
height - CSS: Cascading Style Sheets
the height
css descriptor is a shorthand descriptor for setting both min-height and max-height of the viewport.
... syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other
css descriptors' values.
...as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment
css device adaptationthe definition of '"height" descriptor' in that specification.
max-height - CSS: Cascading Style Sheets
the max-height
css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule.
... syntax /* keyword value */ max-height: auto; /* <length> values */ max-height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other
css descriptors' values.
..., the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment
css device adaptationthe definition of '"max-height" descriptor' in that specification.
max-width - CSS: Cascading Style Sheets
the max-width
css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule.
... syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other
css descriptors' values.
..., the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment
css device adaptationthe definition of '"max-width" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
the min-height
css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule.
... syntax /* keyword value */ min-height: auto; /* <length> values */ min-height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other
css descriptors' values.
..., the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment
css device adaptationthe definition of '"min-height" descriptor' in that specification.
min-width - CSS: Cascading Style Sheets
the min-width
css descriptor specifies the minimum width of the viewport of a document defined via @viewport.
... syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other
css descriptors' values.
...th, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment
css device adaptationthe definition of '"min-width" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
the viewport-fit
css @viewport descriptor controls how a document's viewport fills the screen.
... this descriptor hasn't been added to https://github.com/mdn/data/blob/master/
css/at-rules.json yet.
... formal definition related at-rule@viewportinitial valueautocomputed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment
css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
width - CSS: Cascading Style Sheets
the width
css descriptor is shorthand for setting both the min-width and the max-width descriptors of the viewport.
... syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other
css descriptors' values.
...ge as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment
css device adaptationthe definition of '"min-width" descriptor' in that specification.
Box alignment in grid layout - CSS: Cascading Style Sheets
on this page we explore how box alignment works in the context of
css grid layout.
... as this page aims to detail things which are specific to
css grid layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.
... reference
css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in grid layout external resources box alignment cheatsheet
css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
if you have looked at the main page for
css logical properties and values you will see there are a huge number of properties listed.
... in a horizontal writing mode this
css would apply a 5px margin to the top of the box and a 10px margin to the bottom.
... in a horizontal writing-mode this
css would apply 5px of padding to the top of the box and 10px of padding to the bottom: .box { padding-block: 5px 10px; } note: the shorthand properties padding-inline and padding-block shipped in firefox 66.
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
scroll snapping is one of those nice parts of
css in which the fallback is that you don't get the enhanced functionality, but everything still works.
...however, these properties shouldn't cause any problems to non-supporting browsers due to the way that browsers simply ignore
css that they do not understand.
...this is the reality of developing new
css — it can't be developed in a vacuum away from browser implementations.
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.
... creating shapes using a gradient as a
css gradient is treated as an image, you can use a gradient to generate your shape, by having transparent or semi-transparent areas as part of the gradient.
Child combinator - CSS: Cascading Style Sheets
the child combinator (>) is placed between two
css selectors.
... syntax selector1 > selector2 { style properties } examples
css span { background-color: white; } div > span { background-color: dodgerblue; } html <div> <span>span #1, in the div.
...
css level 2 (revision 1)the definition of 'child selectors' in that specification.
Comments - CSS: Cascading Style Sheets
a
css comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet.
...however, when using the <style> element, you may use <!-- --> to hide
css from older browsers, although this is not recommended.
... specifications
css 2.1 syntax and basic data types #comments ...
Column layouts - CSS: Cascading Style Sheets
you will often need to create a layout which has a number of columns, and
css provides several ways to do this.
... lining items up in rows and columns — grid layout if what you want is a layout where items line up in rows and columns then you should choose
css grid layout.
... grid layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with
css grid you can line your items up in rows and columns — it is described as two-dimensional.
Media queries - CSS: Cascading Style Sheets
in
css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query.
... 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.
... specifications specification status comment media queries level 5 editor's draft
css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation media queries recommendation
css level 2 (revision 1) recommendation initial definition ...
align-self - CSS: Cascading Style Sheets
the align-self
css property overrides a grid or flex item's align-items value.
...baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section>
css section { display: flex; align-items: center; height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; } result specifications specification status comment
css box alignment module level 3the definition of 'align-self' in that specification.
...
css flexible box layout modulethe definition of 'align-self' in that specification.
<angle-percentage> - CSS: Cascading Style Sheets
the <angle-percentage>
css data type represents a value that can be either a <angle> or a <percentage>.
... specifications specification status comment
css values and units module level 4the definition of '<angle-percentage>' in that specification.
... editor's draft
css values and units module level 3the definition of '<angle-percentage>' in that specification.
<angle> - CSS: Cascading Style Sheets
the <angle>
css data type represents an angle value expressed in degrees, gradians, radians, or turns.
...le 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status comment
css values and units module level 4the definition of '<angle>' in that specification.
... editor's draft
css values and units module level 3the definition of '<angle>' in that specification.
animation-duration - CSS: Cascading Style Sheets
the animation-duration
css property sets the length of time that an animation takes to complete one cycle.
... formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-duration' in that specification.
animation-iteration-count - CSS: Cascading Style Sheets
the animation-iteration-count
css property sets the number of times an animation sequence should be played before stopping.
... formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-iteration-count' in that specification.
animation-name - CSS: Cascading Style Sheets
the animation-name
css property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.
... formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-name' in that specification.
animation-play-state - CSS: Cascading Style Sheets
the animation-play-state
css property sets whether an animation is running or paused.
... formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see
css animations for examples.
... specifications specification status comment
css animationsthe definition of 'animation-play-state' in that specification.
animation-timing-function - CSS: Cascading Style Sheets
the animation-timing-function
css property sets how an animation progresses through the duration of each cycle.
... formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/
css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/
css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-...
...function: steps(5, jump-none); } .jump-both { animation-timing-function: steps(5, jump-both); } .start { animation-timing-function: steps(5, start); } .end { animation-timing-function: steps(5, end); } .step-start { animation-timing-function: step-start; } .step-end { animation-timing-function: step-end; } specifications specification status comment
css animationsthe definition of 'animation-timing-function' in that specification.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the appearance
css property is used to display an element using platform-native styling, based on the operating system's theme.
... syntax /*
css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearan...
... specifications specification status comment
css basic user interface module level 4the definition of 'appearance' in that specification.
backface-visibility - CSS: Cascading Style Sheets
the backface-visibility
css property sets whether the back face of an element is visible when turned towards the user.
... </p> </td> </tr> </table>
css /* classes that will show or hide the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspect...
...6, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment
css transforms level 2the definition of 'backface-visibility' in that specification.
<basic-shape> - CSS: Cascading Style Sheets
the <basic-shape>
css data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
... html <div></div>
css div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } ...
... to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } } result specifications specification status comment
css shapes module level 1the definition of '<basic-shape>' in that specification.
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.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-end' in that specification.
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.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status comment
css logical properties and values level 1the definition of 'border-block-start' in that specification.
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.
... constituent properties this property is a shorthand for the following
css properties: border-block-color border-block-style border-block-width syntax values the border-block is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block' in that specification.
border-collapse - CSS: Cascading Style Sheets
the border-collapse
css property sets whether cells inside a <table> have shared or separate borders.
...r><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table>
css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blu...
...e; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } result specifications specification status comment
css level 2 (revision 1)the definition of 'border-collapse' in that specification.
border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius
css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
...lso applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div>
css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-end-end-ra...
border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius
css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
...lso applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div>
css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-end-start-radi...
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat
css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images
css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</optio...
..."stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-slice - CSS: Cascading Style Sheets
the border-image-slice
css property divides the image specified by border-image-source into regions.
...iv> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul>
css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sl...
...r('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
border-inline-end - CSS: Cascading Style Sheets
the border-inline-end
css property is a shorthand property for setting the individual logical inline-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-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-end: 5px dashed blue; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-end' in that specification.
border-inline-start - CSS: Cascading Style Sheets
the border-inline-start
css property is a shorthand property for setting the individual logical inline-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-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-start: 5px dashed blue; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-start' in that specification.
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.
...der-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following
css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-inline' in that specification.
border-radius - CSS: Cascading Style Sheets
the border-radius
css property rounds the corners of an element's outer border edge.
... constituent properties this property is a shorthand for the following
css properties: border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius syntax /* the syntax of the first radius allows one to four values */ /* radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-...
... border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj/3/ sample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/6/ specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-radius' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius
css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
...lso applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div>
css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-start-end-radi...
border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius
css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation.
...as absolute length it can be expressed in any unit allowed by the
css <length> data type.
...lso applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div>
css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-start-star...
bottom - CSS: Cascading Style Sheets
the bottom
css property participates in setting the vertical position of a positioned element.
... html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div>
css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment
css positioned layout module level 3the definiti...
...
css level 2 (revision 1)the definition of 'bottom' in that specification.
box-align - CSS: Cascading Style Sheets
warning: this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the box-align
css property specifies how an element aligns its contents across its layout in a perpendicular direction.
... formal definition initial valuestretchapplies toelements with a
css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>
css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box;...
box-decoration-break - CSS: Cascading Style Sheets
the box-decoration-break
css property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
...see the
css specification for details.
... specifications specification status comment
css fragmentation module level 3the definition of 'box-decoration-break' in that specification.
box-pack - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the -moz-box-pack and -webkit-box-pack
css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout.
... formal definition initial valuestartapplies toelements with a
css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ heig...
box-shadow - CSS: Cascading Style Sheets
the box-shadow
css property adds shadow effects around an element's frame.
... html <blockquote><q>you may shoot me with your words,<br/> you may cut me with your eyes,<br/> you may kill me with your hatefulness,<br/> but still, like air, i'll rise.</q> <p>— maya angelou</p> </blockquote>
css blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); } result setting zero for offset and blur when the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides.
... html <div><p>hello world</p></div>
css p { box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff; margin: 4em; padding:1em; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'box-shadow' in that specification.
color-adjust - CSS: Cascading Style Sheets
the color-adjust
css property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
...
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result sp...
...ecifications specification status comment
css color adjustment module level 1the definition of 'color-adjust' in that specification.
column-fill - CSS: Cascading Style Sheets
the column-fill
css property controls how an element's contents are balanced when broken into columns.
...the
css `column-fill` property is used to spread the contents evenly across all the columns.
... </p>
css .content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-fill' in that specification.
Computed value - CSS: Cascading Style Sheets
the computed value of a
css property is the value that is transferred from parent to child during inheritance.
... specifications specification status comment
css level 2 (revision 2)the definition of 'computed-value' in that specification.
...
css level 2 (revision 1)the definition of 'computed value' in that specification.
counter-set - CSS: Cascading Style Sheets
the counter-set
css property sets a
css counter to a given value.
... note: the counter's value can be incremented or decremented using the counter-increment
css property.
...]+ | none examples setting named counters h1 { counter-set: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment
css lists module level 3the definition of 'counter-set' in that specification.
<display-legacy> - CSS: Cascading Style Sheets
css 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode.
... html <div class="container"> <div>flex item</div> <div>flex item</div> </div> not a flex item
css .container { display: inline-flex; } result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
... .container { display: inline flex; } specifications specification status
css display module level 3the definition of 'display-legacy' in that specification.
flex-basis - CSS: Cascading Style Sheets
the flex-basis
css property sets the initial main size of a flex item.
...ples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul>
css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; ma...
... } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status comment
css flexible box layout modulethe definition of 'flex-basis' in that specification.
flex-flow - CSS: Cascading Style Sheets
the flex-flow
css shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
... constituent properties this property is a shorthand for the following
css properties: flex-direction flex-wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; /* global values */ flex-flow: inherit; flex-flow: initial; flex-flow: unset; values se...
...flex items are laid out in multiple lines */ flex-flow: column-reverse wrap; } specifications specification status comment
css flexible box layout modulethe definition of 'flex-flow' in that specification.
<flex> - CSS: Cascading Style Sheets
the <flex>
css data type denotes a flexible length within a grid container.
...as with all
css dimensions, there is no space between the unit and the number.
... examples 1fr /* using an integer value */ 2.5fr /* using a float value */ specifications specification status comment
css grid layoutthe definition of '<flex>' in that specification.
font-kerning - CSS: Cascading Style Sheets
the font-kerning
css property sets the use of the kerning information stored in a font.
...ij</textarea>
css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = i...
...nput.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment
css fonts module level 3the definition of 'font-kerning' in that specification.
font-variant-numeric - CSS: Cascading Style Sheets
the font-variant-numeric
css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
...[ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype...
..."); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment
css fonts module level 3the definition of 'font-variant-numeric' in that specification.
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.
... constituent properties this property is a shorthand for the following
css properties: grid-column-end grid-column-start grid-row-end grid-row-start syntax /* keyword values */ grid-area: auto; grid-area: auto / auto; grid-area: auto / auto / auto; grid-area: auto / auto / auto / auto; /* <custom-ident> values */ grid-area: some-grid-area; grid-area: some-grid-area / another-grid-area; /* <integer> && <custom-ident>?
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status comment
css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow
css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
... html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label>
css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } ...
..."row" : "column"; if (dense.checked) { gridautoflow += " dense"; } grid.style.gridautoflow = gridautoflow; } result specifications specification status comment
css grid layoutthe definition of 'grid-auto-flow' in that specification.
grid-column-end - CSS: Cascading Style Sheets
the grid-column-end
css property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div>
css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wra...
...pper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment
css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
the grid-column-start
css property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div>
css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wra...
...pper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment
css grid layoutthe definition of 'grid-column-start' in that specification.
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.
... constituent properties this property is a shorthand for the following
css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } result specifications specification status comment
css grid layoutthe definition of '...
grid-row-end - CSS: Cascading Style Sheets
the grid-row-end
css property specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div>
css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wra...
...pper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment
css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
the grid-row-start
css property specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div>
css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wra...
...pper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment
css grid layoutthe definition of 'grid-row-start' in that specification.
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.
... constituent properties this property is a shorthand for the following
css properties: grid-row-end grid-row-start syntax /* keyword values */ grid-row: auto; grid-row: auto / auto; /* <custom-ident> values */ grid-row: somegridarea; grid-row: somegridarea / someothergridarea; /* <integer> + <custom-ident> values */ grid-row: somegridarea 4; grid-row: 4 somegridarea / 6; /* span + <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridar...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; } result specifications specification status comment
css grid layoutthe definition of 'grid-r...
grid-template-areas - CSS: Cascading Style Sheets
the grid-template-areas
css property specifies named grid areas, establishing the cells in the grid and assigning them names.
... formal definition initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section>
css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area:...
... main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; } result specifications specification status comment
css grid layoutthe definition of 'grid-template-areas' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
the grid-template-columns
css property defines the line names and track sizing functions of the grid columns.
...)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div>
css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment
css grid layoutthe definition of 'grid-template-columns' in that specification.
... candidate recommendation initial definition
css grid layout module level 2the definition of 'subgrid' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows
css property defines the line names and track sizing functions of the grid rows.
...)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div>
css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment
css grid layoutthe definition of 'grid-template-rows' in that specification.
... candidate recommendation initial definition
css grid layout module level 2the definition of 'subgrid' in that specification.
grid - CSS: Cascading Style Sheets
the grid
css property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
... constituent properties this property is a shorthand for the following
css properties: grid-auto-columns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill...
.../ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment
css grid layoutthe definition of 'grid' in that specification.
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.
...while this can and should be done by including a background-color on every background image, the
css image() function allows adding allows only including background colors should an image fail to load, which means you can add a fall back color should a transparent png/gif/webp not load.
... specifications specification status comment
css images module level 4the definition of 'image()' in that specification.
ime-mode - CSS: Cascading Style Sheets
the ime-mode
css property controls the state of the input method editor (ime) for text fields.
...users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following
css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value.
... specifications specification status comment
css basic user interface module level 3the definition of 'ime-mode' in that specification.
Inheritance - CSS: Cascading Style Sheets
in
css, inheritance controls what happens when no value is specified for a property on an element.
...
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").
... see also
css values for controlling inheritance: inherit, initial, unset, and revert introducing the
css cascade cascade and inheritance
css key concepts:
css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
initial-letter-align - CSS: Cascading Style Sheets
the initial-letter-align
css property specifies the alignment of initial letters within a paragraph.
... first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging">initial letter - hanging</p> <p class="ideographic">initial letter - ideographic</p>
css .auto { -webkit-initial-letter-align: auto; initial-letter-align: auto; } .alphabetic { -webkit-initial-letter-align: alphabetic; initial-letter-align: alphabetic; } .hanging { -webkit-initial-letter-align: hanging; initial-letter-align: hanging; } .ideographic { -webkit-initial-letter-align: ideographic; initial-letter-align: ideographic; } result specifications ...
... specification status comment
css inline layoutthe definition of 'initial-letter-align' in that specification.
Initial value - CSS: Cascading Style Sheets
the initial value of a
css property is its default value, as listed in its definition table in the specification.
... specifications specification status comment
css cascade 4 formal definition.
...
css level 2 (revision 1)the definition of 'initial value' in that specification.
inset-block - CSS: Cascading Style Sheets
the inset-block
css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation.
...values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following
css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property.
...ition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline - CSS: Cascading Style Sheets
the inset-inline
css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation.
.../ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following
css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property.
...ition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset-inline' in that specification.
justify-items - CSS: Cascading Style Sheets
the
css justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
... html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article>
css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: c...
...enter; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment
css box alignment module level 3the definition of 'justify-items' in that specification.
justify-self - CSS: Cascading Style Sheets
the
css justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
... html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article>
css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span {...
... background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment
css box alignment module level 3the definition of 'justify-self' in that specification.
line-height - CSS: Cascading Style Sheets
the line-height
css property sets the height of a line box.
...</div> <!-- the first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px --> <!-- the second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
css .green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size: 30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px; } result specifications specification status comment
css level 2 (revision 1)the definition of 'line-height' in that specification.
...
css level 1the definition of 'line-height' in that specification.
list-style-image - CSS: Cascading Style Sheets
the list-style-image
css property sets an image to be used as the list item marker.
... formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul>
css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment
css lists module level 3the definition of 'list-style-image' in that specification.
...
css level 2 (revision 1)the definition of 'list-style-image' in that specification.
list-style-position - CSS: Cascading Style Sheets
the list-style-position
css property sets the position of the ::marker relative to a list item.
...l class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul>
css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment
css lists module level 3the definition o...
...
css level 2 (revision 1)the definition of 'list-style-position' in that specification.
margin-block - CSS: Cascading Style Sheets
the margin-block
css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
... constituent properties this property is a shorthand for the following
css properties: margin-block-end margin-block-start syntax values the margin-block property takes the same values as the margin-left property.
...ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-inline - CSS: Cascading Style Sheets
the margin-inline
css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
... constituent properties this property is a shorthand for the following
css properties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property.
...on initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-inline' in that specification.
mask-clip - CSS: Cascading Style Sheets
the mask-clip
css property determines the area which is affected by a mask.
...svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box
css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</opti...
...box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
the mask-composite
css property represents a compositing operation used on the current mask layer with the mask layers below it.
... formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition
css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> ...
...ct</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-composite' in that specification.
mask-image - CSS: Cascading Style Sheets
the mask-image
css property sets the image that is used as mask layer for an element.
... <mask-source> a <url> reference to a <mask> or to a
css image.
...gth>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div>
css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment
css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
the mask-mode
css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
... formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode
css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">mat...
...ch-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-mode' in that specification.
mask-position - CSS: Cascading Style Sheets
the mask-position
css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position
css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked...
...on> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment
css masking module level 1the definition of 'mask-position' in that specification.
mask-type - CSS: Cascading Style Sheets
the mask-type
css property sets whether an svg <mask> element is used as a luminance or an alpha mask.
...s setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg>
css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" ...
... style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg>
css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment
css masking module level 1the definition of 'mask-type' in that specification.
mask - CSS: Cascading Style Sheets
the mask
css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
... constituent properties this property is a shorthand for the following
css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminanc...
...r-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; } specifications specification status comment
css masking module level 1the definition of 'mask' in that specification.
mix-blend-mode - CSS: Cascading Style Sheets
the mix-blend-mode
css property sets how an element's content should blend with the content of the element's parent and the element's background.
...nd-mode: exclusion; } .hue .item { mix-blend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div>
css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } re...
...sult using mix-blend-mode with svg svg <svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </g> </svg>
css circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */ result specifications specification status comment compositing and blending level 1the definition of 'mix-blend-mode' in that specification.
offset-distance - CSS: Cascading Style Sheets
the offset-distance
css property specifies a position along an offset-path for an element to be placed.
... formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in
css motion path typically comes from animating the offset-distance property.
... html <div id="motion-demo"></div>
css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification.
offset - CSS: Cascading Style Sheets
the offset
css shorthand property sets all the properties required for animating an element along a defined path.
... constituent properties this property is a shorthand for the following
css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas ...
... examples animating an element along a path html <div id="offsetelement"></div>
css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status comment motion path module level 1the definition of 'offs...
orphans - CSS: Cascading Style Sheets
the orphans
css property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.
...it has a little bit more text than the first one.</p> </div>
css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment
css fragmentation module level 3the definition of 'orphans' in that specification.
...
css level 2 (revision 1)the definition of 'orphans' in that specification.
outline-color - CSS: Cascading Style Sheets
the outline-color
css property sets the color of an element's outline.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a solid blue outline html <p>my outline is blue, as you can see.</p>
css p { outline: 2px solid; /* set the outline width and style */ outline-color: #0000ff; /* make the outline blue */ margin: 5px; } result specifications specification status comment
css basic user interface module level 3the definition of 'outline-color' in that specification.
...
css level 2 (revision 1)the definition of 'outline-color' in that specification.
outline-width - CSS: Cascading Style Sheets
the
css outline-width property sets the thickness of an element's outline.
...ngth; if the keyword none is specified, the computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span>
css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specifications specification status comment
css basic user interface ...
...
css level 2 (revision 1)the definition of 'outline-width' in that specification.
Guide to scroll anchoring - CSS: Cascading Style Sheets
you can check whether disabling scroll anchoring fixes the issue in firefox by changing layout.
css.scroll-anchoring.enabled to false in about:config.
... if it does, you can check what node is firefox using as the anchor using the layout.
css.scroll-anchoring.highlight switch.
... in bug 1584285 the layout.
css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web developers on the chromium blog implement a pin-to-bottom scrolling element using scroll anchoring ...
overflow-block - CSS: Cascading Style Sheets
the overflow-block
css property sets what shows when content overflows the block start and block end edges of a box.
... </div> </li> </ul>
css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;} result specifications specification status comment ...
...
css overflow module level 3the definition of 'overflow-block' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
the overscroll-behavior-block
css property sets the browser's behavior when the block direction boundary of a scrolling area is reached.
... html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main>
css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; backgro...
...und-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment
css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
the overscroll-behavior-inline
css property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.
... html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main>
css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; backgro...
...und-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment
css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
padding-block - CSS: Cascading Style Sheets
the padding-block
css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
... constituent properties this property is a shorthand for the following
css properties: padding-block-end padding-block-start syntax values the padding-block property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline - CSS: Cascading Style Sheets
the padding-inline
css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
... length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following
css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'padding-inline' in that specification.
page-break-inside - CSS: Cascading Style Sheets
the page-break-inside
css property adjusts page breaks inside the current element.
...it has a little bit more text than the third one.</p> </div>
css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment
css p...
...
css level 2 (revision 1)the definition of 'page-break-inside' in that specification.
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin
css property determines the position at which the viewer is looking.
... <figcaption><code>perspective-origin: 200% -200%;</code></figcaption> <div class="container"> <div class="cube po200200"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> </section>
css /* perspective-origin values (unique per example) */ .potl { perspective-origin: top left; } .potm { perspective-origin: top; } .potr { perspective-origin: top right; } .poml { perspective-origin: left; } .pomm { perspective-origin: 50% 50%; } .pomr { perspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspectiv...
... translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment
css transforms level 2the definition of 'perspective-origin' in that specification.
place-items - CSS: Cascading Style Sheets
the
css place-items shorthand property allows you to align items along both the block and inline directions at once (i.e.
... constituent properties this property is a shorthand for the following
css properties: align-items justify-items syntax /* keyword values */ place-items: auto center; place-items: normal start; /* positional alignment */ place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right norm...
...option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; });
css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } result specifications specification status comment
css box alignment...
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.
... html <ul> <li><a href="https://developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul>
css a[href="http://example.com"] { pointer-events: none; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
... recommendation initial definition its extension to html elements, though present in early drafts of
css basic user interface module level 3, has been pushed to its level 4.
radial-gradient() - CSS: Cascading Style Sheets
the radial-gradient()
css function creates an image consisting of a progressive transition between two or more colors that radiate from an origin.
...ight: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%); } more radial-gradient examples please see using
css gradients for more examples.
... specifications specification status comment
css images module level 3the definition of 'radial-gradients()' in that specification.
repeat() - CSS: Cascading Style Sheets
the repeat()
css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
... this function can be used in the
css grid properties grid-template-columns and grid-template-rows.
... </div> </div>
css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status comment
css grid layoutthe definition of 'repeat(...
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-gradient()
css function creates an image consisting of repeating gradients that radiate from an origin.
... note: please see using
css gradients for more examples.
... specifications specification status comment
css images module level 3the definition of 'repeating-radial-gradient()' in that specification.
rotate - CSS: Cascading Style Sheets
the rotate
css property allows you to specify rotation transforms individually and independently of the transform property.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div>
css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification statu...
...s comment
css transforms level 2the definition of 'individual transforms' in that specification.
ruby-align - CSS: Cascading Style Sheets
the ruby-align
css property defines the distribution of the different ruby elements over the base.
... initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
css ruby { ruby-align: start; } result ruby aligned at the center of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
css ruby { ruby-align: center; } result extra space distributed between ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> ...
...
css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
css ruby { ruby-align: space-around; } result specifications specification status comment
css ruby layout module level 1the definition of 'ruby-align' in that specification.
scale - CSS: Cascading Style Sheets
the scale
css property allows you to specify scale transforms individually and independently of the transform property.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div>
css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment ...
...
css transforms level 2the definition of 'individual transforms' in that specification.
scroll-behavior - CSS: Cascading Style Sheets
the scroll-behavior
css property sets the behavior for a scrolling box when scrolling is triggered by the navigation or
cssom scrolling apis.
...sinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container>
css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; ...
... justify-content: center; height: 100%; font-size: 5em; } result specifications specification status comment
css object model (
cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-margin-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-margin-inline-end scroll-margin-inline-start syntax /* <length> values */ scroll-margin-inline: 10px; scroll-margin-inline: 1em .5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container.
... html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
css let's walk through the
css.
... result try it for yourself: specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-inline' in that specification.
scroll-margin - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10px; scroll-margin: 1em .5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge of the scroll container.
... html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
css let's walk through the
css.
... result try it for yourself: specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin' in that specification.
scroll-snap-stop - CSS: Cascading Style Sheets
the scroll-snap-stop
css property defines whether the scroll container is allowed to "pass over" possible snap positions.
...
css /* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; fle...
...rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> result specifications specification status comment
css scroll snap module level 1the definition of 'scroll-snap-stop' in that specification.
scroll-snap-type - CSS: Cascading Style Sheets
the scroll-snap-type
css property sets how strictly snap points are enforced on the scroll container in case there is one.
...rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>
css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px;...
...eight: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications specification status comment
css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
scrollbar-color - CSS: Cascading Style Sheets
the scrollbar-color
css property sets the color of the scrollbar track and thumb.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars
css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
...dandelion cucumber earthnut pea peanut soko zucchini.</div> result specifications specification status comment
css scrollbars level 1the definition of 'scrollbar-color' in that specification.
<shape> - CSS: Cascading Style Sheets
the <shape>
css data type defines the specific form (shape) of a region.
... example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment
css level 2 (revision 1)the definition of '<shape>' in that specification.
... see also related
css property: clip the -moz-image-rect() function has similar coordinate values to rect().
text-decoration-color - CSS: Cascading Style Sheets
the text-decoration-color
css property sets the color of decorations added to text by text-decoration-line.
...
css does not provide a direct mechanism for specifying a unique color for each line type.
...ntage><hue> = <number> | <angle> examples <p>this paragraph has <s>some erroneous text</s> inside it that i want to call attention to.</p> p { text-decoration-line: underline; text-decoration-color: cyan; } s { text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; } specifications specification status comment
css text decoration module level 3the definition of 'text-decoration-color' in that specification.
text-decoration-line - CSS: Cascading Style Sheets
the text-decoration-line
css property sets the kind of decoration that is used on text in an element, such as an underline or overline.
...this value is deprecated in favor of
css animations.
...g-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; } specifications specification status comment
css text decoration module level 3the definition of 'text-decoration-line' in that specification.
text-decoration-thickness - CSS: Cascading Style Sheets
the text-decoration-thickness
css property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
...ritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p>
css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; } results specifications specification ...
...status comment
css text decoration module level 4the definition of 'text-decoration-width' in that specification.
text-emphasis - CSS: Cascading Style Sheets
the text-emphasis
css property applies emphasis marks to text (except spaces and control characters).
... constituent properties this property is a shorthand for the following
css properties: text-emphasis-color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25b2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* should not use.
...
css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2> result specifications specification status comment
css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust
css property controls the text inflation algorithm used on some smartphones and tablets.
...this value is used to cancel a none value previously set with
css.
...iscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment
css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.
text-underline-position - CSS: Cascading Style Sheets
the text-underline-position
css property specifies the position of the underline which is set using the text-decoration property's underline value.
...aliquam accumsan tellus ac erat posuere.</p> our
css looks like this: p { font-size: 1.5rem; text-transform: capitalize; text-decoration: underline; text-decoration-thickness: 2px; } .horizontal { text-underline-position: under; } .vertical { writing-mode: vertical-rl; text-underline-position: left; } in this example we set both the paragraphs to have a thick underline.
... :root { text-underline-position: under; } specifications specification status comment
css text decoration module level 3the definition of 'text-underline-position' in that specification.
<time-percentage> - CSS: Cascading Style Sheets
the <time-percentage>
css data type represents a value that can be either a <time> or a <percentage>.
... specifications specification status comment
css values and units module level 4the definition of '<time-percentage>' in that specification.
... editor's draft
css values and units module level 3the definition of '<time-percentage>' in that specification.
top - CSS: Cascading Style Sheets
the top
css property participates in specifying the vertical position of a positioned element.
..., percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment
css positioned layout module level 3the definition of 'top' in that specification.
...
css level 2 (revision 1)the definition of 'top' in that specification.
transform-box - CSS: Cascading Style Sheets
the transform-box
css property defines the layout box to which the transform and transform-origin properties relate.
...m-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the
css we have an animation that uses a transform to rotate the rectangle infinitely.
... specifications specification status comment
css transforms level 1the definition of 'transform-box' in that specification.
perspective() - CSS: Cascading Style Sheets
the perspective()
css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional.
...p">b</div> <div class="face left">c</div> </div> <p>with perspective (9cm):</p> <div class="perspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div>
css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspectiv...
...perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment
css transforms level 2the definition of 'perspective()' in that specification.
rotate() - CSS: Cascading Style Sheets
the rotate()
css function defines a transformation that rotates an element around a fixed point on the 2d plane, without deforming it.
...ogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div>
css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment
css transforms level 1the ...
rotateX() - CSS: Cascading Style Sheets
the rotatex()
css function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.
... the axis of rotation passes through an origin, defined by the transform-origin
css property.
... 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
the rotatey()
css function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.
... the axis of rotation passes through an origin, defined by the transform-origin
css property.
... cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
the rotatez()
css function defines a transformation that rotates an element around the z-axis without deforming it.
... the axis of rotation passes through an origin, defined by the transform-origin
css property.
... cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'rotatez()' in that specification.
scale() - CSS: Cascading Style Sheets
the scale()
css function defines a transformation that resizes an element on the 2d plane.
... find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { tran...
...sform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) */ transform-origin: left; background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'scale()' in that specification.
scale3d() - CSS: Cascading Style Sheets
the scale3d()
css function defines a transformation that resizes an element in 3d space.
... sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspe...
...ctive(500px) scale3d(2, 0.7, 0.2) translatez(100px); transform-origin: left; background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'scale3d()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
the scalez()
css function defines a transformation that resizes an element along the z-axis.
... 10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result s...
...pecifications specification status comment
css transforms level 2the definition of 'scalez()' in that specification.
skew() - CSS: Cascading Style Sheets
the skew()
css function defines a transformation that skews an element on the 2d plane.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } re...
...sult specifications specification status comment
css transforms level 1the definition of 'skew()' in that specification.
translate() - CSS: Cascading Style Sheets
the translate()
css function repositions an element in the horizontal and/or vertical directions.
... 10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; background-color: skyblue; } .moved...
... { transform: translate(10px, 10px); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'translate()' in that specification.
translate3d() - CSS: Cascading Style Sheets
the translate3d()
css function repositions an element in 3d space.
... 100tx010ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; } result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; back...
...ground-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } result specifications specification status comment
css transforms level 2the definition of 'translate3d()' in that specification.
transform-style - CSS: Cascading Style Sheets
the transform-style
css property sets whether children of an element are positioned in the 3d space or are flattened in the plane of the element.
... html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div>
css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: ...
...nslatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment
css transforms level 2the definition of 'transform-style' in that specification.
transition-delay - CSS: Cascading Style Sheets
the transition-delay
css property specifies the duration to wait before starting a property's transition effect when its value changes.
...in both cases, the
css declaration remains valid.
...ition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status comment
css transitionsthe definition of 'transition-delay' in that specification.
transition-duration - CSS: Cascading Style Sheets
the transition-duration
css property sets the length of time a transition animation should take to complete.
...in both case the
css declaration stays valid.
...ition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status comment
css transitionsthe definition of 'transition-duration' in that specification.
transition-property - CSS: Cascading Style Sheets
the transition-property
css property sets the
css properties to which a transition effect should be applied.
... formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of
css transitions included in the main
css transitions article.
... specifications specification status comment
css transitionsthe definition of 'transition-property' in that specification.
translate - CSS: Cascading Style Sheets
the translate
css property allows you to specify translation transforms individually and independently of the transform property.
...]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div>
css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification ...
...status comment
css transforms level 2the definition of 'individual transforms' in that specification.
unicode-bidi - CSS: Cascading Style Sheets
the unicode-bidi
css property, together with the direction property, determines how bidirectional text in a document is handled.
... formal definition initial valuenormalapplies toall elements, though some values have no effect on non-inline elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples
css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment
css writing modes module level 3the definition of 'unicode-bidi' in that specification.
...
css level 2 (revision 1)the definition of 'unicode-bidi' in that specification.
user-select - CSS: Cascading Style Sheets
the user-select
css property controls whether the user can select text.
... note:
css ui 4 renames user-select: element to contain.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p>
css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment
css basic user interface module level 4the definition of 'user-select' in that specification.
var() - CSS: Cascading Style Sheets
the var()
css function can be used to insert the value of a custom property (sometimes called a "
css variable") instead of any part of a value of another property.
...custom properties are solely for use by authors and users;
css will never give them a meaning beyond what is presented here.
...); } /* fallback */ /* in the component’s style: */ .component .header { color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */ } .component .text { color: var(--text-color, black); } /* in the larger application’s style: */ .component { --text-color: #080; } specifications specification status comment
css custom properties for cascading variables module level 1the definition of 'var()' in that specification.
vertical-align - CSS: Cascading Style Sheets
the vertical-align
css property sets vertical alignment of an inline, inline-block or table-cell box.
...width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status comment
css level 2 (revision 1)the definition of 'vertical-align' in that specification.
...
css level 1the definition of 'vertical-align' in that specification.
will-change - CSS: Cascading Style Sheets
the will-change
css property hints to browsers how an element is expected to change.
...chrome currently takes two actions, given particular
css property idents: establish a new compositing layer or a new stacking context.
...deventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment
css will change module level 1the definition of 'will-change' in that specification.
z-index - CSS: Cascading Style Sheets
the z-index
css property sets the z-order of a positioned element and its descendants or flex items.
... formal definition initial valueautoapplies topositioned elementsinheritednocomputed valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div>
css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgr...
...een; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status comment
css level 2 (revision 1)the definition of 'z-index' in that specification.
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
the
css pixel—denoted in
css with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
... learn more technical reference
css values and units module, section 5.2: absolute lengths learn about it
css length explained on the mdn hacks blog ...
Property (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a
css property is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.
... here's an example of a
css rule: /* "div" is a selector indicating that all the div elements */ /* in the document will be styled by that rule */ div { /* the property "color" with the value "black" indicates */ /* that the text will have the color black */ color: black; /* the property "background-color" with the value "white" indicates */ /* that the background color of the elements will be white */ background-color: white; } learn more general knowledge learn
css technical reference the
css reference on mdn the
css working group current work ...
Animation inspector example: CSS transitions - Firefox Developer Tools
firefox-logo-animation example animation using
css transitions.
... html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div>
css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#select...
CSSPseudoElement.type - Web APIs
the type read-only property of the
csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a
css selector.
... syntax var typeofpseudoelement =
csspseudoelement.type; value a
cssomstring containing one of the following values: "::before" "::after" "::marker" examples the example below demonstrates the relationship between
csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const
csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement =
csspseudoelement.type; console.log(myselector === typeofpseudoelement); // outputs true specifications specification status comment
css pseudo-elements level 4the definition of 'type' in that specification.
CSSStyleRule.style - Web APIs
the
cssrule.style property is the
cssstyledeclaration interface for the declaration block of the
cssrule.
... syntax styleobj =
cssrule.style example function stilo() { alert(document.stylesheets[0].
cssrules[0].style.
csstext); } // displays "background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
CSS Font Loading API - Web APIs
the
css font loading api provides events and interfaces for dynamically loading font resources.
... specifications specification status comment
css font loading module level 3 working draft initial definition.
-moz-float-edge - CSS: Cascading Style Sheets
the non-standard -moz-float-edge
css property specifies whether the height and width properties of the element include the margin, border, or padding thickness.
... formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not part of any standard.
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended
css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.
... formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'>
css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1.
-moz-orient - CSS: Cascading Style Sheets
the -moz-orient
css property specifies the orientation of the element to which it's applied.
...t on <input type="range"> or other elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> the following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress>
css .vert { -moz-orient: vertical; width: 16px; height: 150px; } result specifications not part of any standard.
-moz-user-input - CSS: Cascading Style Sheets
note: -moz-user-input was one of the proposals leading to the proposed
css 3 user-input property, which has not yet reached candidate recommendation (call for implementations).
... a similar property, user-focus, was proposed in early drafts of a predecessor of the
css3 ui specification, but was rejected by the working group.
-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.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it relates to the standards-track border-block-start property.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard
css extension that can be used to force printing of background colors and images in browsers based on the webkit engine.
... examples forcing white-on-black printing article { -webkit-print-color-adjust: exact; background: #222; color: #eee; } specifications not part of any standard, though there is a proposal in the
csswg wiki to standardize it.
-webkit-text-security - CSS: Cascading Style Sheets
-webkit-text-security is a non-standard
css property that obfuscates characters in a <form> field (such as <input> or <textarea>) by replacing them with a shape.
... html <label for="name">name:</label> <input type="text" name="name" id="name" />
css input { -webkit-text-security: square; } result specifications not part of any standard.
:-moz-broken - CSS: Cascading Style Sheets
the :-moz-broken
css pseudo-class is a mozilla extension that matches elements representing broken image links.
...:-(">
css :-moz-broken { background: bisque; padding: 8px; } result specifications not part of any standard.
:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over
css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it.
... syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table>
css td:-moz-drag-over { color: red; } result specifications not part of any standard.
:-moz-first-node - CSS: Cascading Style Sheets
the :-moz-first-node
css pseudo-class is a mozilla extension that represents any element that is the first child node of some other element.
... syntax :-moz-first-node examples
css span:-moz-first-node { background-color: lime; } html <p> <span>this matches!</span> <span>this doesn't match.</span> </p> <p> blahblah.
:-moz-focusring - CSS: Cascading Style Sheets
the :-moz-focusring
css pseudo-class is a mozilla extension that is similar to the :focus pseudo-class, but it only matches an element if it's currently focused and a focus ring or other indicator should be drawn around it.
... syntax :-moz-focusring examples html <input />
css input { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; } result specifications not part of any standard.
:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node
css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element.
... syntax :-moz-last-node examples
css span:-moz-last-node { background-color: lime; } html <p> <span>this does not match.</span> <span>this matches!</span> </p> <p> <span>this doesn't match because it's followed by text.</span> blahblah.
::-moz-list-bullet - CSS: Cascading Style Sheets
the ::-moz-list-bullet
css pseudo-element is a mozilla extension that represents the marker (typically a bullet) of a list item (<li>) in an unordered list (<ul>).
... syntax li::-moz-list-bullet examples html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
css ::-moz-list-bullet { color: red; font-size: 1.5em; } result specifications not part of any standard.
::-moz-list-number - CSS: Cascading Style Sheets
the ::-moz-list-number
css pseudo-element is a mozilla extension that represents the marker (typically a number) of a list item (<li>) in an ordered list (<ol>).
... syntax li::-moz-list-number examples html <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
css li::-moz-list-number { font-style: italic; font-weight: bold; } result screenshotlive sample specifications not part of any standard.
:-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.
... html <p>if you're using a left-to-right interface, this should be red.</p>
css p:-moz-locale-dir(ltr) { color: red; } result specifications not part of any standard.
:-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.
... html <p>if you're using a right-to-left interface, this should be red.</p>
css p:-moz-locale-dir(rtl) { color: red; } result specifications not part of any standard.
:-moz-only-whitespace - CSS: Cascading Style Sheets
the :-moz-only-whitespace
css pseudo-class matches elements that only contains text nodes that only contain whitespace.
... examples html <div> </div>
css :root { overflow: hidden; max-width: 100vw; max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <input>.
:-moz-window-inactive - CSS: Cascading Style Sheets
the :-moz-window-inactive
css pseudo-class is a mozilla extension that matches any element while it's in an inactive window.
... html <div id="mybox"> <p>this is a box!</p> </div>
css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below.
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch
css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color".
... examples html <input type="color" value="#de2020" />
css input[type=color]::-moz-color-swatch { border-radius: 10px; border-style: none; } result specifications not part of any standard.
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner
css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element.
... examples html <input type="submit" value="input"/> <button type="submit">button</button>
css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard.
::-moz-progress-bar - CSS: Cascading Style Sheets
the ::-moz-progress-bar
css pseudo-element is a mozilla extension that represents the progress bar inside a <progress> element.
... syntax ::-moz-progress-bar examples html <progress value="30" max="100">30%</progress> <progress max="100">indeterminate</progress>
css ::-moz-progress-bar { background-color: red; } /* force indeterminate bars to have zero width */ :indeterminate::-moz-progress-bar { width: 0; } result specifications not part of any standard.
::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress
css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range".
... syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/>
css input[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-thumb - CSS: Cascading Style Sheets
the ::-moz-range-thumb
css pseudo-element is a mozilla extension that represents the thumb (i.e., virtual knob) of an <input> of type="range".
... syntax ::-moz-range-thumb examples html <input type="range" min="0" max="100" step="5" value="50"/>
css input[type=range]::-moz-range-thumb { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-track
css pseudo-element is a mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range".
... syntax ::-moz-range-track examples html <input type="range" min="0" max="100" step="5" value="50"/>
css input[type=range]::-moz-range-track { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-webkit-file-upload-button
css pseudo-element represents the button of an <input> of type="file".
... syntax selector::-webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </form>
css input, label { display: block; } input[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
::-webkit-meter-bar - CSS: Cascading Style Sheets
the ::-webkit-meter-bar
css pseudo-class is a webkit extension that represents the meter bar in a <meter> element.
... examples html <meter min="0" max="10" value="6">score out of 10</meter>
css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-bar { background: #eee; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset; border-radius: 3px; } result ...
::-webkit-meter-inner-element - CSS: Cascading Style Sheets
::-webkit-meter-inner-element is a proprietary webkit
css pseudo-element for selecting and applying styles to to the outer containing element of a <meter> element.
... html <meter min="0" max="10" value="6">score out of 10</meter>
css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-inner-element { -webkit-appearance: inherit; box-sizing: inherit; border: 1px solid #aaa; } result ...
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
the ::-webkit-meter-optimum-value
css pseudo-element styles the <meter> element when its value is inside the low-high range.
... html <meter min="0" max="10" value="6">score out of 10</meter>
css meter::-webkit-meter-bar { /* required to get rid of the default background property */ background : none; background-color : whitesmoke; box-shadow : 0 5px 5px -5px #333 inset; } meter::-webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; } result ...
::-webkit-outer-spin-button - CSS: Cascading Style Sheets
the ::-webkit-outer-spin-button
css pseudo-element is used to style the outer part of the spinner button of number picker <input> elements.
... html <input type="number">
css input::-webkit-outer-spin-button { -webkit-appearance: none; } result specifications not part of any standard.
::-webkit-progress-bar - CSS: Cascading Style Sheets
the ::-webkit-progress-bar
css pseudo-element represents the entire bar of a <progress> element.
... syntax ::-webkit-progress-bar examples
css content progress { -webkit-appearance: none; } ::-webkit-progress-bar { background-color: orange; } html content <progress value="10" max="50"> result result screenshot if you're not using a webkit or blink browser, the code above results in a progress bar that looks like this: specifications not part of any standard.
::-webkit-progress-inner-element - CSS: Cascading Style Sheets
the ::-webkit-progress-inner-element
css pseudo-element represents the outermost container of the <progress> element.
... html <progress value="10" max="50">
css progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { border: 2px solid black; } result result screenshot if you're not using a blink or webkit browsear, the above code resuls in a progress bar looking like this: specifications not part of any standard.
::-webkit-progress-value - CSS: Cascading Style Sheets
the ::-webkit-progress-value
css pseudo-element represents the filled-in portion of the bar of a <progress> element.
... html <progress value="10" max="50">
css progress { -webkit-appearance: none; } ::-webkit-progress-value { background-color: orange; } result result screenshot a progress bar using the style above would look like this: specifications not part of any standard.
::-webkit-scrollbar - CSS: Cascading Style Sheets
the ::-webkit-scrollbar
css pseudo-element affects the style of the scrollbar of an element.
...
css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar.
::backdrop - CSS: Cascading Style Sheets
the ::backdrop
css pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.
...normally that area is black, but its appearance has been altered by the
css above.
::cue-region - CSS: Cascading Style Sheets
the ::cue-region
css pseudo-element matches webvtt cues within a selected element.
... syntax ::cue-region | ::cue-region( <selector> ) permitted properties rules whose selectors include this element may only use the following
css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration ...
::part() - CSS: Cascading Style Sheets
the ::part
css pseudo-element represents any element within a shadow tree that has a matching part attribute.
... custom-element::part(foo) { /* styles to apply to the `foo` part */ } syntax ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/
css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element>
css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff ...
:any-link - CSS: Cascading Style Sheets
the :any-link
css pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
... /* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a>
css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:default - CSS: Cascading Style Sheets
the :default
css pseudo-class selects form elements that are the default in a group of related elements.
... <legend>favorite season</legend> <input type="radio" name="season" id="spring"> <label for="spring">spring</label> <input type="radio" name="season" id="summer" checked> <label for="summer">summer</label> <input type="radio" name="season" id="fall"> <label for="fall">fall</label> <input type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset>
css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } result specifications specification status comment html living standardthe definition of ':default' in that specification.
:defined - CSS: Cascading Style Sheets
the :defined
css pseudo-class represents any element that has been defined.
... let divelem = document.createelement('div'); divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the
css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined...
:disabled - CSS: Cascading Style Sheets
the :disabled
css pseudo-class represents any disabled element.
...eldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form>
css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.querysel...
:enabled - CSS: Cascading Style Sheets
the :enabled
css pseudo-class represents any enabled element.
... html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form>
css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment html living standardthe definition of ':enabled' in that specification.
:focus-within - CSS: Cascading Style Sheets
the :focus-within
css pseudo-class represents an element that has received focus or contains an element that has received focus.
... html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form>
css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:has() - CSS: Cascading Style Sheets
the :has()
css pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
...in earlier revisions of the
css selectors level 4 specification, :has had a limitation that it couldn't be used within stylesheets.
:in-range - CSS: Cascading Style Sheets
the :in-range
css pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form>
css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications ...
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate
css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div>
css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress>
css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specificatio...
:invalid - CSS: Cascading Style Sheets
the :invalid
css pseudo-class represents any <input> or other <form> element whose contents fail to validate.
... html <form> <div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form>
css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; 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: #c...
:last-child - CSS: Cascading Style Sheets
the :last-child
css pseudo-class represents the last element among a group of sibling elements.
... syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div>
css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul>
css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications sp...
:not() - CSS: Cascading Style Sheets
the :not()
css pseudo-class represents elements that do not match a list of selectors.
... examples html <p>i am a paragraph.</p> <p class="fancy">i am so very fancy!</p> <div>i am not a paragraph.</div>
css .fancy { text-shadow: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* elements that are not <p> elements */ body :not(p) { text-decoration: underline; } /* elements that are not <div> and not <span> elements */ body :not(div):not(span) { font-weight: bold; } /* elements that are not `.crazy` or `.fancy` */ /* note that this...
:nth-child() - CSS: Cascading Style Sheets
the :nth-child()
css pseudo-class matches elements based on their position in a group of siblings.
...the <code><em></code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div>
css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in...
:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type()
css pseudo-class matches elements of a given type, based on their position among a group of siblings, counting from the end.
... formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div>
css span:nth-last-of-type(2) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-last-of-type' in that specification.
:nth-of-type() - CSS: Cascading Style Sheets
the :nth-of-type()
css pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings.
... formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div>
css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications specification status comm...
:only-of-type - CSS: Cascading Style Sheets
the :only-of-type
css pseudo-class represents an element that has no siblings of the same type.
... <i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main>
css main :only-of-type { color: red; } result specifications specification status comment selectors level 4the definition of ':only-of-type' in that specification.
:out-of-range - CSS: Cascading Style Sheets
the :out-of-range
css pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes.
...the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form>
css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications ...
:root - CSS: Cascading Style Sheets
the :root
css pseudo-class matches the root element of a tree representing the document.
... /* selects the root element of the document: <html> in the case of html */ :root { background: yellow; } syntax :root examples declaring global
css variables :root can be useful for declaring global
css variables: :root { --main-color: hotpink; --pane-padding: 5px 42px; } specifications specification status comment selectors level 4the definition of ':root' in that specification.
:valid - CSS: Cascading Style Sheets
the :valid
css pseudo-class represents any <input> or other <form> element whose contents validate successfully.
... :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 { position: 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.
speak-as - CSS: Cascading Style Sheets
let's talk about speech
css |
css tricks formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css ...
...@counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status comment
css counter styles level 3the definition of 'speak-as' in that specification.
symbols - CSS: Cascading Style Sheets
the symbols
css descriptor is used to specify the symbols that the specified counter system will use to construct counter representations.
...ngth> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status comment
css counter styles level 3the definition of 'symbols' in that specification.
font-family - CSS: Cascading Style Sheets
the font-family
css descriptor allows authors to specify the font family for the font specified in an @font-face rule.
... formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment
css fonts module level 3the definition of 'font-family' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
the font-variation-settings
css descriptor allows authors to specify low-level opentype or truetype font variations in the @font-face rule.
... valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment
css fonts module level 4the definition of 'font-variation-settings' in that specification.
any-hover - CSS: Cascading Style Sheets
the any-hover
css media feature can be used to test whether any available input mechanism can hover over elements.
... examples testing whether input methods can hover html <a href="#">try hovering over me!</a>
css @media (any-hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'any-hover' in that specification.
any-pointer - CSS: Cascading Style Sheets
the any-pointer
css media feature tests whether the user has any pointing device (such as a mouse), and if so, how accurate it is.
... html <input id="test" type="checkbox" /> <label for="test">look at me!</label>
css input[type="checkbox"]:checked { background: gray; } @media (any-pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; ...
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.
... examples html <p>this is a test.</p>
css @media (color-gamut: srgb) { p { background: #f4ae8a; } } result specifications specification status comment media queries level 4the definition of 'color-gamut' in that specification.
device-height - CSS: Cascading Style Sheets
the device-height
css media feature can be used to test the height of an output device's rendering surface.
... <link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.
css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
the device-width
css media feature can be used to test the width of an output device's rendering surface.
... <link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.
css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification.
grid - CSS: Cascading Style Sheets
the grid
css media feature can be used to test whether the output device uses a grid-based screen.
...neato!</p>
css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } } result specifications specification status comment media queries level 4the ...
height - CSS: Cascading Style Sheets
the height
css media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media).
... examples html <div>watch this element as you resize your viewport's height.</div>
css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification.
hover - CSS: Cascading Style Sheets
the hover
css media feature can be used to test whether the user's primary input mechanism can hover over elements.
... examples html <a href="#">try hovering over me!</a>
css @media (hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'hover' in that specification.
inverted-colors - CSS: Cascading Style Sheets
the inverted-colors
css media feature can be used to test whether the user agent or underlying os is inverting colors.
...if you're not, it should be red on light gray.</p> <p>if the text is gray, your browser doesn't support the `inverted-colors` media feature.</p>
css p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } } result specifications specification status comment media queries level 5the definition of 'inverted-colors' in that specification.
monochrome - CSS: Cascading Style Sheets
the monochrome
css media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.
... examples html <p class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p>
css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } } result specifications specification status comment media queries level 4the definition of 'monochrome' in that specific...
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).
... examples html <div>box 1</div> <div>box 2</div> <div>box 3</div>
css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification.
overflow-block - CSS: Cascading Style Sheets
the overflow-block
css media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.
...sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
css @media (overflow-block: scroll) { p { color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
the overflow-inline
css media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.
...sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
css p { white-space: nowrap; } @media (overflow-inline: scroll) { p { color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-inline' in that specification.
pointer - CSS: Cascading Style Sheets
the pointer
css media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.
... html <input id="test" type="checkbox" /> <label for="test">look at me!</label>
css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px;...
prefers-color-scheme - CSS: Cascading Style Sheets
(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.
... html <div class="day">day (initial)</div> <div class="day light-scheme">day (changes in light scheme)</div> <div class="day dark-scheme">day (changes in dark scheme)</div> <br> <div class="night">night (initial)</div> <div class="night light-scheme">night (changes in light scheme)</div> <div class="night dark-scheme">night (changes in dark scheme)</div>
css .day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black;...
prefers-contrast - CSS: Cascading Style Sheets
the prefers-contrast
css media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.
... html <div class="contrast">low contrast box</div>
css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status comment media queries level 5the definition of 'prefers-contrast' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
the prefers-reduced-data
css media feature is used to detect if the user has requested the web content that consumes less internet traffic.
... in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.
css"> </head>
css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, ...
prefers-reduced-motion - CSS: Cascading Style Sheets
the prefers-reduced-motion
css media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
... html <div class="animation">animated box</div>
css .animation { animation: pulse 1s linear infinite both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects.
prefers-reduced-transparency - CSS: Cascading Style Sheets
the prefers-reduced-transparency
css media feature is used to detect if the user has requested that the system minimize the amount of transparency used across elements.
... html <div class="transparency">transparent box</div>
css .transparency { opacity: 0.5; } @media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-transparency' in that specification.
resolution - CSS: Cascading Style Sheets
the resolution
css media feature can be used to test the pixel density of the output device.
... examples html <p>this is a test of your device's pixel density.</p>
css /* exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } } result specifications specification status comment media queriesthe definition of 'resolution' in that specification.
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.
...if your screen uses progressive scanning, you should see a serif font.</p>
css p { font-family: cursive; } @media (scan: interlace) { p { font-family: sans-serif; } } @media (scan: progressive) { p { font-family: serif; } } result specifications specification status comment media queries level 4the definition of 'scan' in that specification.
scripting - CSS: Cascading Style Sheets
the scripting
css media feature can be used to test whether scripting (such as javascript) is available.
...:-)</p>
css p { color: lightgray; } @media (scripting: none) { .script-none { color: red; } } @media (scripting: initial-only) { .script-initial-only { color: red; } } @media (scripting: enabled) { .script-enabled { color: red; } } result specifications specification status comment media queries level 5the definition of 'scripting' in that speci...
width - CSS: Cascading Style Sheets
the width
css media feature can be used to test the width of the viewport (or the page box, for paged media).
... examples html <div>watch this element as you resize your viewport's width.</div>
css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'width' in that specification.
bleed - CSS: Cascading Style Sheets
the bleed
css at-rule descriptor, used with the @page at-rule, specifies the extent of the page bleed area outside the page box.
... formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment
css paged media module level 3the definition of 'bleed' in that specification.
size - CSS: Cascading Style Sheets
the size
css at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page.
...valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment
css paged media module level 3the definition of 'size' in that specification.
max-zoom - CSS: Cascading Style Sheets
the max-zoom
css descriptor sets the maximum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment
css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-zoom - CSS: Cascading Style Sheets
the min-zoom
css descriptor sets the minimum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment
css device adaptationthe definition of '"min-zoom" descriptor' in that specification.
orientation - CSS: Cascading Style Sheets
the orientation
css descriptor controls the orientation of a document defined by @viewport.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment
css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
the user-zoom
css descriptor controls whether or not the user can change the zoom factor of a document defined by @viewport.
...wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment
css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
zoom - CSS: Cascading Style Sheets
the zoom
css descriptor sets the initial zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment
css device adaptationthe definition of '"zoom" descriptor' in that specification.
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples
css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification.
... recommendation
css level 2 (revision 1)the definition of 'adjacent sibling selectors' in that specification.
Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate
css3 border-radius effects.
...</div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div>
css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span...
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div>
css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, ri...
...ght; } result (if image does not appear in codepen, click the 'tidy' button in the
css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'.
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.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
note: the alignment properties in flexbox have been placed into their own specification —
css box alignment level 3.
... the box alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in
css grid layout.
Ordering Flex Items - CSS: Cascading Style Sheets
this allows authors to manipulate the visual presentation while leaving the source order intact for non-
css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.
... flexbox and the keyboard navigation disconnect html source order vs
css display order the responsive order conflict for keyboard focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
you can read more about the difference between flexbox and
css grid layout in relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of
css layout.
... card layout pushing footer down whether you use flexbox or
css grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component.
Introduction to formatting contexts - CSS: Cascading Style Sheets
elements participating in a bfc use the rules outlined by the
css box model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.
...any block-level element can be made to create a bfc by the application of certain
css properties.
Stacking context example 1 - CSS: Cascading Style Sheets
«
css « understanding
css z-index stacking context example 1 let's start with a basic example.
...#1</span> <br />position: relative; <div id="div2"> <br /><span class="bold">div #2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html>
css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; ...
Stacking context example 2 - CSS: Cascading Style Sheets
«
css « understanding
css z-index stacking context example 2 this is a very simple example, but it is the key for understanding the concept of stacking context.
... example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/
css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px...
Stacking context example 3 - CSS: Cascading Style Sheets
«
css « understanding
css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors.
... example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/
css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2...
Column combinator - CSS: Cascading Style Sheets
the column combinator (||) is placed between two
css selectors.
... syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table>
css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications specification status comment selectors level 4the definition of 'column combinator' in that specification.
Card - CSS: Cascading Style Sheets
recipe download this example choices made the card is laid out using
css grid layout despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks.
...alternatively you could use
css multi-col — this would cause the cards to lay out down the columns, which may or may not be a problem.
Grid wrapper - CSS: Cascading Style Sheets
recipe download this example choices made this recipe uses the
css grid minmax() function to define the grid track sizes in the grid-template-columns property.
... accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using
css grid that your underlying markup follows a logical order (see
css grid layout and accessibility for more details).
Recipe: Media objects - CSS: Cascading Style Sheets
by using grid-template-areas to achieve the layout, i can see the pattern in the
css.
... relevant resources on mdn
css grid layout progressive enhancement and grid layout using grid template areas fit-content grid-template-areas ...
Layout mode - CSS: Cascading Style Sheets
a
css layout mode, sometimes simply called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes.
... note: not all
css properties apply to all layout modes.
Pseudo-elements - CSS: Cascading Style Sheets
a
css pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
... 9.0 :pseudo-element ::pseudo-element firefox (gecko) 1.0 (1.0) :pseudo-element 1.0 (1.5) :pseudo-element ::pseudo-element opera 4.0 :pseudo-element 7.0 :pseudo-element ::pseudo-element safari (webkit) 1.0 (85) :pseudo-element ::pseudo-element specifications specification status comment
css level 1 recommendation defined pseudo-classes and pseudo-elements.
Actual value - CSS: Cascading Style Sheets
the actual value of a
css property is the used value of that property after any necessary approximations have been applied.
... specifications specification status comment
css level 2 (revision 1)the definition of 'actual value' in that specification.
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.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples
css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linea...
background-origin - CSS: Cascading Style Sheets
the background-origin
css property sets the background's origin: from the border start, inside the border, or inside the padding.
...d black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } specifications specification status comment
css backgrounds and borders module level 3the definition of 'background-origin' in that specification.
background-position-x - CSS: Cascading Style Sheets
the background-position-x
css property sets the initial horizontal position for each background image.
... html <div></div>
css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment
css ba...
background-position-y - CSS: Cascading Style Sheets
the background-position-y
css property sets the initial vertical position for each background image.
... html <div></div>
css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment
css ba...
<blend-mode> - CSS: Cascading Style Sheets
the <blend-mode>
css data type describes how colors should appear when elements overlap.
...tion>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select>
css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divel...
block-size - CSS: Cascading Style Sheets
the block-size
css property defines the horizontal or vertical size of an element's block, depending on its writing mode.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p>
css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment
css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-color - CSS: Cascading Style Sheets
the border-block-color
css property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
the border-block-end-color
css property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-end-style - CSS: Cascading Style Sheets
the border-block-end-style
css property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
the border-block-end-width
css property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
the border-block-start-color
css property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
the border-block-start-style
css property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
the border-block-start-width
css property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-style - CSS: Cascading Style Sheets
the border-block-style
css property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
the border-block-width
css property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-image-outset - CSS: Cascading Style Sheets
the border-image-outset
css property sets the distance by which an element's border image is set out from its border box.
...it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div>
css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-source - CSS: Cascading Style Sheets
the border-image-source
css property sets the source image used to create an element's border image.
... specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image-source' in that specification.
border-image-width - CSS: Cascading Style Sheets
the border-image-width
css property sets the width of an element's border image.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p>
css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status comment
css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-inline-color - CSS: Cascading Style Sheets
the border-inline-color
css property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-color' in that specification.
border-inline-end-color - CSS: Cascading Style Sheets
the border-inline-end-color
css property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-style - CSS: Cascading Style Sheets
the border-inline-end-style
css property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
the border-inline-end-width
css property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-start-color - CSS: Cascading Style Sheets
the border-inline-start-color
css property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-start-color' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style
css property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
the border-inline-start-width
css property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-style - CSS: Cascading Style Sheets
the border-inline-style
css property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div>
css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-style' in that specification.
border-inline-width - CSS: Cascading Style Sheets
the border-inline-width
css property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment
css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-spacing - CSS: Cascading Style Sheets
the border-spacing
css property sets the distance between the borders of adjacent <table> cells.
... html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table>
css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment
css level 2 (revision 1)the definition of 'border-spacing' in that specification.
box-flex-group - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the box-flex-group
css property assigns the flexbox's child elements to a flex group.
box-lines - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... 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).
box-ordinal-group - CSS: Cascading Style Sheets
this is a property of the original
css flexible box layout module draft, and has been replaced by a newer standard.
... the box-ordinal-group
css property assigns the flexbox's child elements to an ordinal group.
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.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a custom caret color html <input value="this field uses a default caret." size="64"/> <input class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p>
css input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; } result specifications specification status comment
css basic user interface module level 3the definition of 'caret-color' in that specification.
clamp() - CSS: Cascading Style Sheets
the clamp()
css function clamps a value between an upper and lower bound.
...</p>
css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(70% + 100px)); } h1 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-size: max(1.2rem, 1.2vw); } specifications specification status comment
css values and units module level 4the definition of 'clamp()' in that specification.
column-rule-color - CSS: Cascading Style Sheets
the column-rule-color
css property sets the color of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p>
css p { column-count: 3; column-rule-style: solid; column-rule-color: blue; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-rule-color' in that specification.
column-rule-style - CSS: Cascading Style Sheets
the column-rule-style
css property sets the style of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p>
css p { column-count: 3; column-rule-style: dashed; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-rule-style' in that specification.
column-rule-width - CSS: Cascading Style Sheets
the column-rule-width
css property sets the width of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p>
css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-rule-width' in that specification.
column-rule - CSS: Cascading Style Sheets
the column-rule shorthand
css property sets the width, style, and color of the line drawn between columns in a multi-column layout.
...</p>
css .content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2px #33f; } result specifications specification status comment
css multi-column layout modulethe definition of 'column-rule' in that specification.
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.
...src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment
css containment module level 1the definition of 'contain' in that specification.
<display-internal> - CSS: Cascading Style Sheets
examples
css tables example the following example demonstrates laying out a simple form using
css table layout.
... html <main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main>
css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status
css display module level 3the definition of 'display-internal' in that specification.
empty-cells - CSS: Cascading Style Sheets
the empty-cells
css property sets whether borders and backgrounds appear around <table> cells that have no visible content.
...mputed valueas specifiedanimation typediscrete formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table>
css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; } result specifications specification status comment
css level 2 (revision 1)the definition of 'empty-cells' in that specification.
<filter-function> - CSS: Cascading Style Sheets
the <filter-function>
css data type represents a graphical effect that can change the appearance of an input image.
...n> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul>
css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px...
flex-grow - CSS: Cascading Style Sheets
the flex-grow
css property sets the flex grow factor of a flex item main size.
... .</h5> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> <div class="box" style="background-color:brown;">f</div> </div>
css #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); } result specifications specification status comment
css flexible box layout modulethe definition of 'flex-grow' in that specific...
flex-shrink - CSS: Cascading Style Sheets
the flex-shrink
css property sets the flex shrink factor of a flex item.
...ink:2 set</p> <p>the width of d and e is less than the others.</p> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> </div>
css #content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } result specifications specification status comment
css flexible box layout modulethe definition of 'flex-shrink' in that specification.
font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings
css property controls advanced typographic features in opentype fonts.
..."; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment
css fonts module level 3the definition of 'font-feature-settings' in that specification.
font-language-override - CSS: Cascading Style Sheets
the font-language-override
css property controls the use of language-specific glyphs in a typeface.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p>
css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status comment
css fonts module level 4the definition of 'font-language-override' in that specification.
font-optical-sizing - CSS: Cascading Style Sheets
the font-optical-sizing
css property sets whether text rendering is optimized for viewing at different sizes.
... specifications specification status comment
css fonts module level 4the definition of 'font-optical-sizing' in that specification.
font-smooth - CSS: Cascading Style Sheets
the font-smooth
css property controls the application of anti-aliasing when fonts are rendered.
... for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p>
css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.
font-synthesis - CSS: Cascading Style Sheets
the font-synthesis
css property controls which missing typefaces, bold or italic, may be synthesized by the browser.
...站直。</em>
css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } result specifications specification status comment
css fonts module level 3the definition of 'font-synthesis' in that specification.
font-variant-alternates - CSS: Cascading Style Sheets
the font-variant-alternates
css property controls the usage of alternate glyphs.
...ediscrete formal syntax normal | [ stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-ident> examples html <p>firefox rocks!</p> <p class="variant">firefox rocks!</p>
css @font-feature-values "leitura display swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: leitura display swashes; font-variant-alternates: swash(fancy); } result note: you need to install the opentype font leitura display swashes for this example to work.
font-variant-east-asian - CSS: Cascading Style Sheets
the font-variant-east-asian
css property controls the use of alternate glyphs for east asian scripts, like japanese and chinese.
... html <table> <thead></thead> <tbody style="border:0;"> <tr> <th>normal/jis78:</th> <td>麹町</td> <td class="jis78">麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td class="ruby">しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table>
css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status comment
css fonts module level 3the definition of 'font-variant-east-asian' in t...
grid-auto-columns - CSS: Cascading Style Sheets
the grid-auto-columns
css property specifies the size of an implicitly-created grid column track or pattern of tracks.
...content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status comment
css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-rows - CSS: Cascading Style Sheets
the grid-auto-rows
css property specifies the size of an implicitly-created grid row track or pattern of tracks.
...fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; } result specifications specification status comment
css grid layoutthe definition of 'grid-auto-rows' in that specification.
hanging-punctuation - CSS: Cascading Style Sheets
the hanging-punctuation
css property specifies whether a punctuation mark should hang at the start or end of a line of text.
...praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
css p { hanging-punctuation: first last; margin: .5rem; } result specifications specification status comment
css text module level 3the definition of 'hanging-punctuation' in that specification.
hyphens - CSS: Cascading Style Sheets
the hyphens
css property specifies how words should be hyphenated when text wraps across multiple lines.
...w if needed</dt> <dd lang="en" class="none">an extreme­ly long english word</dd> <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> <dd lang="en" class="manual">an extreme­ly long english word</dd> <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> <dd lang="en" class="auto">an extreme­ly long english word</dd> </dl>
css dd { width: 55px; border: 1px solid black; } dd.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } dd.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } dd.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } result specifications specification status comment
css text module level 3the d...
image-rendering - CSS: Cascading Style Sheets
the image-rendering
css property sets an image scaling algorithm.
... <div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; }
css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } result specifications specification status comment
css images module level 3the definition of 'image-rendering' in that specification.
image-set() - CSS: Cascading Style Sheets
the image-set()
css function notation is a method of letting the browser pick the most appropriate
css image from a given set, primarily for high pixel density screens.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 specifications specification status comment
css images module level 4the definition of 'the image-set() notation' in that specification.
initial-letter - CSS: Cascading Style Sheets
the initial-letter
css property sets styling for dropped, raised, and sunken initial letters.
...] examples setting initial letter size html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies 3 lines</p>
css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; } result specifications specification status comment
css inline layoutthe definition of 'initial-letter' in that specification.
inline-size - CSS: Cascading Style Sheets
the inline-size
css property defines the horizontal or vertical size of an element's block, depending on its writing mode.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p>
css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment
css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
the inset-block-end
css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
the inset-block-start
css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment
css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end
css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start
css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset - CSS: Cascading Style Sheets
the inset
css property, though part of the logical specification, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, directionality, and text orientation.
...tion initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div>
css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
the isolation
css property determines whether an element must create a new stacking context.
...in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div>
css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in ...
line-break - CSS: Cascading Style Sheets
the line-break
css property sets how to break lines of chinese, japanese, or korean (cjk) text when working with punctuation and symbols.
...�に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> </div>
css .wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } .auto { line-break: auto; } .loose { line-break: loose; } .normal { line-break: normal; } .strict { line-break: strict; } .anywhere { line-break: anywhere; } result specifications specification status comment
css text module level 3the definition of 'line-br...
line-height-step - CSS: Cascading Style Sheets
the line-height-step
css property sets the step unit for line box heights.
... :root { font-size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specifications specification status comment
css rhythmic sizingthe definition of 'line-height-step' in that specification.
margin-block-end - CSS: Cascading Style Sheets
the margin-block-end
css property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
the margin-block-start
css property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
...formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
the margin-inline-end
css property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
the margin-inline-start
css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
...ormal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
mask-border-mode - CSS: Cascading Style Sheets
the mask-border-mode
css property specifies the blending mode used in a mask border.
...when browsers support it, it will specify the type of blending mode used for the mask border — luminance or alpha: mask-border-mode: luminance; mask-border-mode: alpha; specifications specification status comment
css masking module level 1the definition of 'mask-border-mode' in that specification.
mask-border-outset - CSS: Cascading Style Sheets
the mask-border-outset
css property specifies the distance by which an element's mask border is set out from its border box.
... specifications specification status comment
css masking module level 1the definition of 'mask-border-outset' in that specification.
mask-border-repeat - CSS: Cascading Style Sheets
the mask-border-repeat
css property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
... specifications specification status comment
css masking module level 1the definition of 'mask-border-repeat' in that specification.
mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice
css property divides the image set by mask-border-source into regions.
... specifications specification status comment
css masking module level 1the definition of 'mask-border-slice' in that specification.
mask-border-source - CSS: Cascading Style Sheets
the mask-border-source
css property sets the source image used to create an element's mask border.
... specifications specification status comment
css masking module level 1the definition of 'mask-border-source' in that specification.
mask-border-width - CSS: Cascading Style Sheets
the mask-border-width
css property sets the width of an element's mask border.
... specifications specification status comment
css masking module level 1the definition of 'mask-border-width' in that specification.
max-inline-size - CSS: Cascading Style Sheets
the max-inline-size
css property defines the horizontal or vertical maximum size of an element's block depending on its writing mode.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p>
css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment
css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
the min-block-size
css property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p>
css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment
css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
the min-inline-size
css property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p>
css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment
css logical properties and values level 1the definition of 'min-inline-size' in that specification.
offset-anchor - CSS: Cascading Style Sheets
the offset-anchor
css property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path.
... html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section>
css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { ...
offset-rotate - CSS: Cascading Style Sheets
the offset-rotate
css property defines the orientation/direction of the element as it is positioned along the offset-path.
... formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div>
css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30de...
outline-offset - CSS: Cascading Style Sheets
the outline-offset
css property sets the amount of space between an outline and the edge or border of an element.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p>
css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment
css basic user interface module level 3the definition of 'outline-offset' in that specification.
overflow-anchor - CSS: Cascading Style Sheets
the overflow-anchor
css property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
... body { overflow-anchor: none; } specifications specification status comment
css scroll anchoring module level 1the definition of 'overflow-anchor' in that specification.
overflow-inline - CSS: Cascading Style Sheets
the overflow-inline
css property sets what shows when content overflows the inline start and end edges of a box.
...v> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul>
css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specifications specification status comment
css overflow module level 3the definition of 'overflow-inline' in that specif...
overflow-wrap - CSS: Cascading Style Sheets
the overflow-wrap
css property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
...(<code>hyphens</code>, german rules)</p>
css p { width: 13em; margin: 2px; background: gold; } .ow-anywhere { overflow-wrap: anywhere; } .ow-break-word { overflow-wrap: break-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; } result specifications specification status comment
css text module level 3the definition of 'overflow-wrap' in that specification.
overflow-x - CSS: Cascading Style Sheets
the overflow-x
css property sets what shows when content overflows a block-level element's left and right edges.
...z </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul>
css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications specification status comment
css overflow module level 3the definition of 'overflow-x' in that specification.
overflow-y - CSS: Cascading Style Sheets
the overflow-y
css property sets what shows when content overflows a block-level element's top and bottom edges.
... </div> </li> </ul>
css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div3 { overflow-y: visible; margin-bottom: 120px;} #div4 { overflow-y: auto; margin-bottom: 120px;} result specifications specification status comment
css overflow modu...
overscroll-behavior-x - CSS: Cascading Style Sheets
the overscroll-behavior-x
css property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.
...to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300px; width: 500px; overflow: auto; position: relative; top: 100px; left: 100px; overscroll-behavior-x: contain; } specifications specification status comment
css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification.
overscroll-behavior-y - CSS: Cascading Style Sheets
the overscroll-behavior-y
css property sets the browser's behavior when the vertical boundary of a scrolling area is reached.
... specifications specification status comment
css overscroll behavior module level 1the definition of 'overscroll-behavior-y' in that specification.
overscroll-behavior - CSS: Cascading Style Sheets
the overscroll-behavior
css property sets what a browser does when reaching the boundary of a scrolling area.
...this can be prevented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specifications specification status comment
css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification.
padding-block-end - CSS: Cascading Style Sheets
the padding-block-end
css property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div>
css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
the padding-block-start
css property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status comment
css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
the padding-inline-end
css property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status comment
css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
the padding-inline-start
css property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div>
css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status comment
css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
paint-order - CSS: Cascading Style Sheets
the paint-order
css property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.
...tial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg>
css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
Resolved value - CSS: Cascading Style Sheets
the resolved value of a
css property is the value returned by getcomputedstyle().
... specifications specification status comment
css object model (
cssom)the definition of 'resolved value' in that specification.
ruby-position - CSS: Cascading Style Sheets
the ruby-position
css property defines the position of a ruby element relatives to its base element.
... formal definition initial valueoverapplies toruby annotations containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax over | under | inter-character examples ruby positioned over the text html <ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby>
css ruby { ruby-position:over; } result ruby positioned under the text html <ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby>
css ruby { ruby-position:under; } result specifications specification status comment
css ruby layout module level 1the definition of 'ruby-position' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-margin-block-end scroll-margin-block-start syntax /* <length> values */ scroll-margin-block: 10px; scroll-margin-block: 1em .5em ; /* global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <length> an outset from the corresponding edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
css let's walk through the
css.
... result try it for yourself: specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-inline-end' in that specification.
scroll-margin-inline-start - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
css let's walk through the
css.
... result try it for yourself: specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-inline-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-padding-block-end scroll-padding-block-start syntax /* keyword values */ scroll-padding-block: auto; /* <length> values */ scroll-padding-block: 10px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /* global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <length-percentage> an inwards offset...
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-padding-inline-end scroll-padding-inline-start syntax /* keyword values */ scroll-padding-inline: auto; /* <length> values */ scroll-padding-inline: 10px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /* global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset; values <length-percentage> an inwar...
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following
css properties: scroll-padding-bottom scroll-padding-left scroll-padding-right scroll-padding-top syntax /* keyword values */ scroll-padding: auto; /* <length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset f...
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate
css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis.
... <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div>
css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-...
scroll-snap-destination - CSS: Cascading Style Sheets
the scroll-snap-destination
css property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with.
... <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div>
css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } ...
scroll-snap-points-x - CSS: Cascading Style Sheets
the scroll-snap-points-x
css property defines the horizontal positioning of snap points within the content of the scroll container they are applied to.
...ve to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div>
css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(od...
scroll-snap-points-y - CSS: Cascading Style Sheets
the scroll-snap-points-y
css property defines the vertical positioning of snap points within the content of the scroll container they are applied to.
...tive to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div>
css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container...
scrollbar-width - CSS: Cascading Style Sheets
1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars
css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
...dandelion cucumber earthnut pea peanut soko zucchini.</div> result specifications specification status comment
css scrollbars level 1the definition of 'scrollbar-width' in that specification.
shape-margin - CSS: Cascading Style Sheets
the shape-margin
css property sets a margin for a
css shape created using shape-outside.
...ht, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we know it.</section>
css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specifications specification status comment
css shapes module level 1the definition of 'shape-margin' in that spec...
symbols() - CSS: Cascading Style Sheets
the symbols()
css function lets you define counter styles inline, directly as the value of a property such as list-style.
... examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol>
css ol { list-style: symbols(cyclic "*" "†" "‡"); } result specifications specification status comment
css counter styles level 3the definition of 'symbols()' in that specification.
tab-size - CSS: Cascading Style Sheets
the tab-size
css property is used to customize the width of tab characters (u+0009).
... html <p>no tab</p> <p>	default tab size of 8 characters wide</p> <p class="custom">	custom tab size of 3 characters wide</p> <p> 3 spaces, equivalent to the custom tab size</p>
css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; } result specifications specification status comment
css text module level 3the definition of 'tab-size' in that specification.
table-layout - CSS: Cascading Style Sheets
the table-layout
css property sets the algorithm used to lay out <table> cells, rows, and columns.
... html <table> <tr><td>ed</td><td>wood</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table>
css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } result specifications specification status comment
css level 2 (revision 1)the definition of 'table-layout' in that specification.
text-align-last - CSS: Cascading Style Sheets
the text-align-last
css property sets how the last line of a block or a line, right before a forced line break, is aligned.
...nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>
css p { font-size: 1.4em; text-align: justify; text-align-last: center; } results specifications specification status comment
css text module level 3the definition of 'text-align-last' in that specification.
text-decoration-skip-ink - CSS: Cascading Style Sheets
the text-decoration-skip-ink
css property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
... specifiedanimation typediscrete formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
css p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink { text-decoration-skip-ink: none; } .skip-ink-all{ text-decoration-skip-ink: all; } result specifications specification status comment
css text decoration module level 4the definition of 'text-decoration-skip-ink' in ...
text-decoration-skip - CSS: Cascading Style Sheets
the text-decoration-skip
css property sets what parts of an element’s content any text decoration affecting the element must skip over.
... formal definition initial valueobjectsapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p>
css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status comment
css text decoration module level 4the definition of 'text-decoration-skip' in that specification.
text-decoration-style - CSS: Cascading Style Sheets
the text-decoration-style
css property sets the style of the lines specified by text-decoration-line.
... valueas specifiedanimation typediscrete formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; }
css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment
css text decoration module level 3the definition of 'text-decoration-style' in that specification.
text-emphasis-color - CSS: Cascading Style Sheets
the text-emphasis-color
css property sets the color of emphasis marks.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character
css em { text-emphasis-color: green; text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em> result specifications specification status comment
css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis-position - CSS: Cascading Style Sheets
the text-emphasis-position
css property sets where emphasis marks are drawn.
...in html, this can be done with the following pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /* hide ruby inside <em> elements */ } specifications specification status comment
css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis-style - CSS: Cascading Style Sheets
the text-emphasis-style
css property sets the appearance of emphasis marks.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment
css text decoration module level 3the definition of 'text-emphasis' in that specification.
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.
....</p> p { font-size: 1.5em; border: 1px solid black; padding: 10px; width: 95%; margin: 10px auto; text-align: justify; } .none { text-justify: none; } .auto { text-justify: auto; } .dist { text-justify: distribute; } .word { text-justify: inter-word; } .char { text-justify: inter-character; } specifications specification status comment
css text module level 3the definition of 'text-justify' in that specification.
text-orientation - CSS: Cascading Style Sheets
the text-orientation
css property sets the orientation of the text characters in a line.
... formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p>
css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification status comment
css writing modes module level 3the definition of 'text-orientation' in that specification.
text-underline-offset - CSS: Cascading Style Sheets
the text-underline-offset
css property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position.
...only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-underline-offset: 1em; } .twolines { text-decoration-color: purple; text-decoration-line: underline overline; } specifications specification status comment
css text decoration module level 4the definition of 'text-underline-offset' in that specification.
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).
... html <div id="map"></div>
css #map { height: 400px; width: 400px; background: blue; touch-action: none; } result specifications specification status comment compatibility standardthe definition of 'touch-action' in that specification.
matrix() - CSS: Cascading Style Sheets
the matrix()
css function defines a homogeneous 2d transformation matrix.
... on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'matrix()' in that specification.
scaleX() - CSS: Cascading Style Sheets
the scalex()
css function defines a transformation that resizes an element along the x-axis (horizontally).
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scalex(0.6); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
the scaley()
css function defines a transformation that resizes an element along the y-axis (vertically).
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'scaley()' in that specification.
skewX() - CSS: Cascading Style Sheets
the skewx()
css function defines a transformation that skews an element in the horizontal direction on the 2d plane.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
the skewy()
css function defines a transformation that skews an element in the vertical direction on the 2d plane.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div>
css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'skewy()' in that specification.
translateX() - CSS: Cascading Style Sheets
the translatex()
css function repositions an element horizontally on the 2d plane.
... 10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
the translatey()
css function repositions an element vertically on the 2d plane.
... 10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div>
css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status comment
css transforms level 1the definition of 'translatey()' in that specification.
transform-origin - CSS: Cascading Style Sheets
the transform-origin
css property sets the origin for an element's transformations.
...form-origin: 100% -30%; <div class="box10"> </div> .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewy(50deg); -webkit-transform: skewy(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } specifications specification status comment
css transforms level 1the definition of 'transform-origin' in that specification.
user-modify - CSS: Cascading Style Sheets
examples html <div class="readwrite">the user is able to change this text.</div>
css .readwrite { -moz-user-modify: read-write; -webkit-user-modify: read-write; } specifications not part of any standard.
... a similar property, user-focus, was proposed in early drafts of a predecessor of the
css3 ui specification, but was rejected by the working group.
word-break - CSS: Cascading Style Sheets
the word-break
css property sets whether line breaks appear wherever the text would otherwise overflow its content box.
...<code>word-break: break-word</code></p> <p class="breakword narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
css .narrow { padding: 10px; border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakall { word-break: break-all; } .keepall { word-break: keep-all; } .breakword { word-break: break-word; } specifications specification status comment
css text module leve...
Comparison of CSS Selectors and XPath - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes this article seeks to document the difference between
css selectors and xpath for web developers to be able to better choose the right tool for the right job.
... xpath feature
css equivalent ancestor, parent or preceding-sibling axis :has() selector attribute axis attribute selectors child axis child combinator descendant axis descendant combinator following-sibling axis general sibling combinator or adjacent sibling combinator self axis :scope or :host selector ...
CSS -moz-bool-pref() @supports function
</div>
css @supports -moz-bool-pref("test") { #pref-test { background: green; } } @supports not -moz-bool-pref("test") { #pref-test { background: red; } } result ...
Investigating CSS Performance
http://people.mozilla.org/~jmuizelaar/
css-perf.patch this patch instruments a bunch of key places and should give an estimate of the order of magnitude of the different parents.
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them: clicking the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
WebKitCSSMatrix - Web APIs
specifications specification status comment geometry interfaces module level 1the definition of 'webkit
cssmatrix' in that specification.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-results-button
css pseudo-element represents a button (the "search results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
additive-symbols - CSS: Cascading Style Sheets
> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications specification status comment
css counter styles level 3the definition of 'additive-symbols' in that specification.
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; } result specifications specification status comment
css counter styles level 3the definition of 'fallback' in that specification.
negative - CSS: Cascading Style Sheets
tage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications specification status comment
css counter styles level 3the definition of 'system' in that specification.
pad - CSS: Cascading Style Sheets
= <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification status comment
css counter styles level 3the definition of 'pad' in that specification.
prefix - CSS: Cascading Style Sheets
-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul>
css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-style: chapters; padding-left: 15ch; } result specifications specification status comment
css counter styles level 3the definition of 'prefix' in that specification.
suffix - CSS: Cascading Style Sheets
<percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul>
css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status comment
css counter styles level 3the definition of 'suffix' in that specification.
font-display - CSS: Cascading Style Sheets
yntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status comment
css fonts module level 4the definition of 'font-display' in that specification.
Box alignment in Flexbox - CSS: Cascading Style Sheets
reference
css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment cheatsheet
css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
Mastering margin collapsing - CSS: Cascading Style Sheets
<p>this paragraph has a <code>.4rem</code> margin between it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p>
css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; } result specifications specification status comment
css level 2 (revision 1)the definition of 'margin collapsing' in that specification.
Using z-index - CSS: Cascading Style Sheets
r />position: absolute; <br />z-index: 5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div>
css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px...
Stacking with floated blocks - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div>
css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; } #flo1 { margin: 0px 10px 0px 20px; ...
Stacking without the z-index property - CSS: Cascading Style Sheets
<div id="abs1" class="absolute"> <b>div #1</b><br />position: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div>
css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-...
The stacking context - CSS: Cascading Style Sheets
<code>position: relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>division element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div>
css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 4...
General sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples
css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification.
Pagination - CSS: Cascading Style Sheets
to ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a <nav> element, and then use
css to display the layout visually as a row.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div>
css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode 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 var...
<display-inside> - CSS: Cascading Style Sheets
html <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div>
css .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } result specifications specification status
css display module level 3the definition of 'display-inside' in that sp...
<display-listitem> - CSS: Cascading Style Sheets
examples html <div class="fake-list">i will display as a list item</div>
css .fake-list { display: list-item; list-style-position: inside; } result specifications specification status
css display module level 3the definition of 'display-listitem' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-padding-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment
css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.
scroll-snap-align - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | start | end | center ]{1,2} specifications specification status comment
css scroll snap module level 1the definition of 'scroll-snap-align' in that specification.
Index - Web APIs
82 animationeffect api, animation, experimental, interface, reference, web animations, web animations api the animationeffect interface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by
css animations and transitions).
... 87 animationevent() api, animationevent,
cssom, constructor, experimental, reference, web animations the animationevent() constructor returns a newly created animationevent, representing an event in relation with an animation.
... 88 animationevent.animationname api, animationevent,
cssom, experimental, property, reference, web animations the animationevent.animationname read-only property is a domstring containing the value of the animation-name
css property associated with the transition.
...And 362 more matches
Index - Archive of obsolete content
104 stylesheet/style modify styles using stylesheet files or
css rules.
... 120 ui/frame create html iframes, using bundled html,
css and javascript, that can be added to a designated area of the firefox user interface.
... 307 using the stylesheet service add-ons, extensions the stylesheet service allows extensions to manage user and ua stylesheets without having to touch usercontent.
css or userchrome.
css files.
...And 132 more matches
Index - Learn web development
found 348 pages: # page tags and summary 1 learn web development beginner,
css, html, index, intro, landing, learn, web welcome to the mdn learning area.
... 2 accessibility aria, accessibility, articles, beginner,
css, codingscripting, html, javascript, landing, learn, module learning some html,
css, and javascript is useful if you want to become a web developer.
...to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html,
css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start.
...And 122 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
16 alignment container alignment container,
css, glossary, alignment the alignment container is the rectangle that the alignment subject is aligned within.
... 17 alignment subject alignment subject,
css, glossary, alignment in
css box alignment the alignment subject is the thing (or things) being aligned by the property.
... 28 baseline
css, glossary, svg, alignment, typography the baseline is a term used in european and west asian typography meaning an imaginary line upon which the characters of a font rest.
...And 50 more matches
Theme changes in Firefox 2 - Archive of obsolete content
the table lists both the changed xul file and the theme's corresponding
css file that you might need to update.
... filename
css file details browser/base/searchdialog.xul browser/base/content/searchdialog.
css removed from firefox 2.
... feeds/addfeedreader.xul feeds/addfeedreader.
css new file that presents ui for adding a new feed reader.
...And 37 more matches
Legacy layout methods - Learn web development
previous overview:
css layout next grid systems are a very common feature used in
css layouts, and before
css grid layout they tended to be implemented using floats or other layout features.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to
css grid layout being available in browsers.
... layout and grid systems before
css grid layout it may seem surprising to anyone coming from a design background that
css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs.
...And 29 more matches
nsIDOMWindowUtils
ze_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe); void set
cssviewport(in float awidthpx, in float aheightpx); void setdisplayport(in float axpx, in float aypx, in float awidthpx, in float aheightpx); void setresolution(in float axresolution, in float ayresolution); void startpccountprofiling(); void stoppccountprofiling(); void suppresseventhandling(in boolean asuppress); void suspendtimeouts()...
... screenpixelsper
csspixel float returns the number of screen pixels per
css pixel.
...see
css2 specification for details.
...And 29 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.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in
css.
... conflicting rules
css stands for cascading style sheets, and that first word cascading is incredibly important to understand — the way that the cascade behaves is key to understanding
css.
...And 27 more matches
Implementing feature detection - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high-level principles of cross-browser testing.
... objective: to understand what the concept of feature detection is, and be able to implement suitable solutions in
css and javascript.
... writing your own feature detection tests in this section, we'll look at implementing your own feature detection tests, in both
css and javascript.
...And 25 more matches
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using
css and javascript in xhtml documents" article.
... please note that the examples 4, 5 and 6 require a file named style.
css to exist in the same directory as the example.
... you can get the contents of style.
css at the bottom of this page.
...And 23 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
they include: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (
css):
css level 1,
css level 2.1 and parts of
css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource desc...
...
css differences mozilla-based products have the strongest support for cascading style sheets (
css), including most of
css1,
css2.1 and parts of
css3, compared to internet explorer as well as all other browsers.
...check the javascript console if you encounter
css-related issues.
...And 22 more matches
Skinning XUL Files by Hand - Archive of obsolete content
the skin will reside in a single
css file, appropriately named drxul.
css.
... as you will see,
css provides a lot of flexibility for defining styles to individual elements, to classes of elements, to pseudo-classes, and to anonymous classes.
... much of what makes xul look (and act!) the way it does comes from the
css for each xul element.
...And 22 more matches
Populating the page: how browsers work - Web Performance
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.
css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
...parsing is the step the browser takes to turn the data it receives over the network into the dom and
cssom, which is used by the renderer to paint a page to the screen.
...this is why it's important for web performance optimization to include everything the browser needs to start rendering a page, or at least a template of the page - the
css and html needed for the first render -- in the first 14 kilobytes.
...And 22 more matches
Supporting older browsers - Learn web development
previous overview:
css layout next in this module, we recommend using flexbox and grid as the main layout methods for your designs.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css and styling boxes.) objective: to understand how to provide support for your layouts on older browsers that might not support the features you want to use.
...we are trying to make this easy for you at mdn, by providing browser compatibility information on each page detailing a
css property.
...And 21 more matches
Gecko Compatibility Handbook - Archive of obsolete content
these browsers were developed before the relevant w3c recommendations for html,
css, and the dom existed.
... these earlier, non-standards based browsers differed in several ways from gecko: these browsers use proprietary (non-standard) html,
css, and javascript.
... while they support the
css 1 standard to some degree, the implementations are not complete and have non-standard features added.
...And 20 more matches
Styling web forms - Learn web development
in this article we will move on to looking at how to use
css to style your form controls.
... this has historically been difficult — form controls vary greatly in how easy they are to customize with
css — but it is getting easier as old browsers are retired and modern browsers give us more features to use.
... prerequisites: basic computer literacy, and a basic understanding of html and
css.
...And 19 more matches
Performance fundamentals - Web Performance
to display graphics, developers can use html or
css (i.e.
...somewhere "in between" html/
css and canvas is svg, which offers some benefits of both.
... html and
css greatly increase productivity, sometimes at the expense of framerate or pixel-level control over rendering.
...And 19 more matches
Critical rendering path - Web Performance
the critical rendering path is the sequence of steps the browser goes through to convert the html,
css, and javascript into pixels on the screen.
... optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom),
css object model (
cssom), render tree and layout.
...the html includes or makes requests for styles, which in turn builds the
css object model.
...And 18 more matches
The Box Model - Archive of obsolete content
once you grasp this simple idea, you'll be able to use the dom inspector and
css to mold xul elements and layouts with great precision and flexibility.
...ns: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient
css property.
...the
css property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation.
...And 16 more matches
Web fonts - Learn web development
previous overview: styling text next in the first article of the module, we explored the basic
css features available for styling fonts and text.
... prerequisites: basic computer literacy, html basics (study introduction to html),
css basics (study introduction to
css),
css text and font fundamentals.
...web fonts are a
css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.
...And 16 more matches
Client-side form validation - Learn web development
prerequisites: computer literacy, a reasonable understanding of html,
css, and javascript.
... when an element is valid, the following things are true: the element matches the :valid
css pseudo-class, which lets you apply a specific style to valid elements.
... when an element is invalid, the following things are true: the element matches the :invalid
css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements.
...And 16 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the resolution to this issue is to add the following code to your browser.
css file somewhere below where the main-window is made transparent to support aero glass.
... the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.
css.
...the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.
css.
...And 15 more matches
The box model - Learn web development
previous overview: building blocks next everything in
css has a box around it, and understanding these boxes is key to being able to create layouts with
css, or to align items with other items.
... in this lesson, we will take a proper look at the
css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the
css box model, what makes up the box model and how to switch to the alternate model.
...And 15 more matches
Fundamental text and font styling - Learn web development
overview: styling text next in this article we'll start you on your journey towards mastering text styling with
css.
... prerequisites: basic computer literacy, html basics (study introduction to html),
css basics (study introduction to
css).
... what is involved in styling text in
css?
...And 15 more matches
Introduction to automated testing - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high level principles of cross-browser testing.
...this is a great way to perform tasks like linting and minifying code, adding in
css prefixes or transpiling nascent javascript features for maximum cross-browser reach, and so on.
... next, you'll need some sample html,
css and javascript content to test your system on — make copies of our sample index.html, main.js, and style.
css files in a subfolder with the name src inside your project folder.
...And 15 more matches
Using the Web Animations API - Web APIs
this api was designed to underlie implementations of both
css animations and
css transitions, and leaves the door open to future animation effects.
...we no longer need to rely on dom-heavy techniques such as writing
css properties and scoping classes onto elements to control playback direction.
... and unlike pure, declarative
css, javascript also lets us dynamically set values from properties to durations.
...And 15 more matches
Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with
css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories.
... prerequisites: basic computer literacy, and a basic understanding of html and
css.
... to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex
css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using
css.
...And 14 more matches
Getting started with Svelte - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... svelte sticks closely to the classic web development model of html,
css, and js, just adding a few extensions to html and javascript.
...web developers with basic html,
css, and javascript knowledge can easily grasp svelte specifics in a short time and start building web applications.
...And 14 more matches
Migrating from Firebug - Firefox Developer Tools
inspector firebug has an html panel, which allows to edit html/xml/svg and the
css related to it.
... copy html and related information firebug's html panel allows to copy the inner and outer html of an element as well as the
css and xpath to it via the context menu of an element.
... edit
css both tools allow to view and edit the
css rules related to the element selected within the node view in a similar way.
...And 14 more matches
Media - Progressive web apps (PWAs)
this is the 14th and last section of part i of the
css getting started tutorial.
... many pages in this tutorial focused on the
css properties and values, as well as how you use these to specify the way that content displays.
... information: media the purpose of
css is to specify how content is presented to the user.
...And 14 more matches
Using your new knowledge - Learn web development
previous overview: first steps with the things you have learned in the last few lessons you should find that you can format simple text documents using
css, to add your own style to them.
... prerequisites: before attempting this assessment you should have worked through the rest of the
css basics module, and also have an understanding of html basics (study introduction to html).
... objective: to have a play with some
css and test your new-found knowledge.
...And 13 more matches
Mozilla Web Developer FAQ
since also other contemporary browsers have a standards mode, activating the standards mode or the almost standards mode in other browsers as well (using the above-mentioned exact doctypes) is the best way to get consistent
css layout results across different browsers.
... in the
css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers.
... these aspects of the layout can be changed by explicitly setting the display
css property of the images (and possible surrounding <a> elements) to block.
...And 13 more matches
inIDOMUtils
ass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void get
csspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray get
cssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidom
cssstylerule a...
...rule); unsigned long getrulecolumn(in nsidom
cssstylerule arule); unsigned long getselectorcount(in nsidom
cssstylerule arule); astring getselectortext(in nsidom
cssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidom
cssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidom
cssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apse...
...udoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidom
cssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the content state flags are used in a bitmask.
...And 13 more matches
Event reference
css animation events event name fired when animationstart a
css animation has started.
... animationcancel a
css animation has aborted.
... animationend a
css animation has completed.
...And 13 more matches
Style System Overview - Archive of obsolete content
style system style sheets & rules ↓ rule tree ↓ style context interface style sheets & rules nsistyleruleprocessor and nsistylesheet describe in c++ what a
css stylesheet can do nsistylerule describes in c++ what a
css style rule can do main implementations are for
css, but we have other implementations in c++ that: do what
css can't do do things faster than
css would
css style sheets at basic level, sheet is collection of rules other special things: @import, @media, @namespace, etc.
... p { color: green; font-size: 12em; } selector { property: value; property: value; }
css style rules what do style rules mean?
... ↙ ↓ ↘ title para class="emph" para ↓ ↓ quote quote ↓ span class="emph" example stylesheet doc { display: block; text-indent: 1em; } title { display: block; font-size: 3em; } para { display: block; } [class="emph"] { font-style: italic; }
css style rule representation each declaration block is represented by an ns
cssdeclaration an
cssstyleruleimpl contains each selector associated with that declaration, and the declaration, and is the most important implementation of nsistylerule.
...And 12 more matches
A XUL Bestiary - Archive of obsolete content
in general, chrome refers to a xul interface and all of its supporting files; chrome means the xul content and structure, plus the
css skin, plus whatever localization and platform-specific files are part of that xul interface.
... by contrast, the skin is just the
css and referenced graphics for a xul file, the localization strings are just a dtd, and the content is just the xul.
...the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> specifies a chrome to be loaded by the gecko rendering engine.
...And 12 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
introduction in an ideal world, we could author html, xml,
css and javascript and only worry about the w3c and ecma standards.
... gecko was designed from the ground up to be compliant with the w3c html, w3c
css, w3c xml, w3c dom, and ecmascript (javascript) standards.
... netscape navigator 4 and internet explorer 4 introduced the ability to manipulate html content in a browser (dynamic html or dhtml) rather than on the web server and began the introduction of support for
css to style content.
...And 12 more matches
Overflowing content - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to understand overflow and how to manage it.
... everything in
css is a box.
...
css provides various tools to manage overflow.
...And 12 more matches
Grids - Learn web development
previous overview:
css layout next
css grid layout is a two-dimensional layout system for the web.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using
css grid.
... creating your grid in
css having decided on the grid that your design needs, you can use
css grid layout to create that grid in
css and place items onto it.
...And 12 more matches
Handling common accessibility problems - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high level principles of cross browser testing.
... html semantic html (where the elements are used for their correct purpose) is accessible right out of the box — such content is readable by sighted viewers (provided you don't do anything silly like make the text way too small or hide it using
css), but will also be usable by assistive technologies like screen readers (apps that literally read out a web page to their user), and confer other advantages too.
...i think it is more interesting than the last one.</p> in addition, your content should make logical sense in its source order — you can always place it where you want using
css later on, but you should get the source order right to start with.
...And 12 more matches
Handling common JavaScript problems - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high-level principles of cross browser testing.
... fixing general javascript problems as we said in the previous article on html/
css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues.
... linters as with html and
css, you can ensure better quality, less error-prone javascript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting.
...And 12 more matches
Mozilla Style System Documentation
style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved back into the layout dll) represents the style data for a
css formatting object.
... the
css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements.
... (mozilla has a bunch of its pseudo-elements that are not in the
css specification.) we also create style contexts for some things that are not
css formatting objects: text nodes and placeholder frames.
...And 12 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
this is pretty horrible, but generally this kind of problem is easily fixed with some simple
css: img, video { max-width: 100%; } this tells the replaced elements to remain constrained inside their container's widths, no matter what.
... note: media queries are a
css3 feature that allow you to selectively apply
css depending on the results of media feature tests — for more on the basics, read media queries.
...this is created using the
css rules included at the top of the stylesheet, before any media queries are encountered.
...And 12 more matches
Tutorials
css tutorials introductory level
css basics
css (cascading style sheets) is the code you use to style your webpage.
...
css basics takes you through what you need to get started.
...
css first steps
css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
...And 12 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
reading in style sheets xul uses
css to specify the appearance of its elements.
...id is used to define a unique name for an element, and class is used to classify elements; both of these provide convenient ways to refer to elements in
css and javascript.
... <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed
css inline into elements via the style attribute, which allows you to set sizes using units other than pixels.
...And 11 more matches
Advanced styling effects - Learn web development
prerequisites: html basics (study introduction to html) and an idea of how
css works (study
css first steps.) objective: to get an idea about how to use some of the advanced styling effects available in modern browsers.
...first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the
css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — ...
... filters while you can't change the composure of an image using
css, there are some creative things you can do.
...And 11 more matches
Handling different text directions - Learn web development
previous overview: building blocks next many of the properties and values that we have encountered so far in our
css learning have been tied to the physical dimensions of our screen.
... in recent years however,
css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing modes.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to understand the importance of writing modes to modern
css.
...And 11 more matches
Images, media, and form elements - Learn web development
previous overview: building blocks next in this lesson we will take a look at how certain special elements are treated in
css.
... images, other media, and form elements behave a little differently in terms of your ability to style them with
css than regular boxes.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to understand the way that some elements behave unusually when styled with
css.
...And 11 more matches
Practical positioning examples - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area.
... next, add the following just below your previous
css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
...first, add the following rule at the bottom of your
css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of ...
...And 11 more matches
Responsive design - Learn web development
previous overview:
css layout next in the early days of web design, pages were built to target a particular screen size.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study
css first steps and
css building blocks.) objective: to understand the fundamental concepts and history of responsive design.
...this approach required javascript to detect the screen resolution and load the correct
css.
...And 11 more matches
Index - Firefox Developer Tools
you can use them to examine, edit, and debug html,
css, and javascript.
... 30 devtoolscolors
css this chart lists colors and
css variables as implemented in the dark theme and light theme for developer tools.
... 54 page inspector
css, dom, html, stylesheets, web development, web development:tools, l10n:priority use the page inspector to examine and modify the html and
css of a page.
...And 11 more matches
Document - Web APIs
documentorshadowroot.stylesheetsread only returns a stylesheetlist of
cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
... globaleventhandlers.onanimationcancel an eventhandler called when an animationcancel event is sent, indicating that a running
css animation has been canceled.
... globaleventhandlers.onanimationend an eventhandler called when an animationend event is sent, indicating that a
css animation has stopped playing.
...And 11 more matches
Window.getComputedStyle() - Web APIs
the window.getcomputedstyle() method returns an object containing the values of all
css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
... individual
css property values are accessed through apis provided by the object, or by indexing with
css property names.
... the returned style is a live
cssstyledeclaration object, which updates automatically when the element's styles are changed.
...And 11 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
instead of using the obsolete align attribute, you should instead use the
css text-align property to establish left, center, right, or justify alignment for the row's cells.
... to apply character-based alignment, set the
css text-align property to the alignment character (such as "." or ",").
... the <tr> element should be styled using
css.
...And 11 more matches
Content type - SVG: Scalable Vector Graphics
for properties defined in
css2, an angle unit identifier must be provided.
...in presentation attributes for all properties, whether defined in svg1.1 or in
css2, the angle identifier, if specified, must be in lower case.
...thus: 00.5s = 500 milliseconds 00:00.005 = 5 milliseconds color <color> the basic type <color> is a
css2 compatible specification for a color in the srgb color space.
...And 11 more matches
SVG documentation index - SVG: Scalable Vector Graphics
age tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content
css, guide, html, svg modern browsers support using svg within
css styles to apply graphical effects to html content.
... 17 svg presentation attributes attribute, beginner, draft, reference, svg svg presentation attributes are
css properties that can be used as attributes on svg elements.
... 18 svg styling attributes attribute, beginner, needsexample, reference, svg the svg styling attributes are all the attributes that can be specified on any svg element to apply
css styling effects.
...And 11 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
on october 11, 2002, wired launched a brand-new site design that uses validating xhtml for its structure and a small collection of
css files for its layout.
... wired news redesign in a nutshell driven by xhtml 1.0 transitional and
css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple
css positioning; vastly increased accessibility without special coding or user agent detection.
... it was a no-brainer to us that wired news was a perfect candidate for the total conversion to xhtml and
css.
...And 10 more matches
In-Depth - Archive of obsolete content
system colours
css2 defines colours which are the same as your operating systems theme.
...mozilla
css properties mozilla.org created their own
css properties to allow them to use the technology for the ui of mozilla.
...other sites which list mozilla specific
css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard track 26.03.13 -moz-appearance makes a widget look like it's from your operating system.
...And 10 more matches
Creating a Skin - Archive of obsolete content
modifying userchrome.
css is not guaranteed to work between versions of firefox and may lead to hard-to-diagnose bugs.
...for this reason, we'll modify only the file findfile.
css rather than the global.
css file.
... you need to create a file 'findfile.
css' in a custom skin.
...And 10 more matches
Mozilla’s UAAG evaluation report
we are claiming to support html 4,
css 2, png, jpg and gif.
...(p1) vg renders html,
css, and a number of graphic image formats.
... does not contradict current specifications for html and
css rendering.
...And 10 more matches
Experimental features in Firefox
nightly 78 yes developer edition 78 yes beta 78 yes release 78 no preference name network.preload
css display stray control characters in
css as hex boxes this feature renders control characters (unicode category cc) other than tab (u+0009), line feed (u+000a), form feed (u+000c), and carriage return (u+000d) as a hexbox when they are not expected.
... nightly 43 yes developer edition 43 no beta 43 no release 43 no preference name layout.
css.control-characters.enabled or layout.
css.control-characters.visible property: initial-letter the initial-letter
css property is part of the
css inline layout specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
... nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.
css.initial-letter.enabled conic gradients conic gradients expand
css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it.
...And 10 more matches
Creating localizable web applications
don't use text and <img/> for decorations; instead, use
css).
...use the dir attribute on the <html/> element and consider using a rtl class on <html/> or <body/> as well, in order to easily change
css rules like in the example below.
...good:
css: html[dir='rtl'] foo { /* rtl-specific rules for the foo element */ } body.rtl foo { /* rtl-specific rules for the foo element */ } html/php: <?php function isrtl($locale) { $rtl_locales = array('ar', 'fa', 'he'); return in_array($locale, $rtl_locales); } ?> <html lang="<?= $locale?>" dir="<?= isrtl($locale) ?
...And 10 more matches
Mozilla Style System
the style system is the module of mozilla's code responsible for the loading and parsing of
css style sheets, and the computation of computed values for all
css properties.
...the barrier between these two halves consists of three abstract interfaces, plus some smaller structures associated with some methods on each: nsistylesheet nsistylesheet represents what one would think of as a style sheet: the in-memory representation of a
css file or other source of style data.
... nsistyleruleprocessor a style rule processor represents an origin within the
css cascade.
...And 10 more matches
Examine and edit HTML - Firefox Developer Tools
there are three types of searches that are performed automatically depending on what you enter, a full text search, a
css selector search, and an xpath search.
...that allows you to find
css selectors and xpath expressions occurring within the text.
...
css selector search you can search elements by entering a
css selector.
...And 10 more matches
Style Editor - Firefox Developer Tools
the editor provides line numbers and syntax highlighting to help make it easier to read your
css.
...then you can just start entering
css into the new editor and watch as the new styles are applied in real time just like changes to the other sheets.
... source map support web developers often create
css files using a preprocessor like sass, less, or stylus.
...And 10 more matches
Challenge solutions - Developer guides
this page provides solutions to the challenges posed in the
css getting started tutorial.
... why use
css colors challenge without looking up a reference, find five more color names that work in your stylesheet.
... solution
css supports common color names like orange, yellow, blue, green, or black.
...And 10 more matches
Examples and demos from articles - Archive of obsolete content
[article]
css pure-
css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms.
... this is a common technique used, for example, in order to create pure-
css dropdown menus (that is only
css, without using javascript).
... .[article] pure-
css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
...And 9 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with
css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
... the
css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file.
...the way to include the file in the manifest is to add this line: style chrome://global/content/customizetoolbar.xul chrome://xulschoolhello/skin/toolbar.
css if you are using xbl bindings (explained way ahead) for your toolbar items, you'll have to include the
css files for those as well, each in a new line like the one above.
...And 9 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
fortunately, the behavior can be overcome in all cases with a single
css2 rule.
... tables and inheritance in
css terms, tables are like any other element when it comes to inheritance.
... if a
css property can be inherited, then table elements and their components (tr, td, etc.) should inherit just as any other element would.
...And 9 more matches
The Business Benefits of Web Standards - Archive of obsolete content
specifically, presentation is defined using layout-oriented
css language.
... storing
css in a separate document (aka style sheet) and applying it to a set of html documents permits a complete change of presentation for all these documents in a snap.
... improved user experience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunction with
css.
...And 9 more matches
Pseudo-classes and pseudo-elements - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors.
...if we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add
css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the document?
...try editing the previous live example so it uses the following
css.
...And 9 more matches
Styling tables - Learn web development
prerequisites: html basics (study introduction to html), knowledge of html tables, and an idea of how
css works (study
css first steps.) objective: to learn how to effectively style html tables.
...we need to use some
css to fix this up.
... next, create a new file called style.
css and save it in the same directory as your other files.
...And 9 more matches
Flexbox - Learn web development
previous overview:
css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to learn how to use the flexbox layout system to create web layouts.
... for a long time, the only reliable cross browser-compatible tools available for creating
css layouts were things like floats and positioning.
...And 9 more matches
Styling links - Learn web development
prerequisites: basic computer literacy, html basics (study introduction to html),
css basics (study introduction to
css),
css text and font fundamentals.
... default styles the following example illustrates what a link will behave like by default (the
css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url.
... the default styles can be turned off/changed using the following
css properties: color for the text color.
...And 9 more matches
What is JavaScript? - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css.
...it is the third layer of the layer cake of standard web technologies, two of which (html and
css) we have covered in much more detail in other parts of the learning area.
...
css is a language of style rules that we use to apply styling to our html content, for example setting background colors and fonts, and laying out our content in multiple columns.
...And 9 more matches
TextMetrics - Web APIs
properties textmetrics.width read only is a double giving the calculated width of a segment of inline text in
css pixels.
... textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in
css pixels.
... textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in
css pixels.
...And 9 more matches
HTML documentation index - HTML: Hypertext Markup Language
other technologies besides html are generally used to describe a web page's appearance/presentation (
css) or functionality/behavior (javascript).
... 3 applying color to html elements using
css beginner,
css,
css colors, guide, html, html colors, html styles, styling html, color with
css, there are lots of ways to add color to your html elements to create just the look you want.
... this article is a primer introducing each of the ways
css color can be used in html.
...And 9 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
while these are not exceptionally efficient (they run for every http request, and considerably more often for some methods), they work very well for certain applications pure
css pure
css can be more powerful than most people suspect.
... it is often possible to do things for which people have traditionally resorted to javascript with
css alone.
...
css animation events this technique, which works on firefox 5+, has some particular advantages.
...And 8 more matches
Using the Stylesheet Service - Archive of obsolete content
the stylesheet service allows extensions to manage user and ua stylesheets without having to touch usercontent.
css or userchrome.
css files.
... using the api the string "chrome://myext/content/myext.
css" in the examples below is just an example.
... replace it with the url of the
css file you want to load.
...And 8 more matches
Adding Style Sheets - Archive of obsolete content
xul uses
css (cascading style sheets) to customize elements.
... let's assume that we are building the find files dialog for themeability, because the find files dialog can be referred to with the url chrome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.
css.
...the second line has always been: <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> this line indicates that we want to use the style provided by chrome://global/skin/.
...And 8 more matches
Box Objects - Archive of obsolete content
various pieces of information are used such as the tag name, the attributes on an element, various
css properties, the elements and layout objects around the element, and the xbl associated with an element (xbl is described in a later section).
...the layout object associated with an element can be removed and a completely different type of object created just by changing the
css display property, among others.
...x, y the x and y coordinates are referenced from the top left corner of the document in the window (that portion which excludes the window border and title bar) and refer to the top left corner of the element, including
css padding.
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
after all, you can use a combination of
css and javascript to make just about any html element behave in whatever way you want.
... there are other issues too beyond accessibility — it is harder to style the content using
css, or manipulate it with javascript, for example, because there are no elements to use as selectors.
... table layouts are a relic of the past — they made sense back when
css support was not widespread in browsers, but now they just create confusion for screen reader users.
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
after all, you can use a combination of
css and javascript to make just about any html element behave in whatever way you want.
... there are other issues too beyond accessibility — it is harder to style the content using
css, or manipulate it with javascript, for example, because there are no elements to use as selectors.
... table layouts are a relic of the past — they made sense back when
css support was not widespread in browsers, but now they just create confusion for screen reader users.
...And 8 more matches
Backgrounds and borders - Learn web development
previous overview: building blocks next in this lesson, we will take a look at some of the creative things you can do with
css backgrounds and borders.
... from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in
css.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn how to style the background and border of boxes.
...And 8 more matches
Beginner's guide to media queries - Learn web development
previous overview:
css layout next the
css media query gives you a way to apply
css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study
css first steps and
css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs.
... media query basics the simplest media query syntax looks like this: @media media-type and (media-feature-rule) { /*
css rules go here */ } it consists of: a media type, which tells the browser what kind of media this code is for (e.g.
...And 8 more matches
Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to
css background images.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to
css background images.
...you should use
css background images for decorative images, but if you must use html, add a blank alt="".
...And 8 more matches
nsIContentView
contentwidth float dimensions of scrolled content in chrome-document
css pixels.
... scrollx float horizontal scroll offset in chrome-document
css pixels.
... scrolly float horizontal scroll offset in chrome-document
css pixels.
...And 8 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
luckily,
css media queries level 5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accomodate their needs best.
... for the purposes of this document, we'll use terminlogy as it is defined in the w3c, in the
css color module level 3 when working with color, it's important to know which "color space" you are working in, as different color spaces map to different measurement systems.
... the srgb color space the mdn document, <color> notes "the
css data type represents a color in the srgb color space." color has many ways of being defined, including rgb, rgb decimal, rgb percent, hsl, cmyk among others.
...And 8 more matches
<input type="range"> - HTML: Hypertext Markup Language
orient similar to the -moz-orient non-standard
css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider.
...version 66 (66.0.3359.181) of chrome supports labels but the <datalist> tag has to be styled with
css as its display property is set to none by default, hiding the labels.
...when supported, we will be able to make the range vertical, to slide up and down with
css by declaring a height value greater than the width value.
...And 8 more matches
fill - SVG: Scalable Vector Graphics
value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a
css property.
... value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a
css property.
... value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a
css property.
...And 8 more matches
panel - Archive of obsolete content
its content is specified as html and you can execute scripts in it, so the appearance and behavior of the panel is limited only by what you can do using html,
css, and javascript.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/
css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about conten...
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/
css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style...
...And 7 more matches
Custom XUL Elements with XBL - Archive of obsolete content
xbl basics in order to create an xbl binding you'll need 2 files: the xbl file and a
css file that binds an element name to your xbl declaration.
... bindings.
css - this is the file that associates the element name to the xbl file.
...this
css file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining style; it defines content behavior instead.
...And 7 more matches
XML data - Archive of obsolete content
this page contains an example of how you can use
css with xml data.
...this is the 3rd section of part ii of the
css tutorial.
...by linking a
css stylesheet with the xml document, you can define other ways to display it.
...And 7 more matches
XUL element attributes - Archive of obsolete content
it is equivalent to setting the
css visibility property to collapse.
... never all of the children are displayed at the size required by the content or as specified by the width and height attributes or the
css width and height properties.
...the
css height property may also be used.
...And 7 more matches
Building a Theme - Archive of obsolete content
styling the browser's ui with
css firefox's user interface is written in xul and javascript.
...these xul elements are styled using
css.
... if you don't know
css, it's going to be a steep learning curve, and you may want to try some html-based tutorials to start with.
...And 7 more matches
UI pseudo-classes - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html and
css, including general knowledge of pseudo-classes and pseudo-elements.
... the original pseudo-classes available to us (as of
css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer.
...more recently, the
css selector level 3 and
css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of.
...And 7 more matches
Tips for authoring fast-loading HTML pages - Learn web development
reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and
css into external files, can improve download performance with minimal need for other changes in the page structure.
... if you use background images a lot in your
css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... further reading: understanding cdns reduce domain lookups since each separate domain costs time in a dns lookup, the page load time will grow along with the number of separate domains appearing in
css link(s) and javascript and image src(es).
...And 7 more matches
HTML table basics - Learn web development
one thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the github version has more significant
css applied.
... be under no illusion; for tables to be effective on the web, you need to provide some styling information with
css, as well as good solid structure with html.
... in this module we are focusing on the html part; to find out about the
css part you should visit our styling tables article after you've finished here.
...And 7 more matches
Manipulating documents - Learn web development
prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript — including javascript objects.
...you can use this object to return and manipulate information on the html and
css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.
...you may have also come across them if you have studied
css (e.g.
...And 7 more matches
Deployment and next steps - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
...as we saw earlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the
css sections of our components into public/build/bundle.
css.
... your generated bundle.js and bundle.
css files will be something like this (file size on the left): 504 jul 13 02:43 bundle.
css 95981 jul 13 02:43 bundle.js to compile our application for production we have to run npm run build instead.
...And 7 more matches
Getting started with Vue - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... assets: this directory is for storing static assets like
css and images.
...this means you can use pre-processors like sass/s
css or stylus.
...And 7 more matches
Client-side tooling overview - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages.
...although it is still entirely reasonable to write html,
css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app.
... you can also find linting tools for other languages, such as
csslint.
...And 7 more matches
Mozilla Quirks Mode Behavior
miscellaneous & style all of the style rules in layout/style/res/quirk.
css apply only in quirks mode: orphaned li has an inside bullet (bug 1049).
... in quirks mode
css class and id names are case insensitive.
... (this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/
css will still be treated as
css even if the server gives a content-type header other than text/
css.
...And 7 more matches
Building the WebLock UI
weblock.
css provides style rules for both of the xul files.
...the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="24" screeny="24"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports
css rules and applies them to particular parts of the interface.
... in gecko,
css is used to do virtually all of the presentation of the xul interface - its color, position, style, and to some extent its behavior as well.
...And 7 more matches
Using dynamic styling information - Web APIs
the
css object model (
cssom), part of the dom, exposes specific interfaces allowing manipulation of a wide amount of information regarding
css.
... initially defined in the dom level 2 style recommendation, these interfaces forms now a specification,
css object model (
cssom) which aims at superseding it.
... the basic style object exposes the stylesheet and the
cssstylesheet interfaces.
...And 7 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
within site
css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip".
...in this case, you insert your
css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
...the example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using
css.
...And 7 more matches
<body>: The Document Body element - HTML: Hypertext Markup Language
this method is non-conforming, use
css color property in conjunction with the :active pseudo-class instead.
...this method is non-conforming, use
css background property on the element instead.
...this method is non-conforming, use
css background-color property on the element instead.
...And 7 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.
css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet.
...for example: <link href="print.
css" rel="stylesheet" media="print"> <link href="mobile.
css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security features have been added to the <link> element too.
... font
css @font-face image <img> and <picture> elements with srcset or imageset attributes, svg <image> elements,
css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements,
css @import track <track> elements video <video> elements w...
...And 7 more matches
Authoring MathML - MathML
note that by design, mathml is well-integrated in html5 and in particular you can use usual web features like
css, dom, javascript or svg.
...if you need only basic mathematical constructions such as those used on this mdn wiki then a small mathml.
css stylesheet might be enough.
... to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.
css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages).
...And 7 more matches
Animation performance and frame rate - Web Performance
animation on the web can be done via svg, javascript, including <canvas> and webgl,
css animation, <video>, animated gifs and even animated pngs and other image types.
... the performance cost of animating a
css property can vary from one property to another, and animating expensive
css properties can result in jank as the browser struggles to hit a smooth frame rate.
...code based animations, be it
css, svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small.
...And 7 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
« previousnext » there are several ways to color shapes (including specifying attributes on the object) using inline
css, an embedded
css section, or an external
css file.
... most svg you'll find around the web use inline
css, but there are advantages and disadvantages associated with each type.
...you can use the same
css color naming schemes that you use in html, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc.
...And 7 more matches
jspage - Archive of obsolete content
w;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="
css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.related...
...else{this.detachevent("on"+m,l);}return this; },retrieve:function(m,l){var o=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l; return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.
csstext=a; },get:function(){return this.style.
csstext;},erase:function(){this.style.
csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbo...
...:"alpha(opacity="+a*100+")"; }this.style.opacity=a;this.store("opacity",a);},get:function(){return this.retrieve("opacity",1);}};element.implement({setopacity:function(a){return this.set("opacity",a,true); },getopacity:function(){return this.get("opacity");},setstyle:function(b,a){switch(b){case"opacity":return this.set("opacity",parsefloat(a));case"float":b=(browser.engine.trident)?"stylefloat":"
cssfloat"; }b=b.camelcase();if($type(a)!="string"){var c=(element.styles.get(b)||"@").split(" ");a=$splat(a).map(function(e,d){if(!c[d]){return"";}return($type(e)=="number")?c[d].replace("@",math.round(e)):e; }).join(" ");}else{if(a==string(number(a))){a=math.round(a);}}this.style[b]=a;return this;},getstyle:function(g){switch(g){case"opacity":return this.get("opacity"); case"float":g=(browser.engine...
...And 6 more matches
Introduction to XUL - Archive of obsolete content
using menubars across the top of its applications' windows): main window containing menubar area at top across width of window containing menubar (and its contents) toolbar area below menubar across width of window containing main toolbar (and its contents) application-specific content area below toolbar area structure of a xul file our language of choice is xml, flavoured with
css stylistic information.
...mozilla includes a standard stylesheet, "xul.
css".
... you can load as many style sheets as you wish using repeated processing directives, although you should always make sure to load the xul.
css file initially.
...And 6 more matches
XUL Structure - Archive of obsolete content
style sheets (
css), images, and other technologies are used to control the presentation.
...this means that the same
css properties may be used to style both html and xul, and many of the features can be shared between both.
... document types: html xml xul
css mozilla uses a distinctly different kind of document object (dom) for html and xul, although they share much of the same functionality.
...And 6 more matches
Windows and menus in XULRunner - Archive of obsolete content
the xul file may also contain other top-level declarations for
css and dtd, which i will discuss in a moment.
...here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.
css" type="text/
css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... </window> notice the references to
css and dtd files.
...And 6 more matches
Browser Feature Detection - Archive of obsolete content
it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom
css 1 and dom level 1 & 2 document property and method support to enable cross browser web development.
... test summary standard netscape 7.0x firefox 1.5 safari 2 opera 7 / 8.5-9.0 internet explorer 6 / 7 dom core 1 100% 100% 100% 75% / 91% 75% / 75% dom core 2 100% 100% 100% 70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom
css 1 100% 100% 100% 100% / 100% 96% / 96% dom
css 2 100% 98% 67% 71% / 83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true ...
...e true true document.cookie true true true document.open() true true true document.close() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true document.getelementsbyname() true true true dom
css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true ...
...And 6 more matches
Floats - Learn web development
previous overview:
css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following
css to your html (using a <style> element or a <link> to a separate .
css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect �...
...And 6 more matches
Positioning - Learn web development
previous overview:
css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to learn how
css positioning works.
...</p> now add the following rule to the bottom of your
css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph.
...And 6 more matches
create fancy boxes - Learn web development
css boxes are the building blocks of any web page styled with
css.
...it's fun because it's all about turning a design idea into working code; it's challenging because of annoying constraints and crazy freedom in the use of
css.
... before we start getting into the practical side of it, make sure you are familiar with the
css box model.
...And 6 more matches
What are browser developer tools? - Learn web development
these tools do a range of things, from inspecting currently-loaded html,
css and javascript to showing which assets the page has requested and how long they took to load.
...(an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and
css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
... this tool shows what the html on your page looks like at runtime, as well as what
css is applied to each element on the page.
...And 6 more matches
What’s in the head? Metadata in HTML - Learn web development
it contains information such as the page <title>, links to
css (if you choose to style your html content with
css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
...it will look something like this (although it may change over time): <meta name="description" content="the mdn web docs site provides information about open web technologies including html,
css, and apis for both web sites and progressive web apps."> now search for "mdn web docs" in your favorite search engine (we used google.) you'll notice the description <meta> and <title> element content used in the search result — definitely worth having!
...in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html,
css, and apis for both web sites and html5 apps.
...And 6 more matches
Responsive images - Learn web development
responsive images are just one part of responsive design, a future
css topic for you to learn.
...here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the
css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space.
...you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefore implemented using
css background images.
...And 6 more matches
Web performance resources - Learn web development
css performance factors use http/2 on your server (or cdn).
... image optimization (use
css animation, or svg if possible).
... quick wins
css web performance is all about user experience and perceived performance.
...And 6 more matches
Getting started with Ember - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... that said, because this tutorial is a focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made
css and recommended html structure, which eliminates small differences between implementations, allowing for easier comparison.
... transpilation, and minification, of both
css and javascript for production builds.
...And 6 more matches
Getting started with React - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
...its initial file structure looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.
css ├── app.js ├── app.test.js ├── index.
css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives.
...this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.
css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
...And 6 more matches
Gecko object attributes
display similar with display
css style.
...their formatting may have been changed with
css.
... an example of this is often horizontal navigation bars with list items that are formatted with
css display: inline.
...And 6 more matches
Console messages - Firefox Developer Tools
filename and line number for javascript,
css and console api messages, the message can be traced to a specific line of code.
...if the resource is a stylesheet, you will see the
css rules, etc.
...
css note:
css warnings and reflow messages are not shown by default, for performance reasons (see bug 1452143).
...And 6 more matches
FontFace - Web APIs
fontface.display a
cssomstring that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... fontface.family a
cssomstring that retrieves or sets the family of the font.
... fontface.featuresettings a
cssomstring that retrieves or sets infrequently used font features that are not available from a font's variant properties.
...And 6 more matches
HTMLImageElement - Web APIs
htmlimageelement.height an integer value that reflects the height html attribute, indicating the rendered height of the image in
css pixels.
... htmlimageelement.naturalheight read only returns an integer value representing the intrinsic height of the image in
css pixels, if it is available; else, it shows 0.
... htmlimageelement.naturalwidth read only an integer value representing the intrinsic width of the image in
css pixels, if it is available; otherwise, it will show 0.
...And 6 more matches
ValidityState - Web APIs
if true, the element matches the :invalid
css pseudo-class.
...if true, the element matches the :invalid and :out-of-range and
css pseudo-classes.
...if true, the element matches the :invalid and :out-of-range
css pseudo-classes.
...And 6 more matches
Window - Web APIs
this value is reported in
css pixels.
... see mozscreenpixelsper
csspixel in nsidomwindowutils for a conversion factor to adapt to screen pixels if needed.
...this value is reported in
css pixels.
...And 6 more matches
Introduction to Web development - Developer guides
html elements reference guide — a comprehensive guide to html elements with details on how browsers support them
css getting started with
css — an absolute beginners guide to
css covers basic concepts and fundamentals
css reference guide — a complete guide to
css with details on the level of gecko/firefox support for each.
... the w3c introduction to styling with
css — a brief guide to styling web pages for beginners.
... common
css questions — common questions and answers for beginners intermediate
css concepts — grouping, pseudo-classes and more.
...And 6 more matches
Web Performance
we cover them in this section: key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl,
css animation, <video>, animated gifs and even animated pngs and other image types.
... the performance cost of animating a
css property can vary from one property to another, and animating expensive
css properties can result in jank as the browser struggles to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html,
css, and javascript into pixels on the screen.
... optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom),
css object model (
cssom), render tree and layout.
css and javascript animation performancebrowsers are able to optimize rendering flows.
...And 6 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
serving images selectively via
css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context.
...
css3 drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better.
...
css media queries allow us to serve different
css rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible.
...And 6 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the chapters so far have each focused on technologies in isolation—xul, javascript,
css, and xpcom.
... install the dom inspector the dom inspector is an extension that lets you examine html and xul dom tree structures, javascript objects and
css properties, etc.
... listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.
css style chrome://global/content/customizetoolbar.xul chrome://helloworld/skin/overlay.
css register skin package (skin instruction) line 1 beginning skin is used to register the skin package; helloworld is the package name; skin/classic/ is the relative path to the folder containing the source files; classic/1.0 indicates that this skin package is meant for the firefox standard theme.
...And 5 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
it is now preferable to use
css for layout.
... fast forward to 2001, and the rise of standards-based browsers that lay out pages using html and
css instead of their own private layout algorithms.
... thanks to an obscure corner of the
css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...And 5 more matches
Layout System Overview - Archive of obsolete content
this presentation is typically formatted in accordance with the requirements of the
css1 and
css2 specifications from the w3c.
...the decision about when to apply
css-specified formatting and when to apply legacy formatting is controlled by the document's doctype specification.
...layout creates frames for content based on either the specific html rules for an element or based on the
css display type of the element.
...And 5 more matches
Modifying the Default Skin - Archive of obsolete content
« previousnext » as of firefox 69, you must set the toolkit.legacyuserprofilecustomizations.stylesheets preference to true in about:config in order to load userchrome.
css or usercontent.
css files.
...support for the userchrome.
css file and any of its elements described below are not guaranteed in future versions of firefox.
... a skin is described using
css, allowing you to define the colors, borders and images used to draw elements.
...And 5 more matches
treecol - Archive of obsolete content
*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /*
css for checked cells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a
css file.
... copy and paste the code above and link the
css file to your xul file.
...And 5 more matches
Using the W3C DOM - Archive of obsolete content
see the w3c dom 2 recommendation,
css2 extended interface.
... dom level 2 provides for the assignment of new values to the
css properties of an element using the elemref.style object reference.
...te dom 2 replacements ie5+: elemref.style.pixelleft dom level 2: parseint(elemref.style.left, 10) ie5+: elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+: elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; w3c dom2 reflection of an element's
css properties keep in mind that according to the w3c recommendation, the values returned by the style property of an element reflect static settings in the element's style attribute only, not the total "computed style" that includes any inherited style settings from parent elements.
...And 5 more matches
WAI-ARIA basics - Learn web development
prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript, an understanding of the previous articles in the course.
...as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using
css and controlled using javascript.
...wai-aria doesn't affect webpage structure, the dom, etc., although the attributes can be useful for selecting elements by
css.
...And 5 more matches
Styling lists - Learn web development
previous overview: styling text next lists behave like any other text for the most part, but there are some
css properties specific to lists that you need to know about, and some best practices to consider.
... prerequisites: basic computer literacy, html basics (study introduction to html),
css basics (study introduction to
css),
css text and font fundamentals.
... handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the
css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font si...
...And 5 more matches
HTML forms in legacy browsers - Learn web development
<input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some
css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only?
...*/ border: revert; } see the global
css revert value for more information.
... let go of
css one of the big issues with html forms is styling form widgets with
css.
...And 5 more matches
HTML text fundamentals - Learn web development
to style content with
css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so
css/javascript can effectively target it.
...in this context the <h1> element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using
css).
...you use it to wrap content when you want to apply
css to it (or do something to it with javascript) without giving it any extra meaning.
...And 5 more matches
Adding vector graphics to the Web - Learn web development
svgs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via
css or scripted via javascript.
... if you want to control the svg content with
css, you must include inline
css styles in your svg code.
... (external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with
css pseudoclasses (like :focus).
...And 5 more matches
Edit fonts - Firefox Developer Tools
select the fonts tab; the last of the tabs shown in the right-hand side of the
css pane.
...empty elements will not have any fonts used and will display the message "no fonts were found for the current element." fonts will be included in this section for one of the following reasons: they are listed in the element's font-family
css declaration value.
... they are system fallback fonts used when nothing from the font-family
css declaration has been applied.
...And 5 more matches
Applying styles and colors - Web APIs
color is a string representing a
css <color>, a gradient object, or a pattern object.
...by default, the stroke and fill color are set to black (
css color value #000000).
... the valid strings you can enter should, according to the specification, be
css <color> values.
...And 5 more matches
GlobalEventHandlers - Web APIs
globaleventhandlers.onanimationcancel an eventhandler called when an animationcancel event is sent, indicating that a running
css animation has been canceled.
... globaleventhandlers.onanimationend an eventhandler called when an animationend event is sent, indicating that a
css animation has stopped playing.
... globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a
css animation has begun playing a new iteration of the animation sequence.
...And 5 more matches
HTMLElement - Web APIs
4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
... htmlelement.style is a
cssstyledeclaration, an object representing the declarations of an element's style attributes.
... methods inherits methods from its parent, element, and implements those from documentandelementeventhandlers, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
...And 5 more matches
SVGLength - Web APIs
svg_lengthtype_ems 3 a value was specified using the em units defined in
css2.
... svg_lengthtype_exs 4 a value was specified using the ex units defined in
css2.
... svg_lengthtype_px 5 a value was specified using the px units defined in
css2.
...And 5 more matches
Window.devicePixelRatio - Web APIs
the devicepixelratio of window interface returns the ratio of the resolution in physical pixels to the resolution in
css pixels for the current display device.
... this value could also be interpreted as the ratio of pixel sizes: the size of one
css pixel to the size of one physical pixel.
... in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single
css pixel.
...And 5 more matches
Standard metadata names - HTML: Hypertext Markup Language
the content attribute contains a valid
css <color>.
... standard metadata names defined in other specifications the
css color adjustment specification defines the following metadata name: color-scheme: specifies one or more color schemes with which the document is compatible.
... for example, to indicate that a document prefers dark mode but does render functionally in light mode as well: <meta name="color-scheme" content="dark light"> this works at the document level in the same way that the
css color-scheme property lets individual elements specify their preferred and accepted color schemes.
...And 5 more matches
<th> - HTML: Hypertext Markup Language
to achieve the same effect as the left, center, right or justify values, apply the
css text-align property to the element.
...unimplemented in
css3.
...n = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <th> element should be styled using
css.
...And 5 more matches
Progressive loading - Progressive web apps (PWAs)
this is all about deferring loading of as many resources as possible (html,
css, javascript), and only loading those immediately that are really needed for the very first experience.
...a bundle.js file can be many megabytes, and a single style.
css bundle can contain everything from basic
css structure definitions to all the possible styles of every version of the site: mobile, tablet, desktop, print only, etc.
... render-blocking resources bundling is a problem, because the browser has to load the html,
css, and javascript before it can paint their rendered results onto the screen.
...And 5 more matches
Mobile first - Progressive web apps (PWAs)
<li><a href="#">work</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#top">back to top</a> </div> </article> <button id="install-btn">install</button> default mobile
css for the
css, i first added some styles into our app.
css stylesheet to provide a reasonable narrow-screen layout.
... there is very little going on here, and anyone with a basic understanding of
css should be able to understand most of it by just looking at the source code in app.
css.
... article { display: table; } nav { display: table-caption; caption-side: bottom; } this is a rather nice hacky bit of
css you can use to make the navigation menu display at the bottom, even though it is at the top in the source order.
...And 5 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
modern browsers support using svg within
css styles to apply graphical effects to html content.
... using embedded svg to apply an svg effect using
css styles, you first need to create the
css style that references the svg to apply.
... example: masking for example, you can make a gradient mask for html content using svg and
css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the
css, the mask is specified using a ur...
...And 5 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
the role of each technology firefox is largely built using four technologies: xul,
css, javascript, and xpcom.
... xml coding
css coding basic javascript syntax xml: a text-based structural language extensible markup language (xml) is a meta-language for expressing various kinds of data.
...
css: a style language to alter the display of xml documents like xml, cascading style sheets (
css) is a technical specification established by the w3c; it is a style-description language defining the display of data marked up in xml and html.
...And 4 more matches
Getting Started - Archive of obsolete content
now all of the
css and images are extracted, but if you make some changes and run mozilla as it is, you will not see them because it's still set to look at the files in the jar files.
...changing borders and colours this is the part where knowing
css comes in handy.
... to find all of the
css files that we're going to be modifying, we must first understand the directory structure.
...And 4 more matches
Binding Attachment and Detachment - Archive of obsolete content
attachment using
css bindings can be attached to elements through
css using the -moz-binding property.
... input[type="checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through
css will only remain on the bound element as long as the element continues to match the style rule.
... whenever an element is removed from a document, any bindings attached via
css loaded by the document will be detached.
...And 4 more matches
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
many authors make use of the
css2 pseudo-class :hover to style their links.
... this innovation, first introduced by microsoft® internet explorer and later adopted into the
css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing
css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages.
... hover and non-link elements section 5.11.3 of
css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say:
css doesn't define which elements may be in the above states, or how the states are entered and left.
...And 4 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html 5,
css 3, the w3c dom, xml, javascript, and others.
...ope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets
css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix
css 2 - partial support is expected and has already been built into gecko, including support for
css2 positioning, but no commitment has been made to achieve a specific level...
...as robert o'callahan notes in bug 25707, "full html4/
css1 compliance can't mean '100% bug free'.
...And 4 more matches
Assessment: Accessibility troubleshooting - Learn web development
prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript, an understanding of the previous articles in the course.
...you could paste the html,
css, and javascript into one of these online editors.
... if the online editor you are using doesn't have a separate
css/js panel, feel free to put them in appropriate <style> / <script> elements.
...And 4 more matches
How to build custom form controls - Learn web development
this is important to make sure that we don't bind our
css and javascript to a strong html structure, so that we can make implementation changes later without breaking code that uses the control.
... creating the look and feel using
css now that we have a structure, we can start designing our control.
...to that end, we will split our
css work into two parts: the first part will be the
css rules absolutely necessary to make our control behave like a <select> element, and the second part will consist of the fancy styles used to make it look the way we want.
...And 4 more matches
Front-end web developer - Learn web development
subjects covered the subjects covered are: basic setup and learning how to learn web standards and best practices (such as accessibility and cross-browser compatibility) html, the language that gives web content structure and meaning
css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate modern client-side web development.
...for example, if you already know html, you can skip ahead to the
css section.
... modules introduction to html (15–20 hour read/exercises) multimedia and embedding (15–20 hour read/exercises) html tables (5–10 hour read/exercises) styling and layout with
css time to complete: 90–120 hours prerequisites it is recommended that you have basic html knowledge before starting to learn
css.
...And 4 more matches
Getting started with HTML - Learn web development
(the spacing is due to default
css styling that the browser applies to paragraphs.) note: html5 redefined the element categories: see element content categories.
... note: the terms block and inline, as used in this article, should not be confused with the types of
css boxes that have the same names.
... while the names correlate by default, changing the
css display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in.
...And 4 more matches
HTML table advanced features and accessibility - Learn web development
they are however very useful for styling and layout — acting as useful hooks for adding
css to your table.
... first of all, make a local copy of spending-record.html and minimal-table.
css in a new folder.
... let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying
css.
...And 4 more matches
Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via
css properties such as background-image, and svg.
...while you could use
css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
...you could use
css, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixellated/distorted.
...And 4 more matches
Beginning our React todo list - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... we're not going to write per-component stylesheets, so first delete the app.
css import from the top of app.js.
... # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.
css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd ..
...And 4 more matches
UI Tour - Firefox Developer Tools
it covers the three top-level components of the inspector's ui: the "select element" button the html pane the
css pane this guide is intentionally kept as short as possible.
...the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the
css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the
css rules view into a separate pane in the center of the inspector.
... the following image shows 3-pane mode: as you can see, the
css pane has moved into the center of the inspector.
...And 4 more matches
Element.getClientRects() - Web APIs
the getclientrects() method of the element interface returns a collection of domrect objects that indicate the bounding rectangles for each
css border box in a client.
... syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each
css border box associated with the element.
...however, the
cssom working draft specifies that it returns a domrect for each border box.
...And 4 more matches
GlobalEventHandlers.onanimationend - Web APIs
the animationend event fires when a
css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay).
... syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a
css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre>
css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: whit...
...And 4 more matches
GlobalEventHandlers.onanimationstart - Web APIs
this event is sent when a
css animation starts to play.
... syntax var animstarthandler = target.onanimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a
css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre>
css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: whit...
...And 4 more matches
Web accessibility for seizures and physical reactions - Accessibility
web technologies that use video, animated gifs, animated pngs, animated svgs, canvas, and
css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions.
... "this effect is noticable, and documented, up to 70 hz." "these studies would seem to indicate that you should stay away from refresh rates under 70 hz, and use a rate not divisible by 10." eric bailey, of
css-tricks, found an innovative use the update feature which, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye.
...the
css below is from the article,
css-tricks revisiting prefers-reduced-motion, the reduced motion media query.
...And 4 more matches
Adding captions and subtitles to HTML5 video - Developer guides
modifications to the html and
css this section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video.
... if you are not interested in this, and just want to get straight into the javascript and more relevant
css, skip to the subtitle implementation section.
.../progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> <button id="subtitles" type="button" data-state="subtitles">cc</button> </div>
css changes the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
...And 4 more matches
Block formatting context - Developer guides
a block formatting context is a part of a visual
css rendering of a web page.
...ass="box" style="overflow:auto"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section>
css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the ...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section>
css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba...
...And 4 more matches
Mobile Web Development - Developer guides
it includes techniques such as: fluid
css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include
css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.
...you won't be able to use the
css :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers.
... you can use the pointer or any-pointer media query to load different
css on a touch-enabled device.
...And 4 more matches
<input type="image"> - HTML: Hypertext Markup Language
the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in
css pixels, at which to draw the image src the url from which to load the image width the width, in
css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading devic...
... height a number specifying the height, in
css pixels, at which to draw the image specified by the src attribute.
... width a number indicating the width at which to draw the image, in
css pixels.
...And 4 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag,
css media queries, flexbox, and
css grid.
...it consists of a single html file (index.html), with basic
css styling provided in style.
css.
...the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js13kgames.png index.html js13kpwa.webmanifest style.
css sw.js the html the html in the file index.html creates the structure of the app.
...And 4 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
svg presentation attributes are
css properties that can be used as attributes on svg elements.
... value: see
css display; animatable: yes dominant-baseline it defines the baseline used to align the box’s text and inline-level contents.
... value: see
css font-family; animatable: yes font-size it specifies the size of the font.
...And 4 more matches
visibility - SVG: Scalable Vector Graphics
note: as a presentation attribute, visibility can be used as a
css property.
... see the
css visibility property for more information.
... example the following example toggles the
css visibility of the svg image path.
...And 4 more matches
Underscores in class and ID Names - Archive of obsolete content
note: browser support for underscores in
css has greatly improved since this article was originally published in 2001 and the following recommendation is no longer accurate for most circumstances.
... summary: the use of the underscore character in
css can lead to major display problems in multiple browsers.
...this technical note examines the use of underscores in
css, and why they should be generally avoided in most circumstances.
...And 3 more matches
XUL user interfaces - Archive of obsolete content
more specialized features can be built from parts by using xul together with other technologies that you have seen in this tutorial:
css style, javascript code, and xbl bindings.
... like other xml-based languages, xul uses
css stylesheets.
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/
css" href="style7.
css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="
css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns>...
...And 3 more matches
XML in Mozilla - Archive of obsolete content
supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with
css, manipulating xml documents with scripts via dom, associating stylesheets with xml documents, and namespaces in xml.
...likewise, the cascading style sheets (
css, w3c recommendations and drafts) style language can be used to style xml documents.
...for example, dom related questions should probably be discussed in the mozilla.dev.tech.dom newsgroup, while style issues should be discussed on mozilla.dev.tech.
css and so on.
...And 3 more matches
Building accessible custom components in XUL - Archive of obsolete content
="expense"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use
css to add some minimal styling to make it actually look like a spreadsheet.
...in xul, there is no tabindex attribute; to make a xul element focusable, you need to use a mozilla-specific
css property, -moz-user-focus: normal.
...in xul, we will need to handle this ourselves, again with
css rules.
...And 3 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
its intended audience is extension developers with a basic knowledge of xul and
css.
... the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following
css rules: /* skin/toolbar-button.
css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar window.
... to attach it to the overlay, put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.
css" type="text/
css"?> note: the
css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file.
...And 3 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/
css" href="chrome://custombutton/content/button.
css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> </hbox> <...
... create a plain text file named button.
css.
... explanation: this
css stylesheet specifies how the button is diaplayed.
...And 3 more matches
Custom toolbar button - Archive of obsolete content
copy the following content, and paste it into the new file: content custombutton chrome/ style chrome://global/content/customizetoolbar.xul chrome://custombutton/content/button.
css # firefox overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # thunderbird address book overlay chrome://messenger/...
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/
css" href="chrome://custombutton/content/button.
css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- firefox --> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- ...
...create a plain text file named button.
css.
...And 3 more matches
reftest opportunities files - Archive of obsolete content
tests from dbaron http://dbaron.org/
css/test/cachetest http://dbaron.org/
css/test/lenunit http://dbaron.org/
css/test/implied http://dbaron.org/
css/test/formelem http://dbaron.org/
css/test/sec010303 http://dbaron.org/
css/test/sec0302 http://dbaron.org/
css/test/sec0302_xml http://dbaron.org/
css/test/parsing http://dbaron.org/
css/test/parsing2 http://dbaron.org/
css/test/parsing4 http://dbaron.org/
css/test/parsing5 http://dbaron.org/
css/te...
...st/parsing6 http://dbaron.org/
css/test/sec040102 http://dbaron.org/
css/test/casesens http://dbaron.org/
css/test/xmltypesel http://dbaron.org/
css/test/unitless http://dbaron.org/
css/test/exunit http://dbaron.org/
css/test/emunit http://dbaron.org/
css/test/sec040310 http://dbaron.org/
css/test/parsing3 http://dbaron.org/
css/test/selector_confusion http://dbaron.org/
css/test/univsel http://dbaron.org/
css/test/childsel http://dbaron.org/
css/test/sibsel http://dbaron.org/
css/test/attrsel http://dbaron.org/
css/test/twoclass http://dbaron.org/
css/test/xmlid http://dbaron.org/
css/test/pseudos http://dbaron.org/
css/test/pseudos2 http://dbaron.org/
css/test/pseudos3 http://dbaron.org/
css/test/firstchild http://dbaron.org/
css/test/sec051103 http://dbaron.org/
css/test/sec051103b http://dbaron.org/
css/test/o...
...rder http://dbaron.org/
css/test/inherit http://dbaron.org/
css/test/sec060402 http://dbaron.org/
css/test/sec060403b http://dbaron.org/
css/test/specific http://dbaron.org/
css/test/non
css1 http://dbaron.org/
css/test/non
css2 http://dbaron.org/
css/test/shortbox http://dbaron.org/
css/test/shortbox2 http://dbaron.org/
css/test/rootbox http://dbaron.org/
css/test/listbox http://dbaron.org/
css/test/margtest http://dbaron.org/
css/test/shortborder http://dbaron.org/
css/test/shortborder2 http://dbaron.org/
css/test/sec0805 http://dbaron.org/
css/test/dborder http://dbaron.org/
css/test/sec090102 http://dbaron.org/
css/test/sec090201 http://dbaron.org/
css/test/sec090203 http://dbaron.org/
css/test/sec090204 http://dbaron.org/
css/test/sec090205 http://dbaron.org/
css/test/sec090301 http://dbaron.org/
css/test/sec09...
...And 3 more matches
background-size - Archive of obsolete content
it's hard to get reliable information about its
css support without having this browser (read: multiple versions of this browser) installed.
... are you able and willing to do that for all
css properties?
... if so, feel free to change the en/
css_reference/property_template and all
css property pages ; ) start with -webkit-background-size and investigate support of contain and cover keywords and "omitted second value" behavior.
...And 3 more matches
Crisp pixel art look with image-rendering - Game development
original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a
css-based solution the good news is that you can use
css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
... the
css property to achieve this scaling is image-rendering.
... set its
css width and height properties to be 2x or 4x the value of the html width and height.
...And 3 more matches
Houdini - MDN Web Docs Glossary: Definitions of Web-related terms
houdini is a set of low level apis that give developers the power to extend
css, providing the ability to hook into the styling and layout process of a browser’s rendering engine.
... houdini gives developers access to the
css object model (
cssom), enabling developers to write code the browser can parse as
css.
... the benefit of houdini is that developers can create
css features without waiting for web standards specifications to define them and without waiting for every browser to fully implement the features.
...And 3 more matches
A cool-looking box - Learn web development
objective: to test comprehension of the
css box model and other box-related features such as borders and backgrounds.
... starting point to get this assessment started, you should: make local copies of the starting html and
css — save them as index.html and style.
css in a new directory.
...you could paste the html and fill in the
css into one of these online editors.
...And 3 more matches
Multiple-column layout - Learn web development
previous overview:
css layout next the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
... prerequisites: html basics (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to learn how to create multiple-column layout on webpages, such as you might find in a newspaper.
...you can follow along by downloading the multicol starting point file and adding the
css into the appropriate places.
...And 3 more matches
Typesetting a community school homepage - Learn web development
objective: to test comprehension of
css text styling techniques.
... starting point to get this assessment started, you should: go and grab the html and
css files for the exercise, and the provided external link icon.
...you could paste the html and fill in the
css into one of these online editors, and use this url to point the background image.
...And 3 more matches
JavaScript basics - Learn web development
these include: browser application programming interfaces (apis) built into web browsers, providing functionality such as dynamically creating html and setting
css styles; collecting and manipulating a video stream from a user's webcam, or generating 3d graphics and audio samples.
... however, getting comfortable with javascript is more challenging than getting comfortable with html and
css.
... in your index.html file, enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same job as the <link> element for
css.
...And 3 more matches
The web and web standards - Learn web development
after that other technologies followed such as
css and javascript, and the web started to look more like the web we know today.
... html,
css, and javascript html,
css, and javascript are the main three technologies you'll use to build a website: hypertext markup language, or html, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure.
... cascading style sheets (
css) is a rule-based language used to apply styles to your html, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way.
...And 3 more matches
Document and website structure - Learn web development
with the right
css, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/
css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/
css"> <link rel="stylesheet" href="style.
css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body>...
...we aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound html structure, and then laying it out with
css.
...And 3 more matches
Structuring a page of content - Learn web development
previous overview: introduction to html structuring a page of content ready for laying it out using
css is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
...
css to style your markup.
... you need to add a suitable wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided
css to the page by adding another <link> element just below the existing one provided at the start.
...And 3 more matches
Video and Audio APIs - Learn web development
you can solve both these problems by hiding the native controls (by removing the controls attribute), and programming your own with html,
css, and javascript.
... exploring the
css now open the
css file and have a look inside.
... the
css for the example is not too complicated, but we'll highlight the most interesting bits here.
...And 3 more matches
mozbrowserasyncscroll
details the details property returns an anonymous javascript object with the following properties: top the scroll top position in
css pixels of the document within the browser <iframe>.
... left the scroll left position in
css pixels of the document within the browser <iframe>.
... width the width in
css pixels of the visible part of the document within the browser <iframe>.
...And 3 more matches
mozbrowsercaretstatechanged
its properties are width: the width of the bounding rectangle, in
css pixels.
... height: the height of the bounding rectangle, in
css pixels.
... top: the top position of the bounding rectangle, in
css pixels.
...And 3 more matches
mozbrowserselectionstatechanged
its properties are: width: the width of the selection, in
css pixels.
... height: the height of the selection, in
css pixels.
... top: the y coordinate of the top of the bounding box, in
css pixels.
...And 3 more matches
Using the viewport meta tag to control layout on mobile browsers
it can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in
css pixels at a scale of 100%.
...because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each
css "pixel".
...to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using
css or viewport properties.
...And 3 more matches
nsIAccessNode
method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidom
cssprimitivevalue getcomputedstyle
cssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a node ...
... getcomputedstyle
cssvalue() retrieve the computed style value as nsidom
cssprimitivevalue for the dom node this access node is associated with.
... note: the meanings of width, height and other size measurements depend on the version of
css being used.
...And 3 more matches
nsIParserUtils
at present, sanitizing
css backgrounds, and so on., is not supported, so setting this together with sanitizerallowstyle doesn't make sense.
... at present, sanitizing
css syntax in svg presentational attributes is not supported, so this option flattens out svg.
... sanitizerdropnon
csspresentation (1 << 3) flag for sanitizer: drops non-
css presentational html elements and attributes, such as <font>, <center>, and the bgcolor attribute.
...And 3 more matches
Page inspector 3-pane mode - Firefox Developer Tools
the
css rules in the middle in their own separate pane, rather than as a tab.
... the other
css related features — such as computed styles view, animations view, and fonts view — in tabs on the right hand side, as usual.
... note: at narrower browser window widths, the tabs appear below the
css rules pane.
...And 3 more matches
Work with animations - Firefox Developer Tools
it displays animations created using
css transitions,
css @keyframes rules, or the web animations api.
...the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different
css properties).
... if the animation used
css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned.
...And 3 more matches
Waterfall - Firefox Developer Tools
the hint may be any of: self subtree latersiblings
csstransitions
cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements.
...the javascript changes some of the page's dom or
cssom.
... importantly for responsiveness, the browser doesn't always have to go through every step:
css animations update the page without having to run any javascript.
...And 3 more matches
Document.execCommand() - Web APIs
in stylewith
css mode, it affects the background color of the containing block instead.
...use
css must be true for this to function.
... use
css toggles the use of html tags or
css for the generated markup.
...And 3 more matches
Document.querySelector() - Web APIs
this string must be a valid
css selector string; if it isn't, a syntax_err exception is thrown.
... note: characters that are not part of standard
css syntax must be escaped using a backslash character.
... return value an htmlelement object representing the first element in the document that matches the specified set of
css selectors, or null is returned if there are no matches.
...And 3 more matches
Element.computedStyleMap() - Web APIs
the computedstylemap() method of the element interface returns a stylepropertymapreadonly interface which provides a read-only representation of a
css declaration block that is an alternative to
cssstyledeclaration.
... examples we start with some simple html: a paragraph with a link, and a definition list to which we will add all the
css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of
css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the
css property values using computedstylemap().
...And 3 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
an animationcancel event is sent when a
css animation unexpectedly aborts, that is, any time it stops running without sending an animationend event.
... this can happen, for example, when the animation-name is changed such that the animation is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using
css.
... syntax var animcancelhandler = target.onanimationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a
css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 3 more matches
PaintWorklet - Web APIs
the paintworklet interface of the
css painting api programmatically generates an image where a
css property expects a file.
... access this interface through
css.paintworklet.
... paintworklet.registerpaint() registers a class programmatically generate an image where a
css property expects a file.
...And 3 more matches
StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the
css typed object model api provides a read-only representation of a
css declaration block that is an alternative to
cssstyledeclaration.
... stylepropertymapreadonly.getall() returns an array of
cssstylevalue objects containing the values for the provided property.
...we can add some
css, or not.
...And 3 more matches
VisualViewport - Web APIs
visualviewport.offsetleft read only returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in
css pixels.
... visualviewport.offsettop read only returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in
css pixels.
... visualviewport.pageleft read only returns the x coordinate of the visual viewport relative to the initial containing block origin of the top edge in
css pixels.
...And 3 more matches
Window.getDefaultComputedStyle() - Web APIs
the getdefaultcomputedstyle() method gives the default computed values of all the
css properties of an element, ignoring author styling.
... return value the returned style is a
cssstyledeclaration object.
... example simple example var elem1 = document.getelementbyid("elemid"); var style = window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem = document.getelementbyid("elem-container"); var the
cssprop = window.getdefaultcomputedstyle(elem).position; document.getelementbyid("output").innerhtml = the
cssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::before or ::after).
...And 3 more matches
<col> - HTML: Hypertext Markup Language
<col> allows styling columns using
css, but only a few properties will have an effect on the column (see the
css 2.1 specification for a list).
... if the table doesn't use a colspan attribute, use the td:nth-child(an+b)
css selector.
... if the table does use a colspan attribute, the effect can be achieved by combining adequate
css attribute selectors like [colspan=n], though this is not trivial.
...And 3 more matches
<colgroup> - HTML: Hypertext Markup Language
note: this attribute is applied on the attributes of the column group, it has no effect on the
css styling rules associated with it or, even more, to the cells of the column's members of the group.
... if the table doesn't use a colspan attribute, use one td:nth-child(an+b)
css selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table.
... if the table does use a colspan attribute, the effect can be achieved by combining adequate
css attribute selectors like [colspan=n], though this is not trivial.
...And 3 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
when the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use
css to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.
... fully standards-compliant implementations automatically apply the
css display: list-item to the <summary> element.
... an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some
css to customize the appearance of the disclosure box.
...And 3 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
the selected source size affects the intrinsic size of the image (the image’s display size if no
css styling is applied).
...use the float and/or vertical-align
css properties instead of this attribute.
...use the border
css property instead.
...And 3 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
to achieve the same effect as the left, center, right or justify values, use the
css text-align property on it.
... to achieve the same effect as the char value, in
css3, you can use the value of the char as the value of the text-align property unimplemented.
...800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented some versions of microsoft internet explorer: the <tfoot> element should be styled using
css.
...And 3 more matches
<thead>: The Table Head element - HTML: Hypertext Markup Language
to achieve the same effect as the left, center, right or justify values, use the
css text-align property on it.
... to achieve the same effect as the char value, in
css3, you can use the value of the char as the value of the text-align property unimplemented.
...000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <thead> element should be styled using
css.
...And 3 more matches
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
this is rendered by default as a simple solid underline, but may be altered using
css.
...to underline text, you should instead apply a style that includes the
css text-decoration property set to underline.
... examples indicating a spelling error this example uses the <u> element and some
css to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.
...And 3 more matches
Inline elements - HTML: Hypertext Markup Language
since this is a presentational characteristic it is nowadays specified by
css in the flow layout.
...first, some simple
css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some tex...
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this
css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the
css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { backgro...
...And 3 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the basics you most commonly use <link> to load a
css file to style your page with: <link rel="stylesheet" href="styles/main.
css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want.
... a simple example might look like this (see our js and
css example source, and also live): <head> <meta charset="utf-8"> <title>js and
css preload example</title> <link rel="preload" href="style.
css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.
css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our
css and javascript files so they will be available as soon as they are required for the rendering of the page later on.
...for example: resources that are pointed to from inside
css, like fonts or images.
...And 3 more matches
Lazy loading - Web Performance
a practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (js,
css, images...) are downloaded only when the user navigates to that cart page.
... general code splitting javascript,
css and html can be split into smaller chunks.
...
css by default,
css is treated as a render blocking resource, so the browser won't render any processed content until the
cssom is constructed.
...And 3 more matches
Progressive web app structure - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag,
css media queries, flexbox, and
css grid.
... structure of our example application the js13kpwa website structure is quite simple: it consists of a single html file (index.html) with basic
css styling (style.
css), and a few images, scripts, and fonts.
... to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.
css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgame...
...And 3 more matches
height - SVG: Scalable Vector Graphics
value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, height is a geometry property meaning this attribute can also be used as a
css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic height of the image) animatable yes note: starting with svg2, height is a geometry property meaning this attribute can also be used as a
css property for images.
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, height is a geometry property meaning this attribute can also be used as a
css property for rectangles.
...And 3 more matches
overflow - SVG: Scalable Vector Graphics
it has the same parameter values and meaning as the
css overflow property, however, the following additional points apply: if it has a value of visible, the attribute has no effect (i.e., a clipping rectangle is not created).
... note: as a presentation attribute, overflow can be used as a
css property.
... see the
css opacity property for more information.
...And 3 more matches
transform - SVG: Scalable Vector Graphics
"grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a
css property.
... however, be aware that there are some difference in syntax between the
css property and the attribute.
... see the documentation for the
css property transform for the specific syntax to use in that case.
...And 3 more matches
width - SVG: Scalable Vector Graphics
value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a
css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic width of the image) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a
css property for images.
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a
css property for rectangles.
...And 3 more matches
x - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a
css property for <foreignobject>.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a
css property for images.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a
css property for rectangles.
...And 3 more matches
y - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a
css property for <foreignobject>.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a
css property for images.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a
css property for rectangles.
...And 3 more matches
Web Components
css pseudo-classes pseudo-classes relating specifically to custom elements: :defined: matches any element that is defined, including built in elements and custom elements defined with customelementregistry.define()).
... :host: selects the shadow host of the shadow dom containing the
css it is used inside.
... :host(): 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.
...And 3 more matches
stylesheet/style - Archive of obsolete content
experimental modify styles using stylesheet files or
css rules.
... globals constructors style(options) the style constructor creates an object that represents style modifications via stylesheet file(s) or/and
css rules.
... stylesheet file url(s) are verified to be local to an add-on, while
css rules are verified to be a string or array of strings.
...And 2 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
injecting
css note that the feature described in this section is experimental at the moment.
... rather than injecting javascript into a page, you can inject
css by setting the page-mod's contentstyle option.
... var pagemod = require("sdk/page-mod").pagemod({ include: "*", contentstyle: "body {" + " border: 5px solid green;" + "}" }); as with contentscript, there's a corresponding contentstylefile option that takes the url of a
css file in your "data" directory; it's a good practice to use this option in preference to contentstyle if the
css is even marginally complex.
...And 2 more matches
Adding sidebars - Archive of obsolete content
there are ways to limit the size boundaries of your sidebar with
css or even disable resizing altogether, but none of those are good practices.
...the tabs are styled to match the operating system you're using, so you should avoid changing the
css in tab boxes.
... on the other hand, if you need ui that behaves like a tabbox but doesn't look like one, you should still favor using a tabbox and use
css to change its look.
...And 2 more matches
Setting Up a Development Environment - Archive of obsolete content
komodo edit has automatic completion for xul tags and attributes, and it supports mozilla's
css extensions (
css values and properties beginning with "-moz").
... adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browseroverlay.js (deflated 42%) adding: content/browseroverlay.xul (deflated 69%) adding: skin/browseroverlay.
css (stored 0%) adding: locale/browseroverlay.dtd (deflated 52%) adding: locale/browseroverlay.properties (stored 0%) creating xpi file.
...it's a very useful inspection tool that lets you look into the dom of html and xul documents, as well as applied
css rules and associated javascript objects.
...And 2 more matches
Case Sensitivity in class and id Names - Archive of obsolete content
summary: although
css is itself case-insensitive, class and id names are defined to be case-sensitive in html 4.01.
...in the authoring of both
css and javascript/dom (otherwise known as dhtml) routines, it is a near-certainty that class and id names will be used to identify elements.
...the most common case is where the name uses different case in the document source than is found in the
css or javascript.
...And 2 more matches
Styling - Archive of obsolete content
the web application bundle is allowed to hold a
css file named webapp.
css (called the webapp style).
...simply add the webapp.
css to the bundle and it will be injected into the web application, regardless of the platform or os.
...in this scenario, the
css file is specific to an os.
...And 2 more matches
Elements - Archive of obsolete content
from several bindings only the last in the sequence will be used (like with any
css rule).
... helloworld.html: <!doctype html public "-//w3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/
css"> p { -moz-binding: url(hello.xml#default); } #p03 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
...
css: div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline: div { -moz-binding: url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0...
...And 2 more matches
Complete - Archive of obsolete content
in this extension, the only things that depend on the theme are the icon images on the buttons and the
css style rules.
...for example, if you are using modern, it loads: skin/modern/allcustom/seamonkey/allcustom.
css from inside the jar.
...the application's chrome registry converts this to the correct
css file for the theme you are using.
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by adding the special
css rule -moz-user-focus: normal.
...many xul elements can be set to scroll using
css.
...if you find nested groupboxes visually unappealing, use
css to hide the border of the inner groupbox so that it can remain in the code to benefit users of assistive technologies.
...And 2 more matches
tooltip - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window.
...And 2 more matches
window - Archive of obsolete content
without including the
css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog.
... attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this
css include!!
...the
css height property may also be used.
...And 2 more matches
Theme changes in Firefox 3.5 - Archive of obsolete content
affected files details scrollbar.xml, xulscrollbars.
css the <gripper> element was removed from the scrollbar thumb button by bug 448704.
... global/checkbox.
css, global/radio.
css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x.
...if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow
css property to none on the affected element.
...And 2 more matches
Theme changes in Firefox 3 - Archive of obsolete content
the table lists both the changed xul file and the theme's corresponding
css file that you might need to update.
... filename
css file details changes to the default theme the table below lists changes made in the default theme for firefox 3; you can use this information as a starting point for figuring out the changes you need to make.
... all file list all platforms file description of change browser/themes/*/browser/browser.
css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
...And 2 more matches
Theme changes in Firefox 4 - Archive of obsolete content
the theme can now override the value by setting a special
css property on the toolbar.
... overriding the default values themes can override the value of the iconsize attribute on each toolbar by specifying a special value for the counter-reset
css property on the toolbar itself.
...
css property on the toolbar element value forced on the iconsize attribute counter-reset: largeicons; large counter-reset: smallicons; small for toolbars in the upper part of the window, the counter-reset property can be set using a
css rule that is applied depending on the user preference in the toolbar customization palette.
...And 2 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
to share the joy, i herein present a look into just one piece of the redesign, and how i accomplished certain effects using simple html and some
css.
...here's what one of those bits looks like once all the
css has been applied.
... ...or it would have been, except in some browsers the heading was drawn over the floated image, in contradiction to the
css specification.
...And 2 more matches
XForms Custom Controls - Archive of obsolete content
to really grasp the following information, a good understanding of xforms, xbl, javascript and
css is needed.
...here is a snippet from our .
css file to show the type of
css rule we would use to make such a determination.
...we recommend that you use this attribute to create the
css binding rule for your custom control.
...And 2 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
the solution fortunately, there are mozilla-specific
css-like rules that can be used to correct both problems.
... the following rule is derived from mozilla's html.
css file: *|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;} this rule tells gecko-based browsers to use the computed value of font-size for the marker's parent, which is the list item itself.
... since this rule is not valid
css, it will prevent the validation of any stylesheet that contains it.
...And 2 more matches
MDN Web Docs Glossary: Definitions of Web-related terms
n api apple safari application context argument aria arpa arpanet array ascii asynchronous atag attribute b bandwidth base64 baseline beacon bézier curve bidi bigint blink block block (
css) block (scripting) block cipher mode of operation boolean boot2gecko bootstrap bounding box breadcrumb brotli browser browsing context buffer c cache cacheable caldav call stack callback function canonical order canvas ...
...nstructor continuous media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler crlf cross axis cross-site scripting crud cryptanalysis cryptographic hash function cryptography csp csrf
css css object model (
cssom)
css pixel
css preprocessor d data structure decryption delta denial of service descriptor (
css) deserialization developer tools dhtml digest digital certificate distributed denial of service dmz dns doctyp...
...d lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to right) m main axis main thread markup mathml media media (audio-visual presentation) media (
css) metadata method microsoft edge microsoft internet explorer middleware mime mime type minification mitm mixin mobile first modem modern web apps modularity mozilla firefox mutable mvc n namespace nan nat...
...And 2 more matches
Accessibility - Learn web development
learning some html,
css, and javascript is useful if you want to become a web developer.
...to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html,
css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start.
... get started prerequisites to get the most out of this module, it would be a good idea to either work through at least the first two modules of the html,
css, and javascript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.
...And 2 more matches
Creating fancy letterheaded paper - Learn web development
objective: to test comprehension of
css box model, and other box-related features such as implementing backgrounds.
... starting point to get this assessment started, you should: make local copies of the html and
css — save them as index.html and style.
css in a new directory.
...you could paste the html and fill in the
css into one of these online editors.
...And 2 more matches
Combinators - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the different combinator selectors that can be used in
css.
... child combinator the child combinator (>) is placed between two
css selectors.
...it will be hard to reuse the
css rules as you have made the selector very specific to the location of that element in the markup.
...And 2 more matches
Test Your Skills: Fundamental layout comprehension - Learn web development
if you have worked through this module then you will have already covered the basics of what you need to know to do
css layout today, and to work with older
css as well.
... project brief you have been provided with some raw html, basic
css, and images — now you need to create a layout for the design, which should look just like the image below.
... basic setup you can download the html,
css, and a set of six images here.
...And 2 more matches
How can we design for all types of users? - Learn web development
for instance, if in your
css you declare this: body { font-size:16px; } … you are telling the browser that whatever happens, the font size must be 16 pixels.
... here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> </body> </html> a percent-based
css will look like this: body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */ the same problem expressed with ems: body { font-size:1em; } /* 1em = 1...
...(most designs are done in pixel-based software, so the math has to be done by the person coding the
css).
...And 2 more matches
Web forms — Working with user data - Learn web development
therefore, before you look at the other sections listed below we'd recommend that you go away and learn some
css and javascript first.
... the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html,
css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of related
css and javascript techniques to get the most out of them.
... introductory guides your first form the first article in our series provides your very first experience of creating a web form, including designing a simple form, implementing it using the right html elements, adding some very simple styling via
css, and how data is sent to a server.
...And 2 more matches
Marking up a letter - Learn web development
starting point to begin, get the raw text you need to mark up, and the the
css to style the html.
...the
css you'll add later will cause these to be right aligned, as it should be in the case in a classic letter layout.
... the provided
css should be included inside an appropriate tag.
...And 2 more matches
Image gallery - Learn web development
you could paste the html,
css and javascript into one of these online editors.
... if the online editor you are using doesn't have separate javascript/
css panels, feel free to put them inline <script>/<style> elements inside the html page.
... project brief you have been provided with some html,
css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program.
...And 2 more matches
Client-side storage - Learn web development
getting started first of all, make local copies of our index.html, style.
css, and index-start.js files into a new directory on your local machine.
...the
css provides some simple styling to make it clearer what is going on.
...this is already a great improvement to the user experience, but there is still one thing missing — the main html,
css, and javascript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection.
...And 2 more matches
Aprender y obtener ayuda - Learn web development
some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the
css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the
css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can...
... i want to learn html and
css so i can expand my job role to take over updating the content on our company website.
...for example: materials i need: a computer internet access pens and paper knowledge i need: how to use html,
css, javascript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).
...And 2 more matches
Web performance - Learn web development
building websites requires html,
css, and javascript.
... learning pathway while knowing html,
css, and javascript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance.
... it would also be helpful to go a bit deeper into these topics, with modules such as: introduction to html
css first steps javascript first steps once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main mdn web performance section, including overviews of performance apis, testing and analysis tools, and performance bottleneck gotchas.
...And 2 more matches
Properly configuring server MIME types - Learn web development
examples of mime types are: text/html for normal web pages text/plain for plain text text/
css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime media types.
... note: historically, firefox has loaded
css files even if they had the wrong mime type, as long as the html document that requested them was being processed in quirks mode.
...if your stylesheet comes from a different origin than the document, you must serve it with the correct mime type (text/
css).
...And 2 more matches
Client-Server Overview - Learn web development
an html page usually references javascript and
css pages), and will send separate http requests to download these files.
...the first part is called the header, and contains useful information about the request, in the same way that an html head contains useful information about an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=
css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozi...
... the url parameters (q=client%2bserver%2boverview&topic=apps&topic=html&topic=
css&topic=js&topic=api&topic=webdev).
...And 2 more matches
Starting our Svelte Todo list app - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... the class visually-hidden has no effect yet, because we have not included any
css.
... if you want to globally disable this warning you can add this onwarn handler to your rollup.config.js file inside the configuration for the svelte plugin, like this: plugins: [ svelte({ dev: !production,
css:
css => {
css.write('public/build/bundle.
css'); }, // warnings are normally passed straight to rollup.
...And 2 more matches
Introduction to cross browser testing - Learn web development
cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html,
css, and javascript languages.
...you need to think about: different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people might still be using, which don't support all the latest, shiniest
css and javascript features.
...before you even get to cross browser issues, you should have already fixed out bugs in your code (see debugging html, debugging
css, and what went wrong?
...And 2 more matches
Learn web development
beyond the basics: if you have a bit of knowledge already, the next step is to learn html and
css in detail: start with our introduction to html module and move on to our
css first steps module.
... moving onto scripting: if you are comfortable with html and
css already, or you are mainly interested in coding, you'll want to move on to javascript or server-side development.
... frameworks and tooling: after mastering the essentials of vanilla html,
css, and javascript, you should learn about client-side web development tools, and then consider digging into client-side javascript frameworks, and server-side website programming.
...And 2 more matches
Scroll-linked effects
scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the
css position or transform property.) you can find a sampling of such effects at
css scroll api: use cases.
...one way to implement this without the scroll event listener is to use the
css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
...instead, using the
css snap-points property will allow the browser to run the animation asynchronously, providing a smooth visual effect to the user.
...And 2 more matches
Midas
it only works with stylewith
css enabled.
... stylewith
css this command is used for toggling the format of generated content.
...an example of the differences is that the "bold" command will generate <b> if the stylewith
css command is false and generate
css style attribute if the stylewith
css command is true.
...And 2 more matches
nsIHTMLEditor
ntentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void set
cssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes attribute type description is
cssena...
...bled boolean a boolean which is true is the htmleditor has been instantiated with
css knowledge and if the
css pref is currently checked.
...this does not consider
css effect on display type.
...And 2 more matches
Thunderbird Configuration Files
there are three files you should know about: userchrome.
css used to change the appearance of the browser.
... usercontent.
css used to change the appearance of web pages.
... userchrome.
css this file sets the display rules for various elements in the thunderbird user interface and is located in the sub-folder called chrome in your profile folder.
...And 2 more matches
Examples of web and XML development using the DOM - Web APIs
rm name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's
css style properties, which can be retrieved and set from the dom.
...you can access these stylesheets and their rules individually using the stylesheet, style, and
cssrule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console.
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].
cssrules.length; j++) { dump( ss[i].
cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
...And 2 more matches
EffectTiming.fill - Web APIs
</div>
css content .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; posit...
...ion: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other
css involved in this example, the part that really matters for our purposes is the
css that styles the "box" element that we'll be animating.
... that
css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
...And 2 more matches
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this
css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add java...
...
css can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.
... each image has the
css class obj added to it, making it easy to find in the dom tree.
...And 2 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
the animationiteration event is sent when a
css animation reaches the end of an iteration.
... syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a
css animation has reached the end of an iteration while running on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div>
css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; pa...
...And 2 more matches
GlobalEventHandlers.ontransitioncancel - Web APIs
the transitioncancel event is sent when a
css transition is cancelled.
... syntax var transitioncancelhandler = target.ontransitioncancel; target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a
css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... html this simply creates a <div> which we'll style with
css below to make into a box that resizes and changes color and such.
...And 2 more matches
GlobalEventHandlers.ontransitionend - Web APIs
the transitionend event is sent to when a
css transition completes.
... syntax var transitionendhandler = target.ontransitionend; target.ontransitionend = function value a function to be called when a transitionend event occurs indicating that a
css transition has completed on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... html this simply creates a <div> which we'll style with
css below to make into a box that resizes and changes color and such.
...And 2 more matches
HTMLImageElement.naturalWidth - Web APIs
the htmlimageelement interface's read-only naturalwidth property returns the intrinsic (natural), density-corrected width of the image in
css pixels.
... this is the width the image is if drawn with nothing constraining its width; if you neither specify a width for the image nor place the image inside a container that limits or expressly specifies the image width, this is the number of
css pixels wide the image will be.
... syntax let naturalwidth = htmlimageelement.naturalwidth; value an integer value indicating the intrinsic width of the image, in
css pixels.
...And 2 more matches
KeyframeEffect.setKeyframes() - Web APIs
attributes keyframes may specify property-value pairs for any of the animatable
css properties.
... two exceptional
css properties are: float, which must be written as
cssfloat since "float" is a reserved word in javascript.
... it's just for reference here, this will have no effect on animation since "float" is not an animatable
css property.
...And 2 more matches
MouseEvent.pageX - Web APIs
the
cssom view module redefined it as a double float.
... this property was originally specified in the touch events specification as a long integer, but was redefined in the
cssom view module to be a double-precision floating-point number to allow for subpixel precision.
...
css the
css used for this example is shown below.
...And 2 more matches
StylePropertyMap - Web APIs
the stylepropertymap interface of the the
css typed object model api provides a representation of a
css declaration block that is an alternative to
cssstyledeclaration.
... stylepropertymap.append() adds a new
css declaration to the stylepropertymap with the given property and value.
... stylepropertymap.delete() removes the
css declaration with the given property.
...And 2 more matches
TransitionEvent - Web APIs
transitionevent.propertyname read only is a domstring containing the name
css property associated with the transition.
... types of transitionevent transitioncancel an event fired when a
css transition has been cancelled.
... transitionend an event fired when a
css transition has finished playing.
...And 2 more matches
Matrix math for the web - Web APIs
this article explores how to create matrices and how to use them with
css transforms and the matrix3d transform type.
... while this article uses
css to simplify explanations, matrices are a core concept used by many different technologies including webgl, the webxr (vr and ar) api, and glsl shaders.
... manipulating the dom with a matrix a really easy way to start using a matrix is to use the
css matrix3d() transform.
...And 2 more matches
Keyframe Formats - Web APIs
attributes keyframes may specify property-value pairs for any of the animatable
css properties.
... two exceptional
css properties are: float, which must be written as
cssfloat since "float" is a reserved word in javascript.
... it's just for reference here, this will have no effect on animation since "float" is not an animatable
css property.
...And 2 more matches
Web Animations API Concepts - Web APIs
the web animations api fills the gap between declarative
css animations and transitions, and dynamic javascript animations.
... this means we can use it to create and manipulate
css-like animations that go from one pre-defined state to another, or we can use variables, loops, and callbacks to create interactive animations that adapt and react to changing inputs.
...while four out of five browsers supported smil, it only animated svg elements, could not be used from
css, and was very complex — often leading to inconsistent implementations.
...And 2 more matches
Worklet - Web APIs
instead, you can use one of the following classes: name description location specification paintworklet for programmatically generating an image where a
css property expects a file.
... access this interface through
css.paintworklet.
... chrome: main thread gecko: paint thread
css painting api audioworklet for audio processing with custom audionodes.
...And 2 more matches
Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apic
css counter styles
css font loading api
cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture ...
...reunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection
css cssconditionrule
csscounterstylerule
cssgroupingrule
cssimagevalue
csskeyframerule
csskeyframesrule
csskeywordvalue
cssmathproduct
cssmathsum
cssmathvalue
cssmediarule
cssnamespacerule
cssnumericvalue
cssomstring
csspagerule
csspositionvalue
cssprimitivevalue
csspseudoelement
cssrule
cssrulelist
cssstyledeclaration
cssstylerule
cssstylesheet
cssstylevalue
csssupportsrule c...
...ssunitvalue
cssunparsedvalue
cssvalue
cssvaluelist
cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix domma...
...And 2 more matches
An overview of accessible web applications and widgets - Accessibility
sliders, menu bars, file list views, and more can be built with a combination of javascript,
css, and html.
... presentational changes dynamic presentational changes include using
css to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content.
...ndicates the state of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use
css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
...And 2 more matches
HTML5 - Developer guides
styling
css has been extended to be able to style elements in a much more complex way.
... this is often referred as
css3, though
css is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.
... new background styling features it is now possible to put shadows on elements using box-shadow, multiple backgrounds, and
css filters.
...And 2 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//example.com">scheme-relative url</a> <a href="/docs/web/html">origin-relative url</a> <a href="./p">directory-relative url</a>
css a { display: block; margin-bottom: 0.5em } result linking to an element on the same page <!-- <a> element links to the section below --> <p><a href="#section_further_down"> jump to the heading below </a></p> <!-- heading to link to --> <h2 id="section_further_down">section further down</h2> note: you can use href="#top" or the empty fragment (href="#") to link to the top of the curre...
... <a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas>
css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.cl...
...usually,
css hides a skip link offscreen until focused.
...And 2 more matches
<button>: The Button element - HTML: Hypertext Markup Language
by default, html buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with
css.
... example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of
css properties to remove it visually from the screen, but keep it parseable by assistive technology.
...a minimum interactive size of 44×44
css pixels is recommended.
...And 2 more matches
<input type="number"> - HTML: Hypertext Markup Language
you'll have to resort to
css to change the size of these controls.
... for example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far: <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> then we add some
css to narrow the width of the element with the id selector #number: #number { width: 3em; } the result looks like this: offering suggested values you can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value.
... the following example exhibits all of the above features, as well as using some
css to display valid and invalid icons, depending on the input's value: <form> <div> <label for="balloons">number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> <span class="validity"></span> </div> <div> <input type="submit"> </div> </form> try submitting the form with different inva...
...And 2 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
as this attribute is deprecated, use the
css text-align property instead.
... as this attribute is deprecated, use the
css background-color property instead.
... as this attribute is deprecated, use the
css vertical-align property instead.
...And 2 more matches
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
if none of the semantic elements are appropriate for your use case (for example, if you simply need to show some content in a non-proportional font), you should consider using the <span> element, styling it as desired using
css.
... <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using
css:
css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; } html <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result usage notes the <tt> element is, by default, rendered using the browser's default non-proportional font.
... you can override this using
css by creating a rule using the tt selector, as seen in the example overriding the default font above.
...And 2 more matches
<ul>: The Unordered List element - HTML: Hypertext Markup Language
warning: do not use this attribute, as it has been deprecated: use
css instead.
... to give a similar effect as the compact attribute, the
css property line-height can be used with a value of 80%.
... if not present and if no
css list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.
...And 2 more matches
MIME types (IANA media types) - HTTP
specifically if they download a text/plain file from a <link> element declaring a
css file, they will not recognize it as a valid
css file if presented with text/plain.
... the
css mime type text/
css must be used.
... text/
css css files used to style a web page must be sent with text/
css.
...And 2 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded, if
css has been applied that causes problems with its display size.
...to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using
css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above
css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0.
...folks from mozilla then expanded on this thinking, working on a proposal in the
css box sizing level 4 draft to define an aspect-ratio property and propose the idea of using the width and height attributes to compute layout.
...And 2 more matches
clip-path - SVG: Scalable Vector Graphics
note: as a presentation attribute clip-path can be used as a
css property.
... <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a
css basic shape on a fill-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a
css basic shape on a view-box geometry.
...And 2 more matches
direction - SVG: Scalable Vector Graphics
for other cases, such as when using right-to-left languages, it may be sufficient to add the direction attribute to the outermost <svg> element, and allow that direction to inherit to all text elements: note: as a presentation attribute, direction can be used as a
css property.
... see
css direction for further information.
... <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment
css writing modes module level 3the definition of 'direction' in that specification.
...And 2 more matches
font-family - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-family can be used as a
css property.
... see the
css font-family property for more information.
...xt> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace default value depends on user agent animatable yes for a description of the values, please refer to the
css font-family property.
...And 2 more matches
font-stretch - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-stretch can be used as a
css property.
... see the
css font-stretch property for more information.
...th>, <tref>, and <tspan> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal animatable yes specifications specification status comment
css fonts module level 4the definition of 'font-stretch' in that specification.
...And 2 more matches
font-style - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-style can be used as a
css property.
... see the
css font-style property for more information.
...{ height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the
css font-style property.
...And 2 more matches
font-variant - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-variant can be used as a
css property.
... see the
css font-variant property for more information.
... ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] default value normal animatable yes for a description of the values, please refer to the
css font-variant property.
...And 2 more matches
font-weight - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-weight can be used as a
css property.
... see the
css font-weight property for more information.
...height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the
css font-weight property.
...And 2 more matches
image-rendering - SVG: Scalable Vector Graphics
note: as a presentation attribute, image-rendering can be used as a
css property.
... see the
css image-rendering property for more information.
... specifications specification status comment
css images module level 3the definition of 'image-rendering' in that specification.
...And 2 more matches
letter-spacing - SVG: Scalable Vector Graphics
note: as a presentation attribute, letter-spacing can be used as a
css property.
... see the
css letter-spacing property for more information.
... height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the
css letter-spacing property.
...And 2 more matches
opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute, opacity can be used as a
css property.
... see the
css opacity property for more information.
... specifications specification status comment
css color module level 4the definition of 'opacity' in that specification.
...And 2 more matches
text-decoration - SVG: Scalable Vector Graphics
note: as a presentation attribute, text-decoration can be used as a
css property.
... see the
css text-decoration property for more information.
...="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes for a description of the values, please refer to the
css text-decoration property.
...And 2 more matches
unicode-bidi - SVG: Scalable Vector Graphics
note: as a presentation attribute, unicode-bidi can be used as a
css property.
... see the
css unicode-bidi property for more information.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value normal | embed | isolate | bidi-override | isolate-override | plaintext default value normal animatable no for a description of the values, please refer to the
css unicode-bidi property.
...And 2 more matches
word-spacing - SVG: Scalable Vector Graphics
note: as a presentation attribute, word-spacing can be used as a
css property.
... see the
css word-spacing property for more information.
... 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the
css letter-spacing property.
...And 2 more matches
writing-mode - SVG: Scalable Vector Graphics
(note that the inline-progression-direction can change within a <text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-mode can be used as a
css property.
... see the
css writing-mode property for more information.
... specifications specification status comment
css writing modes module level 3the definition of 'writing-mode' in that specification.
...And 2 more matches
SVG fonts - SVG: Scalable Vector Graphics
the <font-face> element is the svg equivalent of the
css @font-face declaration.
...in the example above the first and most important to be defined is font-family, the value of which can then be referenced in
css and svg font-family properties.
... the font-weight and font-style attributes have the same purpose as the equivalent descriptors in
css.
...And 2 more matches
2015 MDN Fellowship Program - Archive of obsolete content
required skills and experience experienced web developer with expertise in javascript,
css, html as well as with efficient network interaction (queuing resource fetching, etc.).
... required skills and experience experienced web developer with expertise in javascript,
css, html.
...you may propose your own subject area (examples: virtual reality on the web, network security,
css, etc.) or we will work with you to match you to the best subject based on your background and mozilla priorities.
... required skills and experience experienced web developer with expertise in javascript,
css, html and/or other key technologies.
page-mod - Archive of obsolete content
name: contentscriptwhen type: string by default, content scripts are attached after all the content (dom, js,
css, images) for the document has been loaded, at the time the window.onload event fires.
... the option takes a single string that may take any one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact with the document's dom right away (although they could listen for win...
... var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: data.url("style.
css") }); from firefox 34, you can use "./style.
css" as an alias for the resource:// url pointing to the stylesheet in your "data" directory.
... so you can rewrite the code above like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: "./style.
css" }); content styles specified by this option are loaded before those specified by the contentstyle option.
JavaScript Daemons Management - Archive of obsolete content
oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/
css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button on...
... oletter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/
css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposit...
...oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon.safe(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/
css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon.safe(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <butt...
... oletter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/
css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.safe.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fix...
Chapter 1: Introduction to Extensions - Archive of obsolete content
user style sheets (change appearance through
css) yes; you can change the usercontent.
css file, or use the stylish extension.
... yes; you can change the userchrome.
css file, or use the stylish extension.
...users have flexible customization options, using
css in user style sheets and javascript/dom in user scripts (these depend on stylish, greasemonkey, and userchrome.js).
... in addition to
css and javascript, extensions can take advantage of xul and xpcom technologies for more sophisticated features.
Adding windows and dialogs - Archive of obsolete content
there are also subtle aspects about window size, margins and paddings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog
css styles.
...if all you need is a border, use
css.
...you can change its style using
css in case you don't want the borders to appear.
... you can also use the -moz-user-focus
css property to enable focusing of elements that typically wouldn't receive focus.
The Essentials of an Extension - Archive of obsolete content
the skin section has the files that define most of the look and feel of the ui (using
css and images, just like web pages).
...we use camel casing for file names, and all lower case with dashes for element ids and
css style class names, but you're free to use your own system.
...there isn't much styling you can do to a minimal menu and a very simple alert message, so the hello world extension only includes an empty
css file and the compulsory global skin file: <?xml-stylesheet type="text/
css" href="chrome://global/skin/" ?> <?xml-stylesheet type="text/
css" href="chrome://xulschoolhello/skin/browseroverlay.
css" ?> the global skin
css file holds the default styles for all xul elements and windows.
...in our case we don't really need to include it, since we're overlaying the main browser xul file, and that file already includes this global
css.
Getting Started - Archive of obsolete content
skin\classic\global global contains almost all of the important
css files that define the appearance of the suite.
...skin\classic\messenger-newsblog messenger-newsblog contains the only
css file.
...
css files the
css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
...go into the global directory and open button.
css in your favorite text editor.
Menu - Archive of obsolete content
individual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus are those that arise from nodes that match the given
css selector(s).
... the selector must be a true
css selector, not a jquery or other type of pseudo-selector.
...parameters selector one or more
css selectors.
...nuitem.label) }); add an item to the hyperlink context menu that tweets the link: jetpack.menu.context.page.on("a").add(function (context) { return { label: "tweet", command: function () jetpack.lib.twitter.statuses.update({ status: context.node.href }) }; )); add an item to the page's context menu depending on some complex criteria that can't be completely expressed via a
css selector: jetpack.menu.context.page.beforeshow = function (menu, context) { menu.reset(); if (matchesmycriteria(context)) menu.add("match!"); }; add an item to both the hyperlink context menu and the image context menu: jetpack.menu.context.page.on("a, img").set("a link or image"); add an item to the image context menu, but only for images contained in hyperlinks: jetpack.menu.context.p...
Mozilla Application Framework in Detail - Archive of obsolete content
css is used to style these ui's and dtd's are used to localize the textual information - making your application extremely flexible and able to be utilized across the globe.
...themes are simply collections of images and
css which can augment or replace your current ui elements.
...gecko consists roughly of an html parser and xml parser, a dom implementation, a
css parser and style system, and the code for
css-based and html-based layout and rendering.
...gecko features full support for open internet standards such as
css1, html 4.0, dom1, rdf, xml and javascript.
Anonymous Content - Archive of obsolete content
because content in multiple scopes can be focused, the
css :focus pseudo-element is hierarchical.
... anonymous content and
css selectors and scopes bindings can interleave anonymous elements between the bound element and its explicit children.
... as far as
css is concerned, anonymous content nodes are children (or descendants) of the bound element, they are ancestors of explicit content, and they are siblings of the explicit content.
... the final modified content tree determines how
css properties (e.g., fonts and colors) are inherited.
XBL 1.0 Reference - Archive of obsolete content
bindings can be bound to elements using cascading style sheets (
css) or dom.
... bindings binding content children implementation constructor destructor field property getter setter method parameter body handlers handler resources stylesheet image binding attachment and detachment attachment using
css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handling dom changes event flow and targeting flow and...
... targeting across scopes focus and blur events mouseover and mouseout events anonymous content and
css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation.
... notes.html notes.xml notes.
css view this example download all files (.zip archive) need to ask to adjust the server - it gives "access denied" for zip files (?) references initial xbl 1.0 proposal submitted as a note to w3c (does not reflect mozilla implementation, nor future plans) xbl 2.0 project original document information last updated date: april 24, 2006 ...
Index - Archive of obsolete content
337 sizemode xul attributes, xul reference this attribute is used to save and restore the state of a window (together with the persist attribute) and for
css styles (e.g.
...its intended audience is extension developers with a basic knowledge of xul and
css.
... 973 writing skinnable xul and
css css, xul no summary!
...xul uses
css (cascading style sheets) to customize elements.
Building Trees - Archive of obsolete content
you cannot make each row a different height, but you can change the height of all rows with some
css: treechildren::-moz-tree-row { height: 150px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with all trees).
...using tree properties since we need to use special
css for trees, the properties attribute on a cell becomes extremely useful.
...for instance, consider the following
css: treechildren::-moz-tree-cell(dave) { background-color: lightgreen; } this would set the background color of a cell to green for any cell with the “dave” property.
..."?country"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following
css to change the border around rows listing a particular country: treechildren::-moz-tree-row(netherlands) { border: green 1px solid; } the result of this example is a tree where one row has a green border around it.
Anonymous Content - Archive of obsolete content
this way it can be referred to through the
css -moz-binding property.
...any element that has its
css -moz-binding property set to the uri of the binding will use it.
...for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu>
css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...this also applies to
css selector rules.
Creating a Window - Archive of obsolete content
the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements.
... <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> this line is used to specify the style sheets to use for the file.
...in this case, the all-important global.
css file is selected.
...make sure that you have included the stylesheet correctly: <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> in the next section, we will add some buttons to the window.
Element Positioning - Archive of obsolete content
the following
css properties can be used.
...note that the
css global skin of the xul application may also specify a min-width for the buttons and other elements, thus if simply setting the width property does not set the button width as you expect, try also to modify the button min-width property.
...you can also use the corresponding
css properties, min-width, min-height, max-width and max-height.
... example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties -moz-box-pack and -moz-box-align instead of ...
Using Remote XUL - Archive of obsolete content
after completing the tutorial you should understand how to: create xul documents; serve them from a web server; use cascading style sheets (
css) to change their appearance; use javascript to define their behavior.
... prerequisites to understand this tutorial you should have experience with tag-based languages like html along with basic javascript,
css, and the dom.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"> function loadurl(event) { var contentframe = document.getelementbyid("contentframe"); var url = event.target.getattribute("value"); if (url) contentframe.setattribute("src", url); } </script> ...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.
css" type="text/
css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by th...
...the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title.
listcell - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
...if it is desired to center the image, use
css to hide the label.
Archived Mozilla and build documentation - Archive of obsolete content
how to edit images, extract zip files, and how to modify
css.
... mozilla uses standard gif, png, and jpeg images for the buttons and
css to style everything else in the interface.
...it reports javascript-related errors and warnings,
css errors and arbitrary messages from chrome code.
... table layout strategy the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and
css2.1 (chapter 17).in
css2 a distinction between fixed and auto layout of tables has been introduced.
Sunbird Theme Tutorial - Archive of obsolete content
you also need knowledge of: using your operating system to create files and directories using the tools listed above
css graphic design knowledge of xul, xbl and javascript is useful for advanced themes.
... modifying your theme to modify your theme, change the
css and image files in any way you like.
...edit the file <tt>calendar.
css</tt> there.
...the javascript console window displays
css errors, not just javascript errors.
Efficient animation for web games - Game development
we touch on
css transitions and
css animations, and javascript loops involving window.requestanimationframe.
... help the browser help you if you are using dom for your ui, which i would certainly recommend, you really ought to use
css transitions and/or
css animations, rather than javascript-powered animations.
...the reason for this is that
css transitions/animations are much higher level than javascript, and express a very specific intent.
... to take a concrete example, if you start a
css transition to move something from off-screen so that it is fully visible on-screen, the browser knows that the related content will end up completely visible to the user and can then pre-render that content.
Flex - MDN Web Docs Glossary: Definitions of Web-related terms
flex is a new value added to the
css display property.
...the items then participate in flex layout, and all of the properties defined in the
css flexible box layout module may be applied.
... in addition <flex> can refer to a flexible length in
css grid layout.
... learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading
css flexible box layout module level 1 specification
css flexbox guide: basic concepts of flexbox
css flexbox guide: relationship of flexbox to other layout methods
css flexbox guide: aligning items in a flex container
css flexbox guide: ordering flex items
css flexbox guide: controlling ratios of flex items along the main axis
css flexbox guide: mastering wrapping of flex items
css flexbox guide: typical use cases of flexbox ...
Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
css grid layout is a two-dimensional layout method enabling the laying out of content in rows and columns.
... in
css the block or column axis is the axis used when laying out blocks of text.
...these are our rows in
css grid layout.
... learn more further reading
css grid layout guide: basic concepts of grid layout
css grid layout guide: box alignment in grid layout
css grid layout guide: grids, logical values and writing modes ...
Stylesheet - MDN Web Docs Glossary: Definitions of Web-related terms
a stylesheet is a set of
css rules used to control the layout and design of a webpage or document.
... internal stylesheets are placed inside a <style> element inside the <head> of a web document, and external stylesheets are placed inside a separate .
css file, which is applied to a document by referencing the file inside a <link> element in the document's head.
... external stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the
css across each page.
... learn more general knowledge
css first steps stylesheets on wikipedia ...
Normal Flow - Learn web development
previous overview:
css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
... prerequisites: the basics of html (study introduction to html), and an idea of how
css works (study introduction to
css.) objective: to explain how browsers layout web pages by default, before we begin to make changes.
... as detailed in the last lesson introducing layout, elements on a webpage lay out in the normal flow, if you have not applied any
css to change the way they behave.
... previous overview:
css layout next in this module introduction to
css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
What is a URL? - Learn web development
such resources can be an html page, a
css document, an image, etc.
... other technologies, such as
css or javascript, use urls extensively, and these are really the heart of the web.
...so in this example, we really want to reach this url: https://developer.mozilla.org/docs/learn/skills/infrastructure/understanding_urls going back in the directory tree ../
css/display in this case, we use the ../ writing convention — inherited from the unix file system world — to tell the browser we want to go up from one directory.
... here we want to reach this url: https://developer.mozilla.org/docs/learn/../
css/display, which can be simplified to: https://developer.mozilla.org/docs/
css/display semantic urls despite their very technical flavor, urls represent a human-readable entry point for a web site.
Other form controls - Learn web development
note that even though you can put anything inside a <textarea> element (including other html elements,
css, and javascript), because of its nature, it is all rendered as if it was plain text content.
...this is effectively the starting width, as it can be changed by resizing the <textarea>, and overriden using
css.
...this is effectively the starting height, as it can be changed by resizing the <textarea>, and overriden using
css.
... controlling textarea resizability the ability to resize a <textarea> is controlled with the
css resize property.
Using data attributes - Learn web development
css access note that, as data attributes are plain html attributes, you can even access them from
css.
... for example to show the parent data on the article you can use generated content in
css with the attr() function: article::before { content: attr(data-parent); } you can also use the attribute selectors in
css to change styles according to the data: article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; } you can see all this working together in this jsbin example.
...using the
css selectors and javascript access here this allows you to build some nifty effects without having to write your own display routines.
... see this screencast for an example using generated content and
css transitions (jsbin example).
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
note: if you want to perform some kind of simple constant dom animation,
css animations are probably faster.
... note: in a real world example, you should probably use
css animations to run this kind of simple animation.
... apply the following
css to the html template (in whatever way you prefer).
...this contains the finished html structure and
css styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another.
Build your own function - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, javascript first steps, functions — reusable blocks of code.
...we've also provided some basic
css to style the custom message box, and an empty <script> element to put our javascript in.
...this is to make it easier to style the element — if you look at the
css on the page, you'll see that we are using a .msgbox class selector to style the message box and its contents.
...(the actual icon pages were since moved or removed.) next, find the
css inside your html file.
A first splash into JavaScript - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, an understanding of what javascript is.
...queryselector() takes one piece of information — a
css selector that selects the element you want a reference to.
...try entering the below lines, one by one: guesses.style.backgroundcolor = 'yellow'; guesses.style.fontsize = '200%'; guesses.style.padding = '10px'; guesses.style.boxshadow = '3px 3px 6px black'; every element on a page has a style property, which itself contains an object whose properties contain all the inline
css styles applied to that element.
... this allows us to dynamically set new
css styles on elements using javascript.
Adding features to our bouncing balls demo - Learn web development
objective: to test comprehension of javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.
css, and main-finished.js from our last article in a new directory in your local computer.
...you could paste the html,
css and javascript into one of these online editors.
... if the online editor you are using doesn't have separate javascript/
css panels, feel free to put them inline <script>/<style> elements inside the html page.
... in your
css file, add the following rule at the bottom: p { position: absolute; margin: 0; top: 35px; right: 5px; color: #aaa; } in your javascript, make the following updates: create a variable that stores a reference to the paragraph.
Ember app structure and componentization - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... planning out the layout of the todomvc app in the last article we set up a new ember project, then added and configured our
css styles.
...this is because the default
css absolutely positions the checkbox + label with negative top and left values to move it next to the input, rather than it being inside the "main" section.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
React resources - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... create-react-app makes it possible to import
css files into javascript modules, so that
css is only sent to your user when the corresponding component is rendered.
... for this app, we could have for example written a dedicated form.
css file to house the styles of those respective components, then imported the styles into their respective modules like this: import form from './form'; import './form.
css' this approach makes it easy to identify and manage the
css that belongs to a specific component.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Working with Svelte stores - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... at the end we include a few
css lines to style our alert component.
...svelte also supports specifying different transitions to apply when the element is added or removed from the dom with the in:fn/out:fn directives, and it also allows you to define your custom
css and javascript transitions.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Strategies for carrying out testing - Learn web development
cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high level principles of cross-browser testing.
... you may notice from the text in the example that it won't work in ie8 — this is a problem according to our support chart, which you'll have to work on, perhaps by using a feature detection library to implement the functionality in a different way if the browser doesn't support
css transitions (see implementing feature detection, later on in the course).
... next we'll turn our attention to the actual code issues your testing might uncover, starting with html and
css.
... previous overview: cross browser testing next in this module introduction to cross-browser testing strategies for carrying out testing handling common html and
css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...
Setting up your own test automation environment - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages; an idea of the high-level principles of cross browser testing, and automated testing.
...for example, to select an element by id: const element = driver.findelement(by.id('myelementid')); one of the most useful ways to find an element by
css — the by.
css method allows you to select an element using a
css selector enter the following at the bottom of your quick_test.js code now: const button = driver.findelement(by.
css('button:nth-of-type(1)')); testing your element there are many ways to interact with your web documents and elements on them.
...in general, you should make sure that your tests are: using good locator strategies: when you are interacting with the document, make sure that you use locators and page objects that are unlikely to change — if you have a testable element that you want to perform a test on, make sure that it has a stable id, or position on the page that can be selected using a
css selector, which isn't going to just change with the next site iteration.
... previous overview: cross browser testing in this module introduction to cross browser testing strategies for carrying out testing handling common html and
css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...
Gecko info for Windows accessibility vendors
it supports html, xhtml, cascading style sheets (
css) and the document object model (dom).
...similar to html in that it can be combined with
css and javascript to make powerful applications.
...ingbounds( [in] unsigned int startindex, [in] unsigned int endindex, [out] int *x, [out] int *y, [out] int *width, [out] int *height); // scroll to this part of the subsstring hresult scrolltosubstring( [in] unsigned int startindex, [in] unsigned int endindex); // get the current font being used -- this is better than using // the isimpledomnode
css property methods, because it provides // a single font name, rather than a comma delineated list of possibilities hresult fontfamily([out] bstr *fontfamily); isimpledomdocument there is one isimpledomdocument interface for each xml or html document in gecko, which you can use to get important information global to the document.
...similar to html in that it can be combined with
css and javascript to make powerful applications.
HTMLIFrameElement.sendTouchEvent()
x an array of numbers representing the x position of each touch point relative to the browser <iframe>'s visible area in
css pixels.
... y an array of numbers representing the y position of each touch point relative to the browser <iframe>'s visible area in
css pixels.
... rx an array of numbers representing the x radius of each touch point in
css pixels.
... ry an array of numbers representing the y radius of each touch point in
css pixels.
Fonts for Mozilla 2.0's MathML engine
furthermore, in accordance with the w3c
css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of
css), with the assurance that mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system.
...mathml font selection with
css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the...
...finally, include the mathml-fonts/resource/mathml.
css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.
css'); browsers have default font-families in their user agent stylesheets.
...for example to force the use of stix fonts: math { font-family: stixgeneral; } ::-moz-math-stretchy { font-family: stixnonunicode, stixsizeonesym, stixsize1, stixgeneral; } try the mathml torture test to compare the rendering of various fonts and the
css rules to select them.
nsIBoxObject
height long the height of the box, in
css pixels.
... width long the width of the box, in
css pixels.
... x long the x coordinate of the box, in
css pixels.
... y long the y coordinate of the box, in
css pixels.
Mozilla
adding a new
css property this page describes how to add a new
css property to the style system.
...gecko's function is to render web content, such as html,
css, xul, javascript, and render it on the user's screen or print it.
...changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/ns
cssframeconstructor.cpp getting started with chat note that on 2nd march 2020, mozilla moved away from irc to matrix for its public channels, the irc server was shut down.
... mozilla style system the style system is the module of mozilla's code responsible for the loading and parsing of
css style sheets, and the computation of computed values for all
css properties.
Plug-in Basics - Plugins
though the object element has no hidden attribute, you can create
css rules to override the sizing attributes of the object element object { visibility: visible; } object.hiddenobject { visibility: hidden !important; width: 0px !important; height: 0px !important; margin: 0px !important; padding: 0px !important; border-style: none !important; border-width: 0px !important; max-width: 0px !important;...
...using the class attribute and the
css block above, you can simulate the behavior of the hidden plug-in in the embed element: <object data="audiplay.aiff" type="audio/x-aiff" class="hiddenobject"></object> a full-page plug-in is a visible plug-in that is not part of an html page.
... example 1: nesting object elements <html> <head> <title>example 1: nesting object elements</title> <style type="text/
css"> .myplugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <pa...
...in general, use
css to control the size and location of elements within an html page.
Web Console Helpers - Firefox Developer Tools
$(selector, element) looks up a
css selector string selector , returning the first node descended from element that matches.
... $$(selector, element) looks up a
css selector string selector, returning an array of dom nodes descended from element that match.
... --selector string the
css query selector for a single element on the page.
... let's take a look at the contents of that node by using the $() and inspect() functions: inspect($("#title")) this automatically generates rich output for the object, showing you the contents of the dom node that matches the
css selector "#title", which is of course the element with id "title".
The JavaScript input interpreter - Firefox Developer Tools
there are three ways to select an iframe using cd(): you can pass the iframe dom element: var frame = document.getelementbyid("frame1"); cd(frame); you can pass a
css selector that matches the iframe: cd("#frame1"); you can pass the iframe's global window object: var frame = document.getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a document that embeds an iframe: <!doctype html> <html> <head> <meta charset="utf-8"> </head> <...
... $(selector, element) looks up a
css selector string selector , returning the first node descended from element that matches.
... $$(selector, element) looks up a
css selector string selector, returning an array of dom nodes descended from element that match.
... --selector string the
css query selector for a single element on the page.
Web Console remoting - Firefox Developer Tools
network logging the networkevent packet whenever a new network request starts being logged the networkevent packet is sent: { "from": "conn0.console10", "type": "networkevent", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2012-09-17t19:50:03.699z", "url": "http://localhost/~mihai/mozilla/test2.
css", "method": "get" "isxhr": false, "private": false } } this packet is used to inform the web console of a new network event.
...gs", "totaltime": 1 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responseheaders", "headers": 6, "headerssize": 194 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecookies", "cookies": 0 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecontent", "mimetype": "text/
css", "contentsize": 0, "discardresponsebody": true } actual headers, cookies, and bodies are not sent.
... the getrequestpostdata packet: { "to": "conn0.netevent15", "type": "getrequestpostdata" } { "from": "conn0.netevent15", "postdata": { text: "foobar" }, "postdatadiscarded": false } the getresponsecontent packet: { "to": "conn0.netevent15", "type": "getresponsecontent" } { "from": "conn0.netevent15", "content": { "mimetype": "text/
css", "text": "\n@import \"test.
css\";\n\n.foobar { color: green }\n\n" }, "contentdiscarded": false } the request and response content text value is most commonly sent using a longstringactor grip.
...s" } { "from": "conn0.netevent15", "timings": { "blocked": 0, "dns": 0, "connect": 0, "send": 0, "wait": 16, "receive": 0 }, "totaltime": 16 } the fileactivity packet when a file load is observed the following fileactivity packet is sent to the client: { "from": "conn0.console9", "type": "fileactivity", "uri": "file:///home/mihai/public_html/mozilla/test2.
css" } history protocol changes by firefox version: firefox 18: initial version.
Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the
css background for a background with a given background element id.
... syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element
css function.
... <style type="text/
css"> #mybox { background-image: -moz-element(#canvasbg); text-align: center; width: 400px; height: 400px; cursor: pointer; } </style> the
css defined by the <style> block above is used by our <div> to use an element with the id "canvasbg" as its background.
... once the canvas is drawn, document.mozsetimageelement() is called to set the background for any
css using the id "canvasbg" as its background element id to be our new canvas.
Element - Web APIs
element.computedstylemap() returns a stylepropertymapreadonly interface which provides a read-only representation of a
css declaration block that is an alternative to
cssstyledeclaration.
... element.pseudo() returns a
csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector.
... also available via the ontouchstart property specifications specification status comment
css pseudo-elements level 4the definition of 'element' in that specification.
...
css object model (
cssom) view modulethe definition of 'element' in that specification.
FontFace.display - Web APIs
this property is equivalent to the
css font-display descriptor.
... syntax var display = fontface.display fontface.display = display value a
cssomstring with one of the following values.
... specifications specification status comment
css font loading module level 3the definition of 'display' in that specification.
...
css fonts module level 4the definition of 'font-display' in that specification.
FontFaceSet - Web APIs
the fontfaceset interface of the
css font loading api manages the loading of font-faces and querying of their download status.
...
css-connected fonts are unaffected.
...
css-connected fonts are unaffected.
... specifications specification status comment
css font loading module level 3the definition of 'fontfaceset' in that specification.
HTMLElement: animationcancel event - Web APIs
the animationcancel event is fired when a
css animation unexpectedly aborts.
...this might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using
css.
...ed'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div>
css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const anim...
...'click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment
css animations working draft initial definition ...
HTMLImageElement.alt - Web APIs
ut nunc neque, porta eu auctor at, tempor et arcu.</p> </div> </div>
css the
css for this example simply sets up the styles for the layout as shown in the result below.
... they're not crucial to the concept shown in the html above, but you may expand the view below if you wish to read the
css used.
... view the
css editors: if you change the
css below, please be sure to close the details box using the toggle at the top of the
css view before saving.
... </p> </div>
css the main feature of the
css here is the use of clip-path and shape-outside to wrap the text around the icon in an appealing way.
HTMLImageElement.border - Web APIs
instead, you should use
css to style the border.
... syntax htmlimageelement.border = thickness; let thickness = htmlimageelement.border; value a domstring containing an integer value specifying the thickness of the border that should surround the image, in
css pixels.
...instead, use the
css border property and its longhand properties to establish borders around images.
... for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using
css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification.
HTMLImageElement.naturalHeight - Web APIs
the htmlimageelement interface's naturalheight property is a read-only value which returns the intrinsic (natural), density-corrected height of the image in
css pixels.
... syntax let naturalheight = htmlimageelement.naturalheight; value an integer value indicating the intrinsic height, in
css pixels, of the image.
... example this example simply displays both the natural, density-adjusted size of an image as well as its rendered size as altered by the page's
css and other factors.
...
css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { padding-top: 2em; } the main thing of note in the
css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
HTMLVideoElement - Web APIs
htmlvideoelement.height is a domstring that reflects the height html attribute, which specifies the height of the display area, in
css pixels.
... htmlvideoelement.videoheight read only returns an unsigned integer value indicating the intrinsic height of the resource in
css pixels, or 0 if no media is available yet.
... htmlvideoelement.videowidth read only returns an unsigned integer value indicating the intrinsic width of the resource in
css pixels, or 0 if no media is available yet.
... htmlvideoelement.width is a domstring that reflects the width html attribute, which specifies the width of the display area, in
css pixels.
Timing element visibility with the Intersection Observer API - Web APIs
we'll be using
css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> ...
... styling the site with
css with the structure of the site defined, we turn to the styling for the site.
... the wrapper establishes a
css grid with two columns and two rows.
...it's fairly basic
css.
LinkStyle - Web APIs
the linkstyle interface provides access to the associated
css style sheet of a node.
... linkstyle.sheet read only returns the
cssstylesheet object associated with the given element, or null if there is none.
... specifications specification status comment
css object model (
cssom)the definition of 'linkstyle' in that specification.
... working draft linkstyle.sheet returns more specialized
cssstylesheet instead of stylesheet document object model (dom) level 2 style specificationthe definition of 'linkstyle' in that specification.
Using the MediaStream Recording API - Web APIs
css goodies the html is pretty simple in this app, so we won't go through it here; there are a couple of slightly more interesting bits of
css worth mentioning, however, so we'll discuss them below.
... if you are not interested in
css and want to get straight to the javascript, skip to the basic app setup section.
... keeping the interface constrained to the viewport, regardless of device height, with calc() the calc() function is one of those useful little utility features that's cropped up in
css that doesn't look like much initially, but soon starts to make you think "wow, why didn't we have this before?
... why was
css2 layout so awkward?" it allows you do a calculation to determine the computed value of a
css unit, mixing different units in the process.
PaintWorklet.registerPaint - Web APIs
the paintworklet.registerpaint() method of the paintworklet interface registers a class programmatically generate an image where a
css property expects a file.
...the file itself is loaded through
css.paintworklet.addmodule() (documented here on the parent class of paintworklet, at worklet.addmodule().
...to use it, you register it with the
css.paintworklet.addmodule() method: <script>
css.paintworklet.addmodule('checkboardworklet.js'); </script> you can then use the paint()
css function in your
css anywhere an <image> value is valid.
... li { background-image: paint(checkerboard); } specifications specification status comment
css painting api level 1the definition of 'paintworklet.registerpaint' in that specification.
SVGStylable - Web APIs
interface overview also implement none methods
cssvalue getpresentationattribute(in domstring name) properties readonly svganimatedstring classname readonly
cssstyledeclaration style normative document svg 1.1 (2nd edition) properties name type description classname svganimatedstring corresponds to attribute class on the given element.
... style
cssstyledeclaration corresponds to attribute style on the given element.
... methods name & arguments return description getpresentationattribute(in domstring name)
cssvalue returns the base (i.e., static) value of a given presentation attribute as an object of type
cssvalue.
... the returned object is live; changes to the objects represent immediate changes to the objects to which the
cssvalue is attached.
Screen.availHeight - Web APIs
the read-only screen interface's availheight property returns the height, in
css pixels, of the space available for web content on the screen.
... syntax let availheight = window.screen.availheight; value a numeric value indicating the number of
css pixels tall the screen's available space is.
... for instance, on a mac whose dock is located at the bottom of screen (which is the default), the value of availheight is approximately the value of height (the total height of the screen in
css pixels) minus the heights of the dock and menu bar, as seen in the diagram below.
... specifications specification status comment
css object model (
cssom) view modulethe definition of 'screen.availheight' in that specification.
StylePropertyMapReadOnly.get() - Web APIs
the get() method of the stylepropertymapreadonly interface returns a
cssstylevalue object for the first value of the specified property.
... return value a
cssstylevalue object.
...let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of
css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
...t styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const
cssproperty = document.createelement('dt');
cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(
cssproperty); // values const
cssvalue = document.createelement('dd');
cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(
cssvalue); } specifications specification status comment c...
StylePropertyMapReadOnly.getAll() - Web APIs
the getall() method of the stylepropertymapreadonly interface returns an array of
cssstylevalue objects containing the values for the provided property.
... syntax var
cssstylevalues[] = stylepropertymapreadonly.getall(property) parameters property the name of the property to retrieve all values of.
... return value an array of
cssstylevalue objects.
... example // tbd specifications specification status comment
css typed om level 1the definition of 'getall()' in that specification.
Boilerplate 1 - Web APIs
boilerplate code for setting up webgl rendering context by now you are quite used to seeing the same pieces of html,
css, and javascript repeated again and again.
...the
css contains rules for body, canvas, and button.
... any additional non-trivial
css and html will be displayed on the pages of specific examples.
...]</button> <canvas>your browser does not seem to support html5 canvas.</canvas>
css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; ...
Web audio spatialization basics - Web APIs
first, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up
css transforms to actually do the movement.
... finally, we'll set some bounds so our boombox doesn't move too far in any direction: const movecontrols = document.queryselector('#move-controls').queryselectorall('button'); const boombox = document.queryselector('.boombox-body'); // the values for our
css transforms let transform = { xaxis: 0, yaxis: 0, zaxis: 0.8, rotatex: 0, rotatey: 0 } // set our bounds const topbound = -posy; const bottombound = posy; const rightbound = posx; const leftbound = -posx; const innerbound = 0.1; const outerbound = 1.5; let's create a function that takes the direction we want to move as a parameter, and both modifies the
css transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.
...ll convert into a radian range value for use in math.sin and math.cos later, when we want to figure out the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out degrees rotated, which will help with the
css transforms we will have to create (note we need both an x and y-axis for the
css transforms): // get degrees for
css const degreesx = (q * 180)/math.pi; const degreesy = (q * 180)/math.pi; let's take a look at our left rotation as an example.
...tion about x-axis with positive angle increment z = panner.orientationz.value*math.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; one last thing — we need to update the
css and keep a reference of the last move for the mouse event.
Window.scrollY - Web APIs
a fully compatible example: var supportpageoffset = window.pagexoffset !== undefined; var is
css1compat = ((document.compatmode || "") === "
css1compat"); var x = supportpageoffset ?
... window.pagexoffset : is
css1compat ?
...window.pageyoffset : is
css1compat ?
... document.documentelement.scrolltop : document.body.scrolltop; specification specification status comment
css object model (
cssom) view modulethe definition of 'window.scrolly' in that specification.
Operable - Accessibility
this is often achieved using "skip links" — links put at the top of the page source that link to the main content and are hidden by
css.
...if you need to place elements in an unusual layout, it is better to make sure the source order is sensible, then use
css features like positioning to handle the layout.
...this is usually a dotted or blue outline by default (depending on browser, platform, etc.), but this can be overidden by
css.
... understanding motion actuation 2.5.5 target size (aaa) added in 2.1 the size of an actionable item's touch target must be at least 44
css pixels in both width and height.
Creating a cross-browser video player - Developer guides
the controls are initially hidden with a
css display:none and will be enabled with javascript.
...this span has a solid
css background colour, which helps it provide the same visual feedback as a <progress> element.
...the custom controls will only appear on this browser in fullscreen mode with some webkit specific
css: the default browser controls have to be hidden with video::-webkit-media-controls { display:none !important; } the custom controls container needs to have a special z-index value: .controls { z-index:2147483647; } dealing with webkit-specific code in this way will affect all webkit browsers, but everything works as expected in more advanced webkit browsers such as chrome and the latest ope...
... var setfullscreendata = function(state) { videocontainer.setattribute('data-fullscreen', !!state); } this is used simply to set some basic
css to improve the styling of the custom controls when they are in fullscreen (see the sample code for further details).
Constraint validation - Developer guides
(this is typically done by the user-agent when determining which of the
css pseudo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user.
... controlling the look of elements the look of elements can be controlled via
css pseudo-classes.
... :required and :optional
css pseudo-classes the :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it.
... :placeholder-shown
css pseudo-class see :placeholder-shown :valid :invalid
css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting.
<big>: The Bigger Text element - HTML: Hypertext Markup Language
instead web developers should use the
css font-size property to adjust the font size.
... examples here we see examples showing the use of <big> followed by an example showing how to accomplish the same results using modern
css syntax instead.
...<big>this whole sentence is in bigger letters.</big> </p> result using
css font-size this example uses the
css font-size property to increase the font size by one level.
...
css .bigger { font-size: larger; } html <p> this is the first sentence.
<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
this tag has been deprecated in html 4 (and xhtml 1) in favor of the
css text-align property, which can be applied to the <div> element or to an individual <p>.
... for centering blocks, use other
css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).
...<p>so will this paragraph.</p></center> example 2 (
css alternative) <div style="text-align:center">this text will be centered.
... <p>so will this paragraph.</p></div> example 3 (
css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged.
<div>: The Content Division element - HTML: Hypertext Markup Language
it has no effect on the content or layout until styled using
css.
...instead, you should use
css properties or techniques such as
css grid or
css flexbox to align and position <div> elements on the page.
...you name it!</p> </div> the result looks like this: a styled example this example creates a shadowed box by applying a style to the <div> using
css.
... html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div>
css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<input type="color"> - HTML: Hypertext Markup Language
only simple colors (without alpha channel) are allowed though
css colors has more formats, e.g.
...in particular, you can't use
css's standardized color names, or any
css function syntax, to set the value.
... this makes sense when you keep in mind that html and
css are separate languages and specifications.
...if you have colors that are in any other format (such as
css color names or
css color functions such as rgb() or rgba()), you'll have to convert them to hexadecimal before setting the value.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
living standard make it obsolete in favor of
css but define its expected behavior, for backward compatibility.
... however, the development of the marquee features of
css have since been abandoned.
... recommendation make it obsolete in favor of
css but define its expected behavior, for backward compatibility.
... however, the development of the marquee features of
css have since been abandoned.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
to achieve such an effect, use
css width instead.
...though technically still implemented, this attribute has no visual effect; to achieve such an effect, use
css width instead.
...in modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use
css white-space instead.
... example html <p>using
css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text.
<style>: The Style Information element - HTML: Hypertext Markup Language
it contains
css, which is applied to the contents of the document containing the <style> element.
...this attribute is optional and defaults to text/
css if it is not specified; values other than the empty string or text/
css are not used.
... this attribute may be re-introduced in the future per https://github.com/w3c/
csswg-drafts/issues/3547.
... permitted content text content matching the type attribute, that is text/
css.
<var>: The Variable element - HTML: Hypertext Markup Language
usage notes related elements other elements that are used in contexts in which <var> is commonly used include: <code>: the html code element <kbd>: the html keyboard input element <samp>: the html sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate
css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>.
... this can be overridden in
css, like this: var { font: bold 15px "courier", "courier new", monospace; } examples basic example here's a simple example, using <var> to denote variable names in a mathematical equation.
... <p>a simple equation: <var>x</var> = <var>y</var> + 2 </p> the output: overriding the default style using
css, you can override the default style for the <var> element.
...
css var { font: bold 15px "courier", "courier new", monospace; } html <p>the variables <var>minspeed</var> and <var>maxspeed</var> control the minimum and maximum speed of the apparatus in revolutions per minute (rpm).</p> this html uses <var> to enclose the names of two variables.
Global attributes - HTML: Hypertext Markup Language
classes allows
css and javascript to select and access specific elements via the class selectors or functions like the method document.getelementsbyclassname().
...its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with
css).
...part names allows
css to select and style specific elements in a shadow tree via the ::part pseudo-element.
... style contains
css styling declarations to be applied to the element.
HTTP headers - HTTP
content-dpr a number that indicates the ratio between physical pixels over
css pixels of the selected image response.
... dpr a number that indicates the client’s current device pixel ratio (dpr), which is the ratio of physical pixels over
css pixels (section 5.2 of [
cssval]) of the layout viewport (section 9.1.1 of [
css2]) on the device.
... viewport-width a number that indicates the layout viewport width in
css pixels.
... x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images,
css, javascript, and so forth.
Using images in HTML - Web media technologies
references these articles cover some of the html elements and
css properties that are used to control how images are displayed on the web.
...
css object-fit the object-fit
css property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
... object-position the object-position
css property specifies the alignment of content in a selected replaced element within the element's box.
... background-image the background-image
css property sets one or more background images for an element.
display - SVG: Scalable Vector Graphics
note: as a presentation attribute, display can be used as a
css property.
... see
css display for further information.
...p | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid animatable yes for a description of the values, please refer to the
css display property.
... candidate recommendation refers to the
css 2 specification of the display property, but outlines the differences regarding svg.
font-size - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-size can be used as a
css property.
... see the
css font-size property for more information.
... height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the
css font-size property.
... specifications specification status comment
css fonts module level 3the definition of 'font-size' in that specification.
<use> - SVG: Scalable Vector Graphics
(this differs from how
css style attributes override those set 'earlier' in the cascade).
... since the cloned nodes are not exposed, care must be taken when using
css to style a use element and its cloned descendants.
...
css properties are not guaranteed to be inherited by the cloned dom unless you explicitly request them using
css inheritance.
... note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as
css properties for that element.
SVG: Scalable Vector Graphics
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including
css, dom, javascript, and smil.
... applying svg effects to html content svg works together with html,
css and javascript.
... other resources: xml,
css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript.
... connect 4 jvectormap (interactive maps for data visualization) jointjs (javascript diagramming library) d3 ( javascript library for visualizing data with html, svg, and
css ) ...
context-menu - Archive of obsolete content
selectorcontext(selector) this context occurs when the menu is invoked on a node that either matches selector, a
css selector, or has an ancestor that matches.
... selectorcontext(selector) creates a context that matches a given
css selector.
... parameters selector : string a
css selector.
ui - Archive of obsolete content
from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html,
css and javascript.
...this document can refer to bundled
css and javascript files, and your main add-on can communicate with a frame script using message passing.
...this document can refer to bundled
css and javascript files, and your main add-on can communicate with a frame script using message passing.
widget - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the widget has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the widget has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget view is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the widget view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
dev/panel - Archive of obsolete content
with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behavior using html,
css, and javascript.
...ee = null; }, onready: function() { // in this function you can communicate // with the panel document } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include
css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.
css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.
css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { va...
ui/button/action - Archive of obsolete content
by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a
css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor =...
... badgecolor
css <color> value new in firefox 36.
... color for the badge, specified as a
css <color> value.
ui/button/toggle - Archive of obsolete content
by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a
css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor =...
... badgecolor
css <color> value new in firefox 36.
... color for the badge, specified as a
css <color> value.
ui/sidebar - Archive of obsolete content
you specify its content using html,
css, and javascript, and the user can show or hide it in the same way they can show or hide the built-in sidebars.
...so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and
css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself.
... <!doctype html> <html> <head> <link href="stuff.
css" type="text/
css" rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property.
Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).
css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).
css('background-color'); $(matchedelement).
css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched...
... annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/
css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html.
Storing annotations - Archive of obsolete content
the panel has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for the panel's content a simple
css file to provide some basic styling.
... annotation list html and
css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/
css" href="annotation-list.
css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"><...
.../div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding
css: #annotation-list .annotation-details { padding: 10px; margin: 10px; border: solid 3px #eee; background-color: white; } #annotation-list .url, .selection-text, .annotation-text { padding: 5px; margin: 5px; } #annotation-list .selection-text,#annotation-list .annotation-text { border: solid 1px #eee; } #annotation-list .annotation-text { font-style: italic; } body { background-color: #f5f5f5; font: 100% arial, helvetica, sans-serif; } h1 { font-family: georgia,serif; font-size: 1.5em; text-align:center; } save these in data/list as annotation-list.html and annotation-list.
css respectively.
Customizing the download progress bar - Archive of obsolete content
in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.
css" type="text/
css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.
css so that it will be preprocessed.
... the myextension.
css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support for linux.
...trs) { var dl = mydownloadmanager.defaultcreatedownloaditem(aattrs); if (dl) { if (...whatever condition you use to decide whether to change this download...) { dl.setattribute("myspecialdownload", "true"); } } return dl; } } }; window.addeventlistener("load", function(e) { mydownloadmanager.init(); }, false); in your
css file, change richdownloaditem (both occurrences) to richdownloaditem[myspecialdownload="true"].
Scrollbar - Archive of obsolete content
example assumes a structure like this: app/chrome/chrome.manifest app/chrome/skin/global/ copy the scrollbars.
css from xulrunner/chrome/classic.jar/skin/classic/global to app/chrome/skin/global/scrollbars.
css open the app/chrome/chrome.manifest and add: skin app-global standard/1.0 skin/global/ override chrome://global/skin/xulscrollbars.
css chrome://app-global/skin/scrollbars.
css xulscrollbars.
css are used for windows xp, and nativescrollbars.
css on osx.
... so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.
css chrome://app-global/skin/scrollbars.
css change some color values inside the app/chrome/skin/global/scrollbars.
css to test that the
css is used.
... example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
How to convert an overlay extension to restartless - Archive of obsolete content
step 7: manually handle global
css stylesheets any global
css style sheets which you are using will need to be registered upon load and unregistered when your extension is unloaded.
... any
css files used in any of your own xul files will function normally without any extra work needed.
... components.utils.import("resource://gre/modules/services.jsm"); var stylesheets = ["chrome://myextension/skin/mystylesheet.
css"]; function startup(data,reason) { ...
List of Mozilla-Based Applications - Archive of obsolete content
remote remote control for amarok music player ample sdk javascript gui-framework aol instant messenger im client uses nss apache web server doesn't use nss by default, but can be configured to use nss with mod_nss ssl module apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle
css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seeming...
...ape embedding tool uses mozilla spidermonkey splashtop web browser browser part of instant-on operating system sqlite-manager database manager standalone version of add-on stealthsurfer secure internet tools on usb key uses firefox and thunderbird streambase complex event processing platform seems to use xulrunner stylizer
css editor
css editor
css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet16 apple ii computer emulator uses spidermonkey as a scriptable debugger f...
...ulrunner telekast teleprompter tenfourfox browser for powerpc-based macs timberwolf browser for amiga os4 based on firefox - project page mozilla thunderbird email 47 million dl tomtom home 2 pc application to manage tomtom gps devices review article from gps magazine; over 2.4m users topstyle html, xhtml and
css editor seems to have optional gecko embedding but doesn't use it by default toxtox media browser for tv 5000 downloads trixul gui toolkit uses mozilla spidermonkey trustedbird email client thunderbird bundled with a set of extensions (formerly known as milimail) tuneup music collection organizer listed on xulrunner hall of fame but ha...
Adding the structure - Archive of obsolete content
graphical panels (like the one we are creating here that displays an icon) are given the statusbarpanel-iconic class so they can be styled accordingly by the
css stylesheet that defines these elements' appearance.
...we'll update the value of that attribute each time we retrieve tinderbox's status from the server, and we'll define
css rules that change the appearance of the icon depending on the value of that attribute.
... all xul elements can be given custom attributes in addition to the ones the xul rendering engine recognizes which get ignored by the engine, so adding this custom attribute does not create any problems or modify the way the widget is displayed (except for the ways we explicitly specify with
css).
Specifying the appearance - Archive of obsolete content
now that we have defined a panel in which to display an icon, we use
css to specify which icon to display.
... for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of
css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have...
... to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.
css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/
css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.
css" type="text/
css"?> our
css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
Creating a Skin for Mozilla - Archive of obsolete content
how to edit images, extract zip files, and how to modify
css.
... mozilla uses standard gif, png, and jpeg images for the buttons and
css to style everything else in the interface.
... contents getting started setup changing borders and colours changing images creating the install script in-depth system colours mozilla
css commands how do i know what to modify?
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
skin\classic\global global contains almost all of the important
css files that define the appearance of the browser.
...
css files the
css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
... go into the global global directory and open button.
css in your favorite text editor.
Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/
css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc.
...--> <stylesheet src="notes.
css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element.
...'\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.
css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.5em 0.5em; border: 2px solid blue; background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Creating XPI Installer Modules - Archive of obsolete content
xul, javascript, or
css files) in the chrome subdirectories and editing them with a text editor has been replaced by something a lot of developers find more confusing and esoteric.
...the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/
css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" />...
...note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.
css to make use of that skin's basic widget styles.
crop - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } ...
The Joy of XUL - Archive of obsolete content
applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (
css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0.
... xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of
css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files).
... xul provides a rich set of ui components.the user interface for the calendar is written entirely in xul, javascript, and
css, which is a testament to the power and flexibility of this application building framework.
Tree Widget Changes - Archive of obsolete content
<treecell/> <treecell value="true"/> you need to specify the checkbox image with
css for the checkbox to display.
... (do not set id of the column to be 'checked' it will cause problems with the
css) treechildren::-moz-tree-checkbox(checked) { /*
css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
... style improvements you can now specify the cursor to use for a cell using the
css cursor property.
Introduction to XBL - Archive of obsolete content
if you use
css classes, you can use as many different bindings as you need.
...you assign a binding to an element by setting the
css property -moz-binding to the url of the bindings file.
...xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <?xml-stylesheet href="chrome://example/skin/example.
css" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window>
css (example.
css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org...
Stacks and Decks - Archive of obsolete content
the size of the stack is determined by its largest child, but you can use the
css properties width, height, min-width and other related properties on both the stack and its children.
... shadowing with stacks one convenient use of the stack element however is that you could emulate a number of
css properties with it.
...it is also useful as mozilla doesn't currently support
css text shadowing.
Trees - Archive of obsolete content
a special
css syntax is used which styles components of the tree body with those keywords.
... in a sense, it is somewhat like using
css classes.
...for instance, you cannot change the appearance of the tree rows using the style attribute or with other
css properties and the box related features such as flexibility and orientation cannot be used.
button - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
caption - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
checkbox - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
description - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
label - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
listitem - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item.
menu - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
menuitem - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title.
menulist - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox.
menuseparator - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
radio - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
<statusbarpanel> - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
tab - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
toolbarbutton - Archive of obsolete content
the side depends on the
css text alignment.
...if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width
css property (or the maxwidth attribute) to override this size.
... for example, for a menuitem in a menu you can add the following
css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
-ms-filter - Archive of obsolete content
the -ms-filter
css property is a microsoft extension that sets or retrieves the filter or collection of filters applied to an object.
... html <div class="gradient horizontal"></div> <div class="gradient vertical"></div>
css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height: 50vh; } .gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)'; background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); } .gradient.vertical { -ms-filter: 'progid:dximagetr...
...ves: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows internet explorer 8, the -ms-filter attribute is an extension to
css, and can be used as a synonym for filter in ie8 standards mode.
-ms-high-contrast-adjust - Archive of obsolete content
the -ms-high-contrast-adjust
css property is a microsoft extension that gets or sets a value indicating whether to override any
css properties that would have been set in high contrast mode.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto indicates the applicable
css properties will be adjusted as expected when the system is in high contrast mode.
... none indicates the applicable
css properties will not be adjusted when the system is in high contrast mode.
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus)
css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward)
css ...
...pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrollbar-end-forward)
css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-start-backward)the :-moz-system-metric(scrollbar-start-backward)
css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-start-forward)the :-moz-system-metric(scrollbar-start-forward)
css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-sy...
...stem-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional)
css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled)
css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme)
css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass...
::-ms-browse - Archive of obsolete content
the ::-ms-browse
css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.
... permitted properties only the following
css properties can be used in a rule with ::-ms-browse in its selector.
...lay (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label>
css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.
::-ms-check - Archive of obsolete content
the ::-ms-check
css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.
... allowable properties only the following
css properties can be used in a rule with ::-ms-check in its selector.
...right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form>
css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
::-ms-clear - Archive of obsolete content
the ::-ms-clear
css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
...such inputs include: <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following
css properties can be used in a rule with ::-ms-clear in its selector.
...m padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </form>
css input, label { display: block; } input[type=text]::-ms-clear { color: red; /* this sets the cross color as red.
::-ms-fill-upper - Archive of obsolete content
the ::-ms-fill-upper
css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
... allowable properties only the following
css properties can be used in a rule with ::-ms-fill-upper in its selector.
... see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress
css-tricks: styling cross-browser compatible range inputs with
css quirksmode: styling and scripting sliders ...
::-ms-fill - Archive of obsolete content
the ::-ms-fill
css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.
... allowable properties only the following
css properties can be used in a rule with ::-ms-fill in its selector.
...rder border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress>
css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...
::-ms-thumb - Archive of obsolete content
the ::-ms-thumb
css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a slider control to alter its numerical value.
... allowable properties only the following
css properties can be used in a rule with ::-ms-thumb in its selector.
... see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb
css-tricks: styling cross-browser compatible range inputs with
css quirksmode: styling and scripting sliders ...
::-ms-track - Archive of obsolete content
the ::-ms-track
css pseudo-element is a microsoft extension that represents the track of a slider control.
... allowable properties only the following
css properties can be used in a rule with ::-ms-track in its selector.
...n-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track
css-tricks: styling cross-browser compatible range inputs with
css quirksmode: styling and scripting sliders ...
Writing JavaScript for XHTML - Archive of obsolete content
//]]> </script> <!-- (for styles, it is different) --> <style type="text/
css"> /*<![cdata[*/ ...
...//--><!]]></script> <!-- (for styles, it is different) --> <style type="text/
css"><!--/*--><![cdata[/*><!--*/ ...
...ends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 further reading you will find several useful articles in the developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using
css and javascript in xhtml documents ...
XForms Styling - Archive of obsolete content
hopefully someone more proficient in mozilla xforms and
css can clean this up repeats see the mozilla xforms specials page for some general points.
... triggers use appearance="minimal" to be able to style buttons portability the mozilla xforms extension is one of the few xforms processors which allow for styling of the xforms elements directly, using mostly standard
css.
...xforms: <pre></pre> chiba html: <pre></pre> mozilla
css: <pre></pre> chiba
css: <pre></pre> formsplayer
css: <pre></pre> ...
Building up a basic demo with Three.js - Game development
<title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some
css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space.
...there are a few different renderers: webgl is the default, and others you can use are canvas, svg,
css, and dom.
... they differ in how everything is rendered, so the webgl implementation will implement differently than the
css one.
Canonical order - MDN Web Docs Glossary: Definitions of Web-related terms
in
css, canonical order is used to refer to the order in which separate values need to be specified (or parsed) or are to be serialized as part of a
css property value.
... learn more what does “canonical order” mean with respect to
css properties?
... the description of the formal syntax used for
css values on mdn ...
Fragmentainer - MDN Web Docs Glossary: Definitions of Web-related terms
a fragmentainer is defined in the
css fragmentation specification as follows: a box—such as a page box, column box, or region—that contains a portion (or all) of a fragmented flow.
... fragmented contexts are found in
css paged media, where the fragmentainer would be the box which defines a page.
...in
css regions each region is a fragmentainer.
Grid Column - MDN Web Docs Glossary: Definitions of Web-related terms
a grid column is a vertical track in a
css grid layout, and is the space between two vertical grid lines.
... when working with alignment in
css grid layout, the axis down which columns run is known as the block, or column, axis.
... learn more property reference grid-template-columns grid-auto-columns grid grid-template further reading
css grid layout guide: basic concepts of grid layout ...
Grid Row - MDN Web Docs Glossary: Definitions of Web-related terms
a grid row is a horizontal track in a
css grid layout, that is the space between two horizontal grid lines.
... when working with alignment in
css grid layout, the axis along which rows run is known as the inline, or row, axis.
... learn more property reference grid-template-rows grid-auto-rows grid grid-template further reading
css grid layout guide: basic concepts of grid layout ...
Accessible multimedia - Learn web development
prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript, an understanding of what accessibility is.
... basic setup first, grab a copy of our custom-controls-start.html, custom-controls.
css, rabbit320.mp4, and rabbit320.webm files and save them in a new directory on your hard drive.
... html: a good basis for accessibility
css and javascript accessibility best practices wai-aria basics accessible multimedia mobile accessibility accessibility troubleshooting ...
Attribute selectors - Learn web development
in
css you can use attribute selectors to target elements with certain attributes.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn what attribute selectors are and how to use them.
... previous overview: building blocks next in this module cascade and inheritance
css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in
css images, media, and form elements styling tables debugging
css organizing your
css ...
Test your skills: Selectors - Learn web development
the aim of this task is to help you check your understanding of selectors in
css.
... selectors one without changing the html, use
css to do the following things: make h1 headings blue.
... selectors five in this final task add
css using attribute selectors to do the following: target the <a> element with a title attribute and make the border pink (border-color: pink).
Type, class, and ID selectors - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how
css works (study
css first steps.) objective: to learn about the different
css selectors we can use to apply
css to a document.
... try adding a
css rule to select the <h1> element and change its color to blue.
... previous overview: building blocks next in this module cascade and inheritance
css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in
css images, media, and form elements styling tables debugging
css organizing your
css ...
Test your skills: values and units - 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
css values and units.
...your task is to complete the
css using the same color in different formats, plus a final list item where you should make the background semi-opaque.
...you need to figure out how to use the values in
css.
Styling text - Learn web development
with the basics of the
css language covered, the next
css topic for you to concentrate on is styling text — one of the most common things you'll do with
css.
... get started prerequisites before starting this module, you should already have basic familiarity with html, as discussed in the introduction to html module, and be comfortable with
css fundamentals, as discussed in introduction to
css.
... styling lists lists behave like any other text for the most part, but there are some
css properties specific to lists that you need to know about, and some best practices to consider.
What text editors are available? - Learn web development
that works great for writing notes to yourself, but when you're doing web development and writing in html,
css, and javascript, you can produce some pretty large, complex files.
...save you time by auto-completing recurring structures (for example, automatically close html tags, or suggesting valid values for a given
css property).
...make sure in particular that your text editor supports highlighting for html,
css, and javascript.
Common questions - Learn web development
the html or
css learning articles.) these articles are designed to work on their own.
... every browser features a set of devtools for debugging html,
css, and other web code.
... html,
css and javascript questions for common solutions to html/
css/javascript problems, try the following articles: use html to solve common problems use
css to solve common problems use javascript to solve common problems ...
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div>
css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------...
... } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div>
css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ ...
...} .select .highlight { background: #000; color: #ffffff; } result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div>
css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ ...
Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right html form controls and other html elements, adding some very simple styling via
css, and describing how data is sent to a server.
...it is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some
css to make it look ok.
...it should look like so: <style> </style> inside the style tags, add the following
css: form { /* center the form on the page */ margin: 0 auto; width: 400px; /* form outline */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ bor...
Add a hitmap on top of an image - Learn web development
text links (perhaps styled with
css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).
...72 × 72
css pixels is a good minimum, with additional generous gaps between touch targets.
... coordinates are given in
css pixels.
Assessment: Structuring planet data - Learn web development
starting point to start the assessment, make local copies of blank-template.html, minimal-table.
css, and planets-data.txt in a new directory in your local computer.
...you could paste the html,
css and javascript into one of these online editors.
... if the online editor you are using doesn't have separate javascript/
css panels, feel free to put them inline <script>/<style> elements inside the html page.
Introduction to web APIs - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, javascript basics (see first steps, building blocks, javascript objects).
...angular and ember) tend to be packages of html,
css, javascript, and other technologies that you install and then use to write an entire web application from scratch.
...the most obvious example is the dom (document object model) api, which allows you to manipulate html and
css — creating, removing and changing html, dynamically applying new styles to your page, etc.
Silly story generator - Learn web development
this also has the
css to style the example contained within it.
...you could paste the html,
css and javascript into one of these online editors.
... project brief you have been provided with some raw html/
css and a few text strings and javascript functions; you need to write the necessary javascript to turn this into a working program, which does the following: generates a silly story when the "generate random story" button is pressed.
Working with JSON - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
... getting started to begin with, make local copies of our heroes.html and style.
css files.
... the latter contains some simple
css to style our page, while the former contains some very simple body html: <header> </header> <section> </section> plus a <script> element to contain the javascript code we will be writing in this exercise.
Object building practice - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
... getting started to begin with, make local copies of our index.html, style.
css, and main.js files.
... these contain the following, respectively: a very simple html document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our
css and javascript to our html.
Perceived performance - Learn web development
for example, because page render is blocked by loading and parsing
css and javascript, minimizing the amount of
css and js that needs to be loaded on initially will have a major impact on improving perceived performance.
... make things like type-ahead a progressive enhancement: use
css to display input modal, js to add typeahead/autocomplete as it is available make task initiators appear more interactive making a content request on keydown rather than waiting for keyup can shave 200ms off the perceived load of the content.
... html performance features
css performance features fonts and performance mobile performance focusing on performance ...
The "why" of web performance - Learn web development
building websites requires html,
css, and javascript, typically including binary file types such as images and video.
...reducing html/
css/javascript and media file sizes reduces both the time to load and a site's power consumption (see performance budgets).
... html performance features
css performance features fonts and performance mobile performance focusing on performance ...
Introduction to client-side frameworks - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages.
... static site generators static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant
css or javascript — so that they can be published in any number of places.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Framework main features - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages.
...with the addition of some helper modules, you can style your framework apps in sass or less, or transpile your
css stylesheets with post
css.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Componentizing our React app - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
...this is bad html because id attributes must be unique (they are used as unique identifiers for document fragments, by
css, javascript, etc.).
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
TypeScript support in Svelte - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
...just run npm run validate to check for unused
css, and return a11y hints and typescript compile errors.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Componentizing our Svelte app - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
...a component is a reusable, self-contained block of code that encapsulates html,
css and javascript that belong together, written into a .svelte file.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Understanding client-side JavaScript frameworks - Learn web development
get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — html,
css, and especially javascript.
...styling vue components with
css the time has finally come to make our app look a bit nicer.
... in this article, we'll explore the different ways of styling vue components with
css.
Cross browser testing - Learn web development
get started prerequisites you should really learn the basics of the core html,
css, and javascript languages first before attempting to use the tools detailed here.
... handling common html and
css problems with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and
css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... this includes linting code, handing
css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
Command line crash course - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages.
... go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in
css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
... prettier is an opinionated code formatting tool for front end developers, focusing around javascript-based languages and adding support for html,
css, s
css, json and more.
Deploying our app - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages.
...utput like the following, showing you the production files that were created, how big they are, and how long they took to build: dist/src.99d8a31a.js.map 446.15 kb 63ms dist/src.99d8a31a.js 172.51 kb 5.55s dist/stars.7f1dd035.svg 6.31 kb 145ms dist/asteriod2.3ead4904.svg 3.51 kb 155ms dist/asteriod1.698d75e9.svg 2.9 kb 153ms dist/src.84f2edd1.
css.map 2.57 kb 3ms dist/src.84f2edd1.
css 1.25 kb 1.53s dist/bg.084d3fd3.svg 795 b 147ms dist/index.html 354 b 944ms try it now!
...also see our cross browser testing module for a bunch of useful testing information remember also that tests are not limited to javascript; tests can be run against the rendered dom, user interactions,
css, and even how a page looks.
Accessibility information for UI designers and developers
css lets authors change what the focus indicator look like, so you can design it to match branding.
... see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom
css to meet their specific needs.
... to help these users, you could offer a setting to turn off animations, or wrap the
css in the prefers-reduce-motion media query.
Chrome registration
typically a skin provider will provide
css files and images.
... style style overlays (custom
css which will be applied to a chrome page) are registered with the following syntax: style chrome://uri-to-style chrome://stylesheet-uri [flags] note: only stylesheets at chrome uris can be applied in this way.
...also, the path inside overridden files is relative to the overridden path, not the original one (this can be annoying and/or useful in
css files, for example).
SVG Guidelines
most of time, cdata isn't needed, for example, the content in <style> tags doesn't need to be wrapped in a cdata section as the content inside the tag is already correctly parsed as
css.
...here are some commonly seen examples: style="display: none;" on <defs> elements (a <defs> element is hidden by default) type="text/
css" on <style> elements stroke: none or stroke-width: 0 svg grouping style grouping group similarly styled shapes under one <g> tag; this avoids having to set the same class/styles on many shapes.
... instead of using
css/svg transforms, apply directly the transform on the path/shape definition.
Displaying Places information using views
every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.
css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.
css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
...the following stylesheet is optional and only applies styles and icons to the built-in tree view: <?xml-stylesheet href="chrome://browser/skin/places/places.
css" ?> for examples of instantiating a tree view from javascript rather than xul, see programmatic generation of the built-in tree view.
...try
css here.
overflow-clip-box-block
the overflow-clip-box-block
css property specifies relative to which box the clipping happens when there is an overflow — in the block direction.
... examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div>
css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0];...
... elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c
csswg; it is not yet on the standard track but, if accepted, should appear in
css overflow module level 3.
overflow-clip-box-inline
the overflow-clip-box-inline
css property specifies relative to which box the clipping happens when there is an overflow — in the inline direction.
... examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div>
css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]...
...; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c
csswg; it is not yet on the standard track but, if accepted, should appear in
css overflow module level 3.
overflow-clip-box
the overflow-clip-box
css property specifies relative to which box the clipping happens when there is an overflow.
... formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div>
css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addevent...
...listener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c
csswg; it is not yet on the standard track but, if accepted, should appear in
css overflow module level 3.
Getting from Content to Layout
changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/ns
cssframeconstructor.cpp the frame constructor implements nsimutationobserver which allows it to "watch" the content tree.
... ns
cssframeconstructor gets notified from the document's presshell (which implements nsidocumentobserver and observes the document) about all nodes in the document.
... the frame constructor takes these notifications and does the following: dispatches "restyle events" which trigger the reprocessing of relevant
css selectors and any restyling that needs to occur.
Mozilla DOM Hacking Guide
there are classes for the dom0, core dom, html, xml, xul, xbl, range,
css, events, etc...
...as an example, on the window object, we can call all the methods defined on the following interfaces: nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomeventtarget, nsidomview
css, and nsidomabstractview.
...in our window example, the interfaces are nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomeventtarget, nsidomview
css, and nsidomabstractview.
nsIIOService
and for a
css stylesheet it's the document whose rendering will be affected by the stylesheet.
...and for a
css stylesheet it's the document whose rendering will be affected by the stylesheet.
...and for a
css stylesheet it's the document whose rendering will be affected by the stylesheet.
nsITreeView
each property, x, that the view gives back will cause the
css ::moz-tree-cell-*(x) pseudoelement to be matched on the treechildren element.
...each property, x, that the view gives back will cause the
css ::moz-tree-column(x) to be matched on the treechildren element.
...each property, x, that the view gives back will cause the
css ::moz-tree-row(x) pseudoelement to be matched on the treechildren element.
XUL Overlays
the navigatoroverlay.xul file, for example, does not and should never load the navigator.
css file that defines the master skin for the navigator package.
...for any package, the master skin file is that
css file named after the package itself.
... the master skin file for the bookmarks package, for example, is called bookmarks.
css, and is located in the skin/default subdirectory.
DOM Inspector FAQ - Firefox Developer Tools
those nodes whose white-space
css property value prevents the user-agent from collapsing sequences of whitespace will not be hidden.
... how do i inspect pseudo-classes and pseudo-elements in the
css rules viewer?
...you can, however, find any rule in its parent style sheet (e.g., to modify it) by using the style sheets viewer in the document pane, and locating it in the
css rules viewer in the object pane.
Introduction to DOM Inspector - Firefox Developer Tools
in order to find out what the actual name of the file is being used to provide the search go icon, you can select the
css rules viewer from this menu and see the various selectors and rules that have been applied.
... the
css rules viewer shows the
css rules that are applied to the node.
... alternatively, when used in conjunction with the style sheets viewer, the
css rules viewer lists all recognized rules from that style sheet in order.
All keyboard shortcuts - Firefox Developer Tools
command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the
css pane tab tab tab
css pane these shortcuts work when you're in the inspector's
css pane.
... command windows macos linux focus on the search box in the
css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been entered) esc esc esc step forward through properties and values tab tab tab step backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited) enter or space return or space enter or space cycle up and down through auto-complete suggestions (rules view only, when a property or value is being edited) up arrow , down arrow up arrow , down arrow up arrow , down arrow...
... show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current
css file in style editor (computed view only, when more information is shown for a property and a
css file reference is focused).
Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the
css pane tab tab tab
css pane these shortcuts work when you're in the inspector's
css pane.
... command windows macos linux focus on the search box in the
css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been entered) esc esc esc step forward through properties and values tab tab tab step backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited) enter or space return or space enter or space cycle up and down through auto-complete suggestions (rules view only, when a property or value is being edited) up arrow , down arrow up arrow , down arrow up arrow , down arrow...
... show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current
css file in style editor (computed view only, when more information is shown for a property and a
css file reference is focused).
Page Inspector - Firefox Developer Tools
use the page inspector to examine and modify the html and
css of a page.
... you can split the rules view out into its own pane, separate from the other tabs on the
css pane — this is called 3-pane mode.
... how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit
css examine event listeners work with animations edit
css filters edit
css shapes view background images use the inspector from the web console examine
css grid layouts examine
css flexbox layouts reference keyboard shortcuts settings ...
Paint Flashing Tool - Firefox Developer Tools
repaints and responsiveness when the browser renders a web page it parses the html and
css, determines how to lay it out, and then paints it to actually display the content on the screen.
... example:
css transitions one area where implementation choices can affect repaint efficiency is in
css transitions.
... the example below shows two different ways to move an element using a
css transition.
Intensive JavaScript - Firefox Developer Tools
a button to start and stop some
css animations.
...the pink says that we are mostly performing
css calculations and possibly reflow: this is the
css animation that's running throughout the profile.
... the function calls are interleaved with the pink blocks from the
css animation, and each function is short enough that the browser can handle it without the overall frame rate dropping.
Settings - Firefox Developer Tools
style editor show original sources when a
css preprocessor supporting source maps is used, this enables the style editor to display the original, preprocessor, sources rather than the generated
css.
... learn more about style editor support for
css source maps.
... autocomplete
css enable the style editor to offer autocomplete suggestions.
Managing screen orientation - Web APIs
there are several ways to handle screen orientation, both with
css and javascript.
...this lets content adjust its layout using
css, based on whether the browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width).
...nullam quis malesuada est.</p>
css relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospac...
CanvasRenderingContext2D.drawImage() - Web APIs
the specification permits any canvas image source (canvasimagesource), specifically, a
cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in
css pixels when drawing.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in
css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in
css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as 300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to...
CanvasRenderingContext2D.font - Web APIs
this string uses the same syntax as the
css font specifier.
... syntax ctx.font = value; options value a domstring parsed as
css font value.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the
css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
Basic usage of canvas - Web APIs
the element can be sized arbitrarily by
css, but during rendering the image is scaled to fit its layout size: if the
css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
... note: if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using
css.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/
css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
Using images - Web APIs
another potential advantage is that it is also possible to encapsulate in one file all of your
css, javascript, html, and images, making it more portable to other locations.
...the images are hidden from output by setting the
css property display to none for those images.
...ps://udn.realityripple.com/samples/a5/a82eed408d.jpg"></td> <td><img src="https://udn.realityripple.com/samples/6e/d8d545e955.jpg"></td> <td><img src="https://udn.realityripple.com/samples/b7/86ecdc3e8d.jpg"></td> </tr> </table> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </body> </html> and here's some
css to make things look nice: body { background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4f191a; margin: 10px; } img { display: none; } table { margin: 0 auto; } td { padding: 15px; } tying it all together is the javascript to draw our framed images: function draw() { // loop through all images for (var i = 0; i < document.images.length; i+...
DOMMatrixReadOnly - Web APIs
dommatrixreadonly.tostring() creates and returns a domstring object which contains a string representation of the matrix in
css matrix syntax, using the appropriate
css matrix notation.
... see the matrix()
css function for details on this syntax.
...see the
css matrix3d() function for details on the 3d notation's syntax.
Document: animationcancel event - Web APIs
the animationcancel event is fired when a
css animation unexpectedly aborts.
...this might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using
css.
... specifications specification status comment
css animations working draft initial definition ...
Document.querySelectorAll() - Web APIs
this string must be a valid
css selector string; if it's not, a syntaxerror exception is thrown.
... note: characters which are not part of standard
css syntax must be escaped using a backslash character.
... note: if the specified selectors include a
css pseudo-element, the returned list is always empty.
DocumentFragment.querySelector() - Web APIs
syntax element = documentfragment.queryselector(selectors); parameters selectors is a domstring containing one or more
css selectors separated by commas.
... examples basic example in this basic example, the first element in the documentfragment with the class "myclass" is returned: var el = documentfragment.queryselector(".myclass");
css syntax and the method's argument the string argument pass to queryselector must follow the
css syntax.
... to match id or selectors that do not follow the
css syntax (by using semicolon or space inappropriately for example), it's mandatory to escape the wrong character with a double back slash: <div id="foo\bar"></div> <div id="foo:bar"></div> <script> document.queryselector('#foo\bar') // does not match anything document.queryselector('#foo\\\\bar') // match the first div document.queryselector('#foo:bar') // does not match anything document.queryselector('#foo\\:bar') // match the second div </script> specifications specification status comment selectors api level 2the definition of 'documentfragment.queryselector' in that specification.
Element.clientHeight - Web APIs
the element.clientheight read-only property is zero for elements with no
css or inline layout boxes; otherwise, it's the inner height of an element in pixels.
... clientheight can be calculated as:
css height +
css padding - height of horizontal scrollbar (if present).
... example specification specification status comment
css object model (
cssom) view modulethe definition of 'clientheight' in that specification.
Element.getBoundingClientRect() - Web APIs
syntax domrect = element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the
css border-boxes associated with the element.
...if all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first
css box (in content order) for the element.
... specifications specification status comment
css object model (
cssom) view modulethe definition of 'element.getboundingclientrect()' in that specification.
Element.querySelectorAll() - Web APIs
this string must be a valid
css selector string; if it's not, a syntaxerror exception is thrown.
... note: characters which are not part of standard
css syntax must be escaped using a backslash character.
... note: if the specified selectors include a
css pseudo-element, the returned list is always empty.
GeometryUtils - Web APIs
geometryutils is a raw interface and no object of this type can be created; it is implemented by text, element,
csspseudoelement, and document objects.
... methods geometryutils.getboxquads() returns a list of domquad objects representing the
css fragments of the node.
... geometryutils.convertquadfromnode() fixme: needs a description geometryutils.convertrectfromnode() fixme: needs a description geometryutils.convertpointfromnode() fixme: needs a description specifications specification status comment
css object model (
cssom) view modulethe definition of 'geometryutils' in that specification.
HTMLElement: animationend event - Web APIs
the animationend event is fired when a
css animation has completed.
...mated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div>
css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation ...
...'click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment
css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a
css animation ends, and another one begins.
...onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div>
css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const anim...
...'click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment
css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
the animationstart event is fired when a
css animation has started.
... = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div>
css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const anim...
...'click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment
css animations working draft initial definition ...
HTMLElement.offsetHeight - Web APIs
typically, offsetheight is a measurement in pixels of the element's
css height, including any borders, padding, and horizontal scrollbars (if rendered).
...for the document body object, the measurement includes total linear content height instead of the element's
css height.
... specification specification status comment
css object model (
cssom) view modulethe definition of 'offsetheight' in that specification.
HTMLImageElement.align - Web APIs
you should instead use the
css propertiy vertical-align, which does in fact also work on images despite its name.
...these should be replaced by using the
css vertical-align property.
...you should instead use the
css float property, specifying as the value either left or right.
ParentNode.querySelectorAll() - Web APIs
this string must be a valid
css selector string; if it's not, a syntaxerror exception is thrown.
... note: characters which are not part of standard
css syntax must be escaped using a backslash character.
... note: if the specified selectors include a
css pseudo-element, the returned list is always empty.
Point - Web APIs
point is an interface, which existed only briefly in the
css transforms level 1 specification, which represents a point in 2-dimensional space.
... specifications this class was specified in the defunct 20 march 2009 working draft of
css 2d transforms module level 3.
... it is not present in the current working draft of the
css transforms level 1 specification.
Pointer events - Web APIs
width the width (magnitude on the x axis), in
css pixels, of the contact geometry of the pointer.
... height the height (magnitude on the y axis), in
css pixels, of the contact geometry of the pointer.
...</div> </body> </html> touch-action
css property the touch-action
css property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region.
Touch.pageX - Web APIs
the touch.pagex property is the horizontal coordinate of a touch point relative to the viewport (in
css pixels), including any scroll offset.
... the touch.pagey property is the vertical coordinate of a touch point relative to the viewport (in
css pixels), including any scroll offset.
...the unit of each coordinate is
css pixels.
Touch.pageY - Web APIs
the touch.pagex property is the horizontal coordinate of a touch point relative to the viewport (in
css pixels), including any scroll offset.
... the touch.pagey property is the vertical coordinate of a touch point relative to the viewport (in
css pixels), including any scroll offset.
...the unit of each coordinate is
css pixels.
Touch.screenX - Web APIs
the touch.screenx property is the horizontal (x) coordinate of a touch point relative to the screen in
css pixels.
... the touch.screeny property is the vertical coordinate of a touch point relative to the screen in
css pixels.
... // the unit of each coordinate is
css pixels.
Using the Web Speech API - Web APIs
html and
css the html and
css for the app is really trivial.
... <h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the
css provides a very simple responsive styling so that it looks ok across devices.
... html and
css the html and
css are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls.
Window: animationcancel event - Web APIs
the animationcancel event is fired when a
css animation unexpectedly aborts.
...this might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using
css.
... specifications specification status comment
css animations working draft initial definition ...
Window.screenLeft - Web APIs
the window.screenleft read-only property returns the horizontal distance, in
css pixels, from the left border of the user's browser viewport to the left side of the screen.
... syntax leftwindowpos = window.screenleft returns a number equal to the number of
css pixels from the left edge of the browser viewport to the left edge of the screen.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.screenleft' in that specification.
Window.screenTop - Web APIs
the window.screentop read-only property returns the vertical distance, in
css pixels, from the top border of the user's browser viewport to the top side of the screen.
... syntax topwindowpos = window.screentop returns a number equal to the number of
css pixels from the top edge of the browser viewport to the top edge of the screen.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.screentop' in that specification.
Window.screenX - Web APIs
the window.screenx read-only property returns the horizontal distance, in
css pixels, of the left border of the user's browser viewport to the left side of the screen.
... syntax leftwindowpos = window.screenx returns a number equal to the number of
css pixels from the left edge of the browser viewport to the left edge of the screen.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.screenx' in that specification.
Window.screenY - Web APIs
the window.screeny read-only property returns the vertical distance, in
css pixels, of the top border of the user's browser viewport to the top edge of the screen.
... syntax topwindowpos = window.screeny returns a number equal to the number of
css pixels from the top edge of the browser viewport to the top edge of the screen.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.screeny' in that specification.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via
css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx...
...= new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/
css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-...
... example usage your html page: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>minidaemin example - mdn</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/
css"> #sample_div { visibility: hidden; } </style> </head> <body> <p> <input type="button" onclick="fadeinout.start(false /* optional */);" value="fade in" /> <input type="button" onclick="fadeinout.start(true);" value="fade out"> <input type="button" onclick="fadeinout.pause();" value="pause" /> </p> <div id="sample_div">some text here</div> <script type="text/...
Introduction - Web APIs
css (cascade style sheets) was one of the first ways proposed by the w3c.
...
css is a simple way to apply style rules to a web document.
...
css also has limited support for changing the position of an element.
ARIA: button role - Accessibility
the included
css style is provided to make the <span> element look like a button, and to provide visual cues when the button has focus.
... html <h1>aria button example</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span>
css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name ...
...</audio>
css button, [role="button"] { padding: 3px; border: 2px solid transparent; } button:active, button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || ev...
Text labels and names - Accessibility
for best accessibility and future maintenance, redesign any pages that use frames to use
css to achieve a similar layout.
... headings must be labeled make sure that your headings have non-empty text content, and are not hidden, such as with
css display:none or aria-hidden=true.
... headings should have visible text content make sure that your headings have non-empty text content, and are not hidden, such as with
css display:none or aria-hidden=true.
Video player styling basics - Developer guides
value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related
css alteration the previous article simply set the display property of the video controls to block in order to display them.
... note: in some cases some basic
css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player.
...rs: video.addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set via
css changebuttonstate('playpause'); }); mute.addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
Index - Developer guides
26 using device orientation with 3d transforms advanced,
css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with
css 3d transforms.
... 29 index guide, index found 31 pages: 30 introduction to web development beginner,
css, codingscripting, development, html, javascript, web whether you're just getting started with web development, or are just expanding your horizons into new realms of web awesomeness, the links here should help you get started.
... 43 writing forward-compatible websites
css, compatibility, dom, html, javascript, web development this page explains how to write websites that do not break when new browser versions are released.
Writing forward-compatible websites - Developer guides
a good example, for a browser vendor using the -vnd
css prefix that has shipped an unprefixed implementation of the make-it-pretty property, with a behavior for the value "sometimes" that differs from the prefixed version: <style> .pretty-element { -vnd-make-it-pretty: sometimes; make-it-pretty: sometimes; } </style> the order of the declarations in the rule above is important: the unprefixed one needs to come last.
... don't use unprefixed versions of
css properties or apis until at least one browser supports them until there's decently widespread support of the unprefixed version of something, its behavior can still change in unexpected ways.
... don't leave experiments that didn't work in your code if you try using a
css property to do something you want, but it has no effect, remove it.
HTML attribute: rel - HTML: Hypertext Markup Language
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.
css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.
css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation.
...the type attribute is not needed as it's a text/
css stylesheet, as that is the default value.
... if it's not a stylesheet of type text/
css it is best to declare the type.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
a few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the
css takes care of this case.
... html <p>using <abbr>html</abbr> is fun and easy!</p> result styling abbreviations you can use
css to set a custom style to be used for abbreviations, as seen in this simple example.
... html <p>using <abbr>
css</abbr>, you can style your abbreviations!</p>
css abbr { font-variant: all-small-caps; } result providing an expansion adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.
<basefont> - HTML: Hypertext Markup Language
you should not use this element; instead, you should use
css properties such as font, font-family, font-size, and color to change the font configuration for an element and its contents.
...for any new web development, styling should be written using
css only.
... the former behavior of the <font> element can be achieved, and even better controlled using the
css fonts properties.
<br>: The Line Break element - HTML: Hypertext Markup Language
note: do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the
css margin property to control their size.
... styling with
css the <br> element has a single, well-defined purpose — to create a line break in a block of text.
... use <p> elements, and use
css properties like margin to control their spacing.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
height the height of the coordinate space in
css pixels.
... width the width of the coordinate space in
css pixels.
... sizing the canvas using
css versus html the displayed size of the canvas can be changed using
css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.
<input type="checkbox"> - HTML: Hypertext Markup Language
this can be seen in the below example (thanks to
css tricks for the inspiration).
...the example also includes some
css to improve the styling.
...nput type="checkbox" id="cooking" name="interest" value="cooking"> <label for="cooking">cooking</label> </div> <div> <input type="checkbox" id="other" name="interest" value="other"> <label for="other">other</label> <input type="text" id="othervalue" name="other"> </div> <div> <button type="submit">submit form</button> </div> </fieldset> </form>
css html { font-family: sans-serif; } form { width: 600px; margin: 0 auto; } div { margin-bottom: 10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding: 10px; background: blue; color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.styl...
<input type="datetime-local"> - HTML: Hypertext Markup Language
you'll have to resort to
css for customizing the sizes of these elements.
...try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the
css used in the above example.
... here we make use of the :valid and :invalid
css properties to style the input based on whether or not the current value is valid.
<input type="month"> - HTML: Hypertext Markup Language
you'll have to resort to
css for sizing needs.
...try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the
css used in the above example.
... here we make use of the :valid and :invalid
css properties to style the input based on whether or not the current value is valid.
<input type="time"> - HTML: Hypertext Markup Language
you'll have to resort to
css for sizing needs.
...in the following example we are setting a minimum time of 12:00 and a maximum time of 18:00: <form> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00"> <span class="validity"></span> </form> here's the
css used in the above example.
... here we make use of the :valid and :invalid
css properties to style the input based on whether or not the current value is valid.
<input type="week"> - HTML: Hypertext Markup Language
you'll have to resort to
css for sizing needs.
...in the following example we are setting a minimum value of week 01, 2017 and a maximum value of week 52, 2017: <form> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2017-w52"> <span class="validity"></span> </form> here's the
css used in the above example.
... here we make use of the :valid and :invalid
css properties to style the input based on whether or not the current value is valid.
<p>: The Paragraph element - HTML: Hypertext Markup Language
alternate separation methods, such as first-line indentation, can be achieved with
css: html <p>separating paragraphs with blank lines is easiest for readers to scan, but they can also be separated by indenting their first lines.
...switch back!">use pilcrow for paragraphs</button> </p>
css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggl...
... if extra space is desired, use
css properties like margin to create the effect: p { margin-bottom: 2em; // increase white space after a paragraph } specifications specification status comment html living standardthe definition of '<p>' in that specification.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
usage notes you can use a
css rule to override the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any
css you specify.
... the
css to override the default font face would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for output generated by your website or app's javascript code, you should instead use the <output> element.
...
css the
css that achieves the appearance we want is: .prompt { color: #b00; } samp > kbd { font-weight: bold; } .cursor { color: #00b; } this simply gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.
<textarea> - HTML: Hypertext Markup Language
styling with
css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image.
...being easily manipulable using regular
css.
...this is controlled by the resize
css property — resizing is enabled by default, but you can explicitly disable it using a resize value of none: textarea { resize: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g.
<video>: The Video Embed element - HTML: Hypertext Markup Language
height the height of the video's display area, in
css pixels (absolute values only; no percentages.) intrinsicsize this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.
... width the width of the video's display area, in
css pixels (absolute values only; no percentages).
... styling with
css the <video> element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded.
dir - HTML: Hypertext Markup Language
this attribute can be overridden by the
css properties direction and unicode-bidi, if a
css page is active and the element supports these properties.
... as the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related
css properties when possible.
... that way, the text will display correctly even on a browser that doesn't support
css or has the
css deactivated.
Browser detection using the user agent - HTTP
rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using
css by simply increasing the font size).
...this effect can be easily achieved using
css flexboxes, sometimes with floats as a partial fallback.
...prior to version 9, internet explorer had unbelievable issues with rendering bugs,
css bugs, api bugs, and so forth.
Content Security Policy (CSP) - HTTP
content-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="
css/style.
css"> </head> <body> ...
...a browser capable of enforcing csp would send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/
css/style.
css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports" } } as you can see, the report includes the full path to the violating resource in blocked-uri.
...for example, if the signup.html attempted to load
css from http://anothercdn.example.com/stylesheet.
css, the browser would not include the full path, but only the origin (http://anothercdn.example.com).
HTTP caching - HTTP
this includes static files such as images,
css files and javascript files, for example.
...this is typical of the technical resources included and linked from each web pages: javascript and
css files change infrequently, but when they change you want them to be updated quickly.
...this is very important when web sites have
css stylesheets or js scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same html elements.
CSP: style-src - HTTP
examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.
css" rel="stylesheet" type="text/
css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.
css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.
css>;rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that ar...
...e applied in javascript by setting the style attribute directly, or by setting
csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.
csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallowing javascript via the script-src csp directive.
...if 'unsafe-eval' isn't specified with the style-src directive, the following methods are blocked and won't have any effect:
cssstylesheet.insertrule()
cssgroupingrule.insertrule()
cssstyledeclaration.
csstext specifications specification status comment content security policy level 3the definition of 'style-src' in that specification.
Content-Security-Policy-Report-Only - HTTP
content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="
css/style.
css"> </head> <body> ...
...a browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/
css/style.
css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports", "disposition": "report" } } as you can see, the report includes the full path to the violating resource in blocked-uri.
...for example, when the signup.html would attempt to load
css from http://anothercdn.example.com/stylesheet.
css, the browser would not include the full path but only the origin (http://anothercdn.example.com).
HTTP Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a
css stylesheet a different value is set for the request than when fetching an image, video or a script.
... 113 dpr client hints, http, http header the dpr header is a client hints headers which represents the client device pixel ratio (dpr), which is the the number of physical device pixels corresponding to every
css pixel.
... 199 x-dns-prefetch-control dns, http, x-dns-prefetch-control, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images,
css, javascript, and so forth.
alignment-baseline - SVG: Scalable Vector Graphics
note: as a presentation attribute alignment-baseline can be used as a
css property.
... specifications specification status comment
css inline layoutthe definition of 'alignment-baseline' in that specification.
... candidate recommendation refers to the definition in
css inline layout and notes the changes to auto, before-edge, after-edge, text-before-edge, and text-after-edge scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification.
baseline-shift - SVG: Scalable Vector Graphics
note: as a presentation attribute baseline-shift can be used as a
css property.
... specifications specification status comment
css inline layoutthe definition of 'alignment-baseline' in that specification.
... candidate recommendation refers to the definition in
css inline layout and notes that vertical-align should be preferred.
cursor - SVG: Scalable Vector Graphics
this attribute behaves exactly like the
css cursor property except that if the browser supports the <cursor> element, you should be able to use it with the <funciri> notation.
... as a presentation attribute, it also can be used as a property directly inside a
css stylesheet, see
css cursor for further information.
...the syntax for this reference is the same as the
css uri.
dominant-baseline - SVG: Scalable Vector Graphics
note: as a presentation attribute, dominant-baseline can be used as a
css property.
... see
css dominant-baseline for further information.
...
css inline layoutthe definition of 'dominant-baseline' in that specification.
filter - SVG: Scalable Vector Graphics
note: as a presentation attribute, filter can be used as a
css property.
... see
css filter for further information.
...height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the
css filter property.
font-size-adjust - SVG: Scalable Vector Graphics
note: as a presentation attribute, font-size-adjust can be used as a
css property.
... see the
css font-size-adjust property for more information.
... specifications specification status comment
css fonts module level 3the definition of 'font-size-adjust' in that specification.
mask - SVG: Scalable Vector Graphics
note: as a presentation attribute mask can be used as a
css property.
...%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a
css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.
... as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the
css property mask default value none animatable yes specifications specification status comment
css masking module level 1the definition of 'mask' in that specification.
pointer-events - SVG: Scalable Vector Graphics
note: as a presentation attribute pointer-events can be used as a
css property.
...er you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit
css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mark...
..., <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted animatable yes for a detailed explanation of each possible value, have a look at the
css pointer-events documentation.
stop-color - SVG: Scalable Vector Graphics
note: with respect to gradients, svg treats the transparent keyword differently than
css.
... note: as a presentation attribute, stop-color can be used as a
css property.
... candidate recommendation added a note that in svg the transparent keyword is treated differently than in
css.
style - SVG: Scalable Vector Graphics
the style attribute allows to style an element using
css declarations.
...by default, the style sheet language is
css.
... note: in theory, the contentstyletype attribute could be used to specify styling languages other than
css, like xsl(t).
transform-origin - SVG: Scalable Vector Graphics
note: as a presentation attribute in svg, transform-origin corresponds in syntax and behavior to the transform-origin property in
css, and can be used as
css property to style svg.
... see the
css transform-origin property for more information.
... specifications specification status comment
css transforms level 1the definition of 'transform-origin' in that specification.
Gradients in SVG - SVG: Scalable Vector Graphics
1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/
css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradient2)"/> </svg> screenshotlive ...
...this can be assigned directly or through
css.
...this is done the same way you reference elements in
css, using a url.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
it shows how javascript and
css can be used to manipulate the picture in the same way you would script regular html.
...height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html,
css and javascript.
...the gradient color stops have their colors set by
css.
Texts - SVG: Scalable Vector Graphics
both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to
css 2.1.
...svg offers a set of attributes, many similar to their
css counterparts, to enable font selection.
... each of the following properties can be set as an attribute or via a
css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.
Using custom elements - Web Components
in this case we attach a shadow root to the custom element, use some dom manipulation to create the element's internal shadow dom structure — which is then attached to the shadow root — and finally attach some
css to the shadow root to style it.
...this.getattribute('img') : 'img/default.png'; const info = wrapper.appendchild(document.createelement('span')); info.setattribute('class','info'); // take attribute content and put it inside the info span info.textcontent = this.getattribute('data-text'); // create some
css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + //
css truncated for brevity // attach the created elements to the shadow dom this.shadowroot.append(style,wrapper); finally, we register our custom element on the customelementregistry using the define() method we mentioned earlier — in the parameters we specify the element name, an...
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.
css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.
Web technology for developers
documentation for web developers web developer reference a list of all references for web technologies, including those for html,
css, and so on.
...
css cascading style sheets are used to describe the appearance of web content.
... accessibility
css houdini
css: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology refer...
page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
ui/frame - Archive of obsolete content
experimental create html iframes, using bundled html,
css and javascript, that can be added to a designated area of the firefox user interface.
... for example, this html document defines a <select> element and a couple of <span> elements, and includes a
css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.
css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script...
Low-Level APIs - Archive of obsolete content
stylesheet/style modify styles using stylesheet files or
css rules.
... ui/frame create html iframes, using bundled html,
css and javascript, that can be added to a designated area of the firefox user interface.
Displaying annotations - Archive of obsolete content
the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').
css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); anno...
... annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/
css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Localization - Archive of obsolete content
it doesn't, yet, support localization of
css or content scripts, or the add-on's title and description that appear in the add-ons manager.
... there's no support for content scripts or
css files: at the moment, you can only localize strings appearing in javascript files that can require() sdk modules and in html.
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="l...
...this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </wi...
Dialogs and Prompts - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.
css" type="text/
css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script.
... example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 284776.
Forms related code snippets - Archive of obsolete content
document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/
css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { backgroun...
...if you want to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure
css, without javascript), please see this example.
Extension Theming Guidelines - Archive of obsolete content
skin packages just as extension code should exist in chrome content packages, all of the styling for an extension including
css and images should exist in a chrome skin package.
...
css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the
css selector.
Handling Preferences - Archive of obsolete content
they are heavily stylized in the firefox preferences window, so you should include the same
css file that is included in it (chrome://browser/skin/preferences/preferences.
css).
... this way you don't have to rewrite all the
css rules defined for firefox.
User Notifications and Alerts - Archive of obsolete content
custom alerts creating custom solutions for alerting the user is not complicated, given the advantages of xul overlays and
css positioning.
... another option is to also add a hidden box to the overlay, but use
css positioning to locate it where you want.
Beginner tutorials - Archive of obsolete content
creating reusable content with
css and xblthis page illustrates how you can use
css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.underscores in class and id namessummary: the use of the underscore character in
css can lead to major display problems in multiple browsers.
...this technical note examines the use of underscores in
css, and why they should be generally avoided in most circumstances.xml datathis page contains an example of how you can use
css with xml data.xul user interfacesthis page illustrates mozilla's specialized language for creating user interfaces.
Index of archived content - Archive of obsolete content
t iterator liveconnect liveconnect overview liveconnect reference jsexception jsobject msx emulator (jsmsx) old proxy api parallelarray properly using
css and javascript in xhtml documents examples reference server-side javascript back to the server: server-side javascript on the rise sharp variables in javascript standards-compliant authoring tools stopiteration styling the amazing ne...
...ting xforms forms using xforms and php xforms api reference xforms config variables xforms custom controls xforms custom controls examples xforms styling background-size foreach beginner tutorials creating reusable content with
css and xbl underscores in class and id names xml data xul user interfaces case sensitivity in class and id names creating a dynamic status bar extension creating a status bar extension element title gecko compatibility handbook getting the page url in npap...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the following xml datasources are used in this sample: http://web.archive.org/web/20090624020048/http://devedge-temp.mozilla.org/central/dom/catalog-new_en.xml http://web.archive.org/web/20090218052509/http://devedge-temp.mozilla.org/central/xml/catalog-new_en.xml http://web.archive.org/web/20100913225355/http://devedge-temp.mozilla.org/central/
css/catalog-new_en.xml http://web.archive.org/web/20090218052536/http://devedge-temp.mozilla.org/viewsource/catalog-new_en.xml data binder component this procedure traverses the dom that was returned via xmlhttprequest and generates markup based on the data provided in the dom nodes.
...bject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/
css/catalog-new_en.xml',this);return false;\" title=\"
css articles\">
css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- *...
Conclusion - Archive of obsolete content
how would you use javascript to determine whether the tree is open or closed and
css to style the icon accordingly?
... mozilla applications often store their
css and image files in a separate skin subdirectory within the installation directory.
Making a Mozilla installation modifiable - Archive of obsolete content
mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript,
css, and image files.
... xul, xbl, javascript, and
css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
copy the following files into the content sub-subdirectory: tinderstatusoverlay.xul tinderstatus.js tinderstatus.
css tb-busted.png tb-nostatus.png tb-success.png tb-testfailed.png these are the files we're going to put into the xpi.
... we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.
css" type="text/
css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.
css: statusbarpanel#tinderbox-status { list...
Making it into a static overlay - Archive of obsolete content
to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.
css" type="text/
css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" stat...
... <?xml-stylesheet href="chrome://navigator/skin/" type="text/
css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.
css" type="text/
css"?> <?xul-overlay href="chrome://navigator/content/navigatoroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/navextraoverlay.xul"?> <?xul-overlay href="chrome://navigator/content/linktoolbaroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/tinderstatusoverlay.xul"?> <?xul-ove...
Content states and the style system - Archive of obsolete content
content states are what gecko uses to implement the various state-dependent in
css (examples would be :hover, :active, :focus, :target, :checked).
... this is done by walking the list of all
css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector.
Documentation for BiDi Mozilla - Archive of obsolete content
this is determined in nstextfragment::setto the page includes a element with the attribute dir=rtl, either explicitly (nsgenerichtmlelement::mapcommonattributesinto), or as a consequence of a style rule (mapdeclarationtextinto in ns
cssstylerule.cpp) all these cases use nsdocument::enablebidi to set the flag mbidienabled.
...it is created when resolving text containing a unicode bidi control character, a bdo tag, or right-to-left alignment caused by a dir tag or
css.
Priority Content - Archive of obsolete content
cripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need to be done, put your name down) completed: soap in netscape gecko-based browsers original: soap in netscape gecko-based browsers wiki location: soap in gecko-based browsers migrators: doron rosenberg in progress:
css support charts original:
css support charts and archive.org mirror wiki location:
css support charts migrators: serge k.
... keller licensing: these
css charts appear to be under a cc:by-nc-sa license, please make note of that on the page when you do the migration.
Hacking wiki - Archive of obsolete content
for anonymous access use: svn co http://svn.mozilla.org/projects/deve...lla.org/trunk/ to see the skins properly, you'll need to also check out <tt>mozilla-org/
css</tt> to get the
css files needed: export cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/www cvs login cvs co mozilla-org/
css (when prompted to enter a password, type <tt>anonymous</tt>) setting up copy the contents of the <tt>trunk</tt> folder and the <tt>
css</tt> folder (note: the folder itself) into the <tt>www</tt> directory on your server.
...the <tt>
css</tt> folder contains files that are supposed to be in the <tt>/
css</tt> directory of the site.) to get a working install, you need to configure mediawiki.
New Skin Notes - Archive of obsolete content
--dria
css classes for feature and subfeature boxes, including required graphics.
...--callek add "what not to do"
css class to stylesheet, as discussed on talk:core javascript 1.5 reference.
Space Manager High Level Design - Archive of obsolete content
essentially a
css-specific wrapper for generic nsbanddata.
...th nsblockreflowstate::getavailablespace); the float frame that is get from the passed nsfloatcache argument is reflowed and its rect is retrieved with getrect; the floats margins are added; check if the float can be placed in the actual band: if not advance to the next band; check the float type and if it can be added to the space manager; align the float to its containing block top if rule
css2/9.5.1/4 is not respected; add the float using nsspacemanager::addrectregion compare the area that the float used to occupy with the area that it now occupies: if different, record the vertically affected interval using nsspacemanager::includeindamage use case 3: space manager is used to find available space to reflow into the nsblockframe makes use of the space manager indirectly to get the...
Tuning Pageload - Archive of obsolete content
in particular, the way things work right now is that the parser and content sink construct the dom; then every so often, the content sink lets the rendering model constructor (ns
cssframeconstructor) know that there are new dom nodes.
... the reason for this is that ns
cssframeconstructor is most efficient when doing a bunch of stuff at once instead of constructing rendering objects for one dom node at a time.
treecol.type - Archive of obsolete content
you need to apply
css to make the checkbox toggle.
... here is an example
css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
XUL Events - Archive of obsolete content
attribute: oninput overflow this event is only sent to a box or other layout element with a
css overflow property set to a value other than 'visible'.
...this applies to boxes and other layout elements with a
css overflow property other than 'visible'.
Box Model Details - Archive of obsolete content
you could also set margins using the
css margin property.
...a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1...
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.
css" type="text/
css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ alert("you pressed cancel!"); return tru...
... example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.
css" type="text/
css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ...
Styling a Tree - Archive of obsolete content
set the property on a row or cell, as in the following example: <treerow properties="makeitblue">
css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels.
...however,
css has a concept to access parts of elements considering them to be pseudo-elements.
XBL Attribute Inheritance - Archive of obsolete content
the following demonstrates this: xul: <box class="labeledtextbox" title="enter some text:" value="ok"/>
css: box.labeledtextbox { -moz-binding: url('chrome://example/skin/example.xml#labeledtextbox'); } xbl: <binding id="labeledtextbox"> <content> <xul:label xbl:inherits="value=title"/> <xul:textbox xbl:inherits="value"/> </content> </binding> the textbox inherits the value attribute directly.
...here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/>
css: box.okcancel { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button.
Using the standard theme - Archive of obsolete content
applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
... multiple <tt>xml-stylesheet</tt> processing instructions simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.
css" type="text/
css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the
css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.
css" type="text/
css"?> a...
XUL Questions and Answers - Archive of obsolete content
the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> ...
...you also have to write
css code to refer to which element(s) you wish to apply this font to.
The Implementation of the Application Object Model - Archive of obsolete content
if we ship a browser that does not have 100% support for
css2, for example, but we've extended html by adding 20-30 new tags, people are going to put down their blinders and see only the fact that we were off adding a whole slew of new stuff to html when we could have been firming up our standards story.
...the native widgets also wouldn't be fully
css responsive, which would mean they might look strange when placed in a dialog or on a toolbar with a rendered background.
menupopup - Archive of obsolete content
x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in
css pixels.
...the x and y coordinates are measured in
css pixels.
panel - Archive of obsolete content
x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in
css pixels.
...the x and y coordinates are measured in
css pixels.
splitter - Archive of obsolete content
ex="1"/> <splitter class="tree-splitter"/> <treecol id="date" label="date" flex="1"/> <splitter class="tree-splitter"/> </treecols> <treechildren/> </tree> splitter resizing and overflow the degree to which a splitter will resize a box, and what happens during the resize and after the limit is reached, depends on the height (or width) specified for the box as an attribute or in
css, the min-height (or min-width), the intrinsic height of the box contents, and the presence or absence of a collapse attribute on the splitter.
...(however, because of bug 513597, only specifying both minheight and minwidth attributes, or specifying min-height or min-width in
css, actually works to allow overflow.) ...
tree - Archive of obsolete content
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <?xml-stylesheet href="file://c:/main.
css" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols...
...> <treechildren> <treeitem> <treerow> <treecell value="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> </window>
css: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
Dialogs in XULRunner - Archive of obsolete content
dialog xul files can have dtd,
css, and javascript, just like windows.
... here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select fav...
Extentsions FAQ - Archive of obsolete content
could there be more than two images to reflect more than two states?does the rules in the
css file have to be in any particular order (if two rules match, which is chosen)?
... //setting the state document.getelementbyid("toolbar-button").setattribute("toolbar-button", "on"); //or document.getelementbyid("toolbar-button").setattribute("toolbar-button","off"); //
css #myexten-toolbar-button[myexten-toolbar-button="on"] { list-style-image: url("chrome://myexten/skin/toolbar-button.png"); -moz-image-region: rect(0px 24px 24px 0px);} #myexten-toolbar-button[myexten-toolbar-button="off"] { list-style-image: url("chrome://myexten/skin/toolbar-button-off.png"); -moz-image-region: rect(0px 24px 24px 0px);} to implement a third i would simply change add an attribute and the corresponding
css see http://www.w3.org/tr/rec-
css2/cascade.htm...
Creating a Skin for Firefox - Archive of obsolete content
introduction in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify
css.
... firefox uses standard gif, png, and jpeg images for the buttons and
css to style everything else in the interface.
Making sure your theme works with RTL locales - Archive of obsolete content
gecko 1.9.2 and later gecko 1.9.2 introduced the :-moz-locale-dir
css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right.
...all you have to do is add
css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have.
References - Archive of obsolete content
from web standards project web standards group from web standards group web page development: best practices from apple developer connection mozilla web author faq from henri sivonen making your web page compatible with mozilla from nicolás lichtmaier complete
css guide from westciv.com
css lessons and tutorials from alsacreations html and
css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven webpages.
...from matt kruse debugging html and
css is a well designed website explaining well the how, why and where of html validation,
css validation and debugging tools.
-moz-border-bottom-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-bottom-colors
css property sets a list of colors for the bottom border.
... /* single <color> value */ -moz-border-bottom-colors: #f0f0f0; /* multiple <color> values */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset; when an element has a border that is larger than a single
css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-left-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-left-colors
css property sets a list of colors for the left border.
... /* single <color> value */ -moz-border-left-colors: #f0f0f0; /* multiple <color> values */ -moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-left-colors: inherit; -moz-border-left-colors: initial; -moz-border-left-colors: unset; when an element has a border that is larger than a single
css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-right-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-right-colors
css property sets a list of colors for the right border.
... /* single <color> value */ -moz-border-right-colors: #f0f0f0; /* multiple <color> values */ -moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-right-colors: inherit; -moz-border-right-colors: initial; -moz-border-right-colors: unset; when an element has a border that is larger than a single
css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-top-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-top-colors
css property sets a list of colors for the top border.
... /* single <color> value */ -moz-border-top-colors: #f0f0f0; /* multiple <color> values */ -moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-top-colors: inherit; -moz-border-top-colors: initial; -moz-border-top-colors: unset; when an element has a border that is larger than a single
css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-text-blink - Archive of obsolete content
the -moz-text-blink non-standard mozilla
css extension specifies the blink mode.
... formal syntax none | blink example .example { -moz-text-blink: blink; } specifications this property was defined in an old draft of the
css 3 text specification.
-moz-window-shadow - Archive of obsolete content
the -moz-window-shadow
css property specifies whether a window will have a shadow.
...this version introduced the -moz-window-shadow
css property to provide a way to turn off unwanted shadows.
-ms-accelerator - Archive of obsolete content
the -ms-accelerator
css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.
... in internet explorer 8 (ie8) the -ms-accelerator attribute is an extension to
css, and can be used as a synonym for accelerator in ie8 standards mode.
-ms-block-progression - Archive of obsolete content
the -ms-block-progression
css property is a microsoft extension that specifies the block progression and layout orientation.
... this property is based on the block-progression property of the
css3 text layout module.
-ms-scroll-translation - Archive of obsolete content
the -ms-scroll-translation
css property is a microsoft extension that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.
... the default
css templates for windows apps using javascript, "ui-light.
css" and "ui-dark.
css", set this property to vertical-to-horizontal by default on the <html> element.
-ms-text-autospace - Archive of obsolete content
the -ms-text-autospace
css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.
... this property is an extension to
css, and can be used as a synonym for text-autospace in ie8 standards mode.
-ms-wrap-flow - Archive of obsolete content
the -ms-wrap-flow
css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.
...for more information about the impact of an exclusion element on content flow, see the terminology section of the
css exclusions module level 1 specification.
-ms-wrap-through - Archive of obsolete content
the -ms-wrap-through
css property is a microsoft extension that specifies how content should wrap around an exclusion element.
...for more information about exclusion elements' impact on content flow, see the terminology section of the
css exclusions module level 1 specification.
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
the :-moz-system-metric(windows-default-theme)
css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
...</p> <p id="notsupported">theme detection is not supported.</p>
css content #defaultthemes, #nondefaultthemes { background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(windows-default-theme) { background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(windows-default-theme)) { background-color: #a0ffa0; } #notsupported:-moz-system-metric(windows-default-theme), #notsupported:not(:-moz-system-metric(windows-default-theme)) { display: ...
::-ms-expand - Archive of obsolete content
the ::-ms-expand
css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
... allowable properties only the following
css properties can be used in a rule with ::-ms-expand in its selector.
::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower
css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... allowable properties only the following
css properties can be used in a rule with ::-ms-fill-lower in its selector.
::-ms-reveal - Archive of obsolete content
the ::-ms-reveal
css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">.
... allowable properties only the following
css properties can be used in a rule with ::-ms-reveal in its selector.
::-ms-ticks-after - Archive of obsolete content
the ::-ms-ticks-after
css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear after the track of a slider control.
... allowable properties only the following
css properties can be used in a rule with ::-ms-ticks-after in its selector.
::-ms-ticks-before - Archive of obsolete content
the ::-ms-ticks-before
css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear before the track of a slider control.
... allowable properties only the following
css properties can be used in a rule with ::-ms-ticks-before in its selector.
::-ms-tooltip - Archive of obsolete content
the ::-ms-tooltip
css pseudo-element is a microsoft extension that represents the tooltip of a slider control.
... allowable properties only the following
css properties can be used in a rule with ::-ms-tooltip in its selector.
::-ms-value - Archive of obsolete content
the ::-ms-value
css pseudo-element is a microsoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control.
... allowable properties only the following
css properties can be used in a rule with ::-ms-value in its selector.
azimuth - Archive of obsolete content
in combination with elevation, the azimuth
css property enables different audio sources to be positioned spatially for aural presentation.
... examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ specifications specification status comment
css level 2 (revision 1)the definition of 'azimuth' in that specification.
display-inside - Archive of obsolete content
the display-inside
css property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box.
... specifications specification status comment
css display module level 3the definition of 'display-inside' in that specification.
display-outside - Archive of obsolete content
the display-outside
css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.
... specifications specification status comment
css display module level 3the definition of 'display-outside' in that specification.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
as stated earlier, aptana jaxer is built using the mozilla browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io,
css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards.
... listing 6 - creating the user interface <link href="/jaxer_examples/js/ext-2.1/resources/
css/ext-all.
css" type="text/
css" rel="stylesheet"/> <script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> <script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/
css/main.
css" type="text/
css" rel="stylesheet"/> <script runat="both" src="/jaxer_examples/js/validatecomments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_comments; var form_...
Archived open Web documentation - Archive of obsolete content
browser feature detection an experimental approach to discovering degree of support for standards
css obsolete
css features displaying notifications (deprecated) 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.
... properly using
css and javascript in xhtml documents xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a reformulation of html 4 as an xml 1.0 application.
Web Standards - Archive of obsolete content
tools firebug extension web developer extension markup validation service (w3c)
css validation service (w3c) examples mozilla 1.0 demos - showing off what can be done with web standards.
... gecko demos
css zen garden eric meyers's
css/edge w3c dom demos related topics
css, dhtml, html, web development, xhtml, xml the web standards project ...
Archive of obsolete content
on october 11, 2002, wired launched a brand-new site design that uses validating xhtml for its structure and a small collection of
css files for its layout.
...
css3
css3 is the latest evolution of the cascading style sheets language and aims at extending
css2.1.
Index - Game development
27 crisp pixel art look with image-rendering 2d, 3d,
css, canvas, games, javascript, webgl, image-rendering, pixel this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors.
...we touch on
css transitions and
css animations, and javascript loops involving window.requestanimationframe.
Introduction to game development for the Web - Game development
ion technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html,
css, svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the web with your next game project.
... html and
css together, these two technologies let you build, style, and lay out your game's user interface.
GLSL Shaders - Game development
<script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> it contains some basic information like the document <title>, and some
css to set the width and height of the <canvas> element that three.js will insert on the page to be the full size of the viewport.
...vertexshader: document.getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render();
css body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } result conclusion this article has taught the very basics of shaders.
Create the Canvas and draw on it - Game development
ml> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic
css in the header.
...this is because, just as with
css, color can be specified as a hexadecimal value, a color keyword, the rgba() function, or any of the other available color methods.
Visual typescript game engine - Game development
.js ├── tsconfig.json ├── tslint.json ├── launch.json ├── workplace.code-workspace logo.png license ├── build/ (this is auto generated) | ├── externals/ | ├── templates/ | ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├── style/ | | ├── styles.
css | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── filebufferreader.js | | | | | ├── rtcmulticonnection2.js | | | | | ├── rtcmulticonnection3.js | | | | | ├── linkify.js | | | | | ├── gethtmlmediaelement.js | | | | | �...
...html/
css is not prior to this project.
Fallback alignment - MDN Web Docs Glossary: Definitions of Web-related terms
in
css box alignment, a fallback alignment is specified in order to deal with cases where the requested alignment cannot be fullfilled.
... first baseline start last baseline safe end baseline start space-between flex-start (start) space-around center space-evenly center stretch flex-start (start) learn more
css box alignment ...
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
flexbox is the commonly-used name for the
css flexible box layout module, a layout model for displaying items in a single dimension — as a row or as a column.
... learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading
css flexible box layout module level 1 specification
css flexbox guide: basic concepts of flexbox
css flexbox guide: relationship of flexbox to other layout methods
css flexbox guide: aligning items in a flex container
css flexbox guide: ordering flex items
css flexbox guide: controlling ratios of flex items along the main axis
css flexbox guide: mastering wrapping of flex items
css flexbox gu...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
in a
css grid layout, a grid cell is the smallest unit you can have on your
css grid.
... padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns further reading
css grid layout guide: basic concepts of grid layout definition of grid cells in the
css grid layout specification ...
Grid container - MDN Web Docs Glossary: Definitions of Web-related terms
using the value grid or inline-grid on an element turns it into a grid container using
css grid layout, and any direct children of this element become grid items.
... learn more property reference grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows grid grid-template further reading
css grid layout guide: basic concepts of grid layout ...
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using
css grid layout.
...nd]; grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-column-start: col1-start; grid-column-end: col3-start; grid-row-start: row1-start; grid-row-end: rows-end; } learn more property reference grid-template-columns grid-template-rows grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row further reading
css grid layout guide: basic concepts of grid layout
css grid layout guide: line-based placement with
css grid
css grid layout guide: layout using named grid lines
css grid layout guide:
css grids, logical values and writing modes definition of grid lines in the
css grid layout specification ...
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
these can be created in
css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties.
... learn more property reference grid-column-gap grid-row-gap grid-gap further reading
css grid layout guide: basic concepts of grid layout definition of gutters in the
css grid layout specification ...
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
parsing can continue when a
css file is encountered, but <script> tags—particularly those without an async or defer attribute—blocks rendering, and pauses parsing of html.
... when the browser encounters
css styles, it parses the text into the
css object model (or
cssom), a data structure it then uses for styling layouts and painting.
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
in
css they can be represented as a single 24-bit integer in hexadecimal notation (for example, #add8e6 is light blue), or in functional notation as three separate 8-bit integers (for example, rgb(46, 139, 87) is sea green).
... learn more general knowledge rgb color model on wikipedia learn about it
css data type: <color> ...
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard
css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
...
css prefixes the major browsers use the following prefixes: -webkit- (chrome, safari, newer versions of opera, almost all ios browsers including firefox for ios; basically, any webkit based browser) -moz- (firefox) -o- (old pre-webkit versions of opera) -ms- (internet explorer and microsoft edge) sample usage: -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: al...
Whitespace - MDN Web Docs Glossary: Definitions of Web-related terms
they are often used to separate tokens in html,
css, javascript, and other computer languages.
...in the form of text, they are treated as normal space characters and sequential whitespaces are collapsed as a single space in many cases (this behavior can be changed by the white-space
css property.
Mobile accessibility - Learn web development
prerequisites: basic computer literacy, a basic understanding of html,
css, and javascript, and an understanding of the previous articles in the course.
... control mechanisms in our
css and javascript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see mouse-specific events).
What is accessibility? - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css.
... html: a good basis for accessibility
css and javascript accessibility best practices wai-aria basics accessible multimedia mobile accessibility accessibility troubleshooting see also wcag perceivable operable understandable robust ...
Test your skills: The Box Model - Learn web development
the aim of this task is to help you check your understanding of the
css box model.
...what can you add to your
css to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline?
Test your skills: Grid Layout - Learn web development
this aim of this task is to get you working with
css grid layout, and test that you understand how a grid and grid items behave.
...by editing the
css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.
What is a web server? - Learn web development
(for example, html documents, images,
css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
... hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images,
css stylesheets, javascript files, fonts, and video.
Example 2 - Learn web development
>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form>
css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 1...
...n>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form>
css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } result for no js ...
How to structure a web form - Learn web development
to start with, make a local copy of our blank template file and the
css for our payment form in a new directory on your computer.
... apply the
css to the html by adding the following line inside the html <head>: <link href="payment-form.
css" rel="stylesheet"> next, create your form by adding the outer <form> element: <form> </form> inside the <form> tags, add a heading and paragraph to inform users how required fields are marked: <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> next we'll add a larger section of code into the form, below our previous entry.
Dealing with files - Learn web development
styles folder: this folder will contain the
css code used to style your content (for example, setting text and background colors).
... dealing with files html basics
css basics javascript basics publishing your website how the web works ...
HTML basics - Learn web development
this includes things like keywords and a page description that you want to appear in search results,
css to style our content, character set declarations and more.
... dealing with files html basics
css basics javascript basics publishing your website how the web works ...
Installing basic software - Learn web development
a library tends to be an existing javascript or
css file that provides ready-rolled functionality for you to make use of in your code.
... dealing with files html basics
css basics javascript basics publishing your website how the web works ...
Publishing your website - Learn web development
using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to enter html,
css and javascript, and then display the result of that code as a website — all in one browser tab.
... dealing with files html basics
css basics javascript basics publishing your website how the web works ...
Define terms with HTML - Learn web development
remember, html is not a visual medium; we need
css for all visual effects.
... the
css font-weight property is what you need here: dt { font-weight: bold; } this produces the slightly more readable result below: learn more <dfn> <dl> <dt> <dd> how to use the aria-describedby attribute ...
Use HTML to solve common problems - Learn web development
to solve presentation issues, use
css, or use scripting to make your page interactive.
... how to use
css within a webpage how to use javascript within a webpage embedded content how to embed a webpage within another webpage how to add flash content within a webpage uncommon or advanced problems beyond the basics, html is very rich and offers advanced features for solving complex problems.
Debugging HTML - Learn web development
the best strategy is to start by running your html page through the markup validation service — created and maintained by the w3c, the organization that looks after the specifications that define html,
css, and other web technologies.
... you will know when all your errors are fixed when you see the following banner in your output: summary so there we have it, an introduction to debugging html, which should give you some useful skills to count on when you start to debug
css, javascript, and other types of code later on in your career.
Mozilla splash page - Learn web development
note: the example html file contains quite a lot of
css, to style the page.
... you don't need to touch the
css, just the html inside the <body> element — as long as you insert the correct markup, the styling will make it look correct.
From object to iframe — other embedding technologies - Learn web development
using this isn't really recommended any more, as the same effect can be better achieved using border: none; in your
css.
... if you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum: <embed> <object> url of the embedded content src data accurate media type of the embedded content type type height and width (in
css pixels) of the box controlled by the plugin height width height width names and values, to feed the plugin as parameters ad hoc attributes with those names and values single-tag <param> elements, contained within <object> independent html content as fallback for an unavailable resource not supported (<noembed> is obsolete) contained within <object>, aft...
Video and audio content - Learn web development
this kind of technology worked ok, but it had a number of problems, including not working well with html/
css features, security issues, and accessibility issues.
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video size either with these attributes or with
css.
Multimedia and Embedding - Learn web development
in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to
css background images.
...responsive images are just one part of responsive design, a future
css topic for you to learn.
Introduction to events - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, javascript first steps.
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> </div> when the <button> is selected, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's
css contains these two classes, which position the box off the screen and on the screen, respectively): btn.onclick = function() { videobox.setattribute('class', 'showing'); } we then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>.
Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/
css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.
css"/> you can then start using the objects available in that library.
... now, to start the example off, make copies of nytimes_start.html and nytimes.
css in a new directory on your computer.
Handling text — strings in JavaScript - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and
css, an understanding of what javascript is.
...html provides structure and meaning to our text,
css allows us to precisely style it, and javascript contains a number of features for manipulating strings, creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
JavaScript First Steps - Learn web development
get started prerequisites before starting this module, you don't need any previous javascript knowledge, but you should have some familiarity with html and
css.
... introduction to
css.
Introducing JavaScript objects - Learn web development
get started prerequisites before starting this module, you should have some familiarity with html and
css.
... you are advised to work through the introduction to html and introduction to
css modules before starting on javascript.
JavaScript — Dynamic client-side scripting - Learn web development
get started prerequisites javascript is arguably more difficult to learn than related technologies such as html and
css.
...start by working through the following modules: getting started with the web introduction to html introduction to
css having previous experience with other programming languages might also help.
Multimedia: Images - Learn web development
the first thing to check is that your content images use <img> elements and your background images are defined in
css with background-image — images referenced in <img> elements are assigned a higher loading priority than background images.
... html performance features
css performance features fonts and performance mobile performance focusing on performance ...
What is web performance? - Learn web development
there are a lot of best practices to consider in making apps feel smooth, for example using
css animations rather than javascript for animation, and minimizing the number of repaints the ui requires due to changes in the dom.
... html performance features
css performance features fonts and performance mobile performance focusing on performance ...
Learning area release notes - Learn web development
march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules:
css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the html forms module has been significantly updated: it has been retitled web forms, and moved out of the html topic area to recognise that it covers more than just html form elements — it also covers styling, validation, the basics of how to send data and process it on the se...
...you can see these on:
css layout: flexbox
css layout: grids
css layout: floats december 2019 we are adding a new type of assessment article to the learning area — "test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on.
Introduction to the server side - Learn web development
requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically:
css, javascript, images, pre-created pdf files etc).
... client-side code is written using html,
css, and javascript — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system).
Server-side web frameworks - Learn web development
with asp.net you can quickly create web sites based on html,
css, and javascript, scale them for use by millions of users and easily add more complex capabilities like web apis, forms over data, or real time communications.
... json and html/xml parsers and generators with
css selector support.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Ember interactivity: Events, classes and state - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Ember resources and troubleshooting - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Routing in Ember - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Accessibility in React - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
React interactivity: Events and state - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
React interactivity: Editing, filtering, conditional rendering - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Dynamic behavior in Svelte: working with variables and props - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html,
css, and javascript languages, and have knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Using Vue computed properties - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Vue conditional rendering: editing existing todos - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Creating our first Vue component - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Adding a new todo form: Vue events, methods, and models - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Focus management with Vue refs - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Rendering a list of Vue components - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Vue resources - Learn web development
prerequisites: familiarity with the core html,
css, and javascript languages, knowledge of the terminal/command line.
... componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with
css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte s...
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like html,
css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... get started prerequisites you should really learn the basics of the core html,
css, and javascript languages first before attempting to use many the tools detailed here.
Accessibility API cross-reference
(use
css instead).
...an select more than one of the children multiselectable multiselectable multi_selectable aria-multiselectable=true currently off-screen offscreengrouping n/a n/a n/a indicates that every pixel is painted within the object's rectangular region n/a opaque opaque n/a bgcolor (deprecated in favor of
css background-color) object is currently pressed down.
Accessibility Features in Firefox
also, usercontent.
css allows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed.
...in much the same way that user
css lets you take control of a web page's style, user scripts let you easily control any aspect of a web page's design or interaction.
Contributing to the Mozilla code base
project skills documentation/onboarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/
css firefox developers documentation devtools javascript and/or html/
css contribute to devtools add-ons javascript and/or html/
css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "feni...
...x") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla hubs javascript and/or html/
css, vr contribute to mozilla hubs servo rust contribute to servo there are even many ways to contribute to the mozilla mission without programming.
Performance best practices for Firefox front-end engineers
when
css is applied to a document (html or xul, it doesn’t matter), the browser does calculations to figure out which
css styles will apply to each element.
... this happens the first time the page loads and the
css is initially applied, but can happen again if javascript modifies the dom.
mozbrowserscroll
details the details property returns an anonymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in
css pixels — from the top of the viewport.
... left a number representing the new horizontal scroll position of the <iframe> viewport — in
css pixels — from the left of the viewport.
mozbrowserscrollareachanged
details the details property returns an anonymous javascript object with the following properties: width a number representing the new scroll area width of the <iframe> viewport, in
css pixels.
... height a number representing the new scroll area height of the <iframe> viewport, in
css pixels.
HTMLIFrameElement.sendMouseEvent()
x a number representing the x position of the cursor relative to the browser <iframe>'s visible area in
css pixels.
... y a number representing the y position of the cursor relative to the browser <iframe>'s visible area in
css pixels.
MozBeforePaint
gecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with
css transitions and smil animations being performed within the same window.
... the timestamp property of this event will be set to the time when the animation frame is sampled; this is relevant when trying to synchronize mozrequestanimationframe animations with smil animations or
css transitions.
Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat
css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
...responsiveness trade-off frame construction runs to completion
css parsing runs to completion reflow runs to completion (mostly) painting runs to completion future (?) tech talks content model and dom - jst, jkeiser parser and content sink (esp.
CustomizableUI.jsm
abswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var
css = '';
css += '@-moz-document url("chrome://browser/content/browser.xul") {';
css += ' #id_of_my_widget_within_customizableui_and_dom {';
css += ' list-style-image: url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar
css += ' }';
css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],';
css += ' toolbarpaletteite...
...m[place="palette"] > #id_of_my_widget_within_customizableui_and_dom {';
css += ' list-style-image: url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon for when in toolbar
css += ' }';
css += '}'; var
cssenc = encodeuricomponent(
css); var newuriparam = { aurl: 'data:text/
css,' +
cssenc, aorigincharset: null, abaseuri: null } var
cssuri = services.io.newuri(newuriparam.aurl, newuriparam.aorigincharset, newuriparam.abaseuri); //store this in a global var so you can call it when removing the widget sss.loadandregistersheet(
cssuri, sss.author_sheet); /**************/ // when you want to remove this widget run this code: // sss.unregistersheet(
cssuri, sss.author_sheet); //remove the style sheet we applied // customizableui.destroywidget('id_of_my_widget_withi...
source-editor.jsm
constant value description sourceeditor.modes.
css "
css" cascading style sheet.
... theme string a string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in theme constants, or you may provide your own
css file reference.
Basics
invisibletimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>5</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>5</mn> </msup> </mrow> </maction> </mtd> </mtr> </mtable> </mtd> </mtr> </mtable> </math> </div>
css content .control { text-decoration: none; font-weight: bold; font-size: 200%; } input { color: red; } [class="inputmath"] { border: 1px dotted; } javascript content function setselection(id,value) { document.getelementbyid(id).setattribute("selection",value); } function expand() { setselection("a11","2"); setselection("a12","2"); setselection("a13","2"); setselection("a21","2"); set...
...;</mo> <mi>c</mi> </msub> <mfrac> <mrow> <mi>f</mi> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math>
css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Extras
tle <math display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> rather than repeating the instructions, some
css might be used to provide a visual cue.
...tle] { color: blue; }</code> <math class="cue" display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p>
css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </m...
Fonts for Mozilla's MathML engine
note that using the add-on is not optimal since it forces your gecko browser to load a
css stylesheet on each page you visit as well as web math fonts on all pages with mathml content.
...bertinus math lucida bright math minion math stix math tex gyre bonum math tex gyre pagella math tex gyre schola math tex gyre termes math xits math fira math (sans-serif typeface, under development) gfs neohellenic math (sans-serif typeface) using mathematical fonts on web pages starting with gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), it is now easy to set up the
css style (and optional woff fonts) to use on your web site.
NSS 3.15.3.1 release notes
bug 946351 - misissued google certificates from d
cssi new in nss 3.15.3.1 new functionality no new major functionality is introduced in this release.
...bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from d
cssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
WebReplayRoadmap
dom/
css integration (partially implemented) when paused, the inspector panel can be used to inspect the dom and
css state of the page.
... allowing
css to be changed while paused somewhere in the recording and update graphics with the effects of those changes.
nsIContentViewManager
void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long alength, optional [retval, array, size_is(alength)] out nsicontentview aresult ); parameters axpx the x coordinate of the anchor point of the rectangle, in
css pixels.
... aypx the y coordinate of the anchor point of the rectangle, in
css pixels.
nsIDOMFontFace
attribute type description
cssfamilyname domstring a family name that could be used in
css font-family (not necessarily the actual name that was used, due to aliases, generics, localized names, and so on).
... rule nsidom
cssfontfacerule null if no associated @font-face rule.
nsIDOMWindow
method overview nsidom
cssstyledeclaration getcomputedstyle(in nsidomelement elt, [optional] in domstring pseudoelt); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes ...
... nsidom
cssstyledeclaration getcomputedstyle( in nsidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window.
nsIDOMXULElement
style nsidom
cssstyledeclaration read only.
... obsolete since gecko 1.9 returns an object that may be used to read or write individual
css style properties for the element.
Building an Account Manager Extension
furthermore you should include the accountmanager.js script and accountmanage.
css styles.
... <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://messenger/skin/accountmanage.
css" type="text/
css"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.js"/> <dialogheader title="devmo example panel"/> <description> this panel is only shown in imap accounts..
nsIStyleSheetService
a user sheet loaded via this api will come before usercontent.
css and userchrome.
css in the cascade (so the rules in it will have lower precedence than rules in those sheets).
... an agent sheet loaded via this api will come after ua.
css in the cascade (so the rules in it will have higher precedence than rules in ua.
css).
nsITreeBoxObject
the coordinate system is the client coordinate system for the document this boxobject lives in, and the units are
css pixels.
...the coordinate system is the client coordinate system for the document this boxobject lives in, and the units are
css pixels.
Tips and Tricks from the newsgroups
load an extension in its own tab run shell scripts from an extension (for example, to create a symlink) get extension metadata call java from thunderbird extensions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using
css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message...
... repeat image display using
css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Using popup notifications
you just need to provide the appropriate
css.
...you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this
css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } ...
DOM Inspector internals - Firefox Developer Tools
this separation allows for viewers to be self-contained, with a viewer's xul defined in its own document and loaded in its own scope, without fear of collisions in the xul,
css, or js.
...its contents should resemble the following: extensions/ … jsutil/ … prefs/ … res/ … tests/ … viewers/ … browseroverlay.xul commandoverlay.xul editingoverlay.xul flasher.js hooks.js inspector.
css inspector.js inspectoroverlay.xul inspector.xml inspector.xul keysetoverlay.xul object.js object.xul popupoverlay.xul sidebar.js sidebar.xul statusbaroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxoverlay.xul utils.js venkmanoverlay.xul viewerregistry.js overlays you will notice th...
Browser Console - Firefox Developer Tools
so it logs the same sorts of information as the web console - network requests, javascript,
css, and security errors and warnings, and messages explicitly logged by javascript code.
... browser console logging the browser console logs the same sorts of messages as the web console: http requests warnings and errors (including javascript,
css, security warnings and errors, and messages explicitly logged by javascript code using the console api).
Select an element - Firefox Developer Tools
the selected element is shown in the html pane and its
css is displayed in the
css pane.
...this lets you see the rules for the element in the
css pane, but conveniently select another element in the page.
Firefox Developer Tools
you can use them to examine, edit, and debug html,
css, and javascript.
... style editor view and edit
css styles for the current page.
AnimationEvent() - Web APIs
animationname optional a domstring containing the value of the animation-name
css property associated with the transition.
... specifications specification status comment
css animationsthe definition of 'animationevent()' in that specification.
AnimationEvent.animationName - Web APIs
the animationevent.animationname read-only property is a domstring containing the value of the animation-name
css property associated with the transition.
... syntax name = animationevent.animationname specifications specification status comment
css animationsthe definition of 'animationevent.animationname' in that specification.
Background Tasks API - Web APIs
the
css is not shown, since it's not particularly crucial to understanding this functionality.
...
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; width: 400px; height:500px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-radius: 6p...
CanvasRenderingContext2D.drawWindow() - Web APIs
it is given as a
css color string (for example, rgb() or rgba()).
... with this method, it is possible to fill a hidden iframe with arbitrary content (e.g.,
css-styled html text, or svg) and draw it into a canvas.
Drawing text - Web APIs
this string uses the same syntax as the
css font property.
... these properties might be familiar to you, if you have worked with
css before.
Optimizing canvas - Web APIs
> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain
css for large background images if you have a static background image, you can draw it onto a plain <div> element using the
css background property and position it under the canvas.
... scaling canvas using
css transforms
css transforms are faster since they use the gpu.
DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div>
css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = docume...
...; } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change
css styles and displayed text element.style.
csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
Document.alinkColor - Web APIs
one alternative is the
css selector :active.
... another alternative is document.body.alink, although this is deprecated in html 4.01 in favor of the
css alternative.
Document: animationend event - Web APIs
the animationend event is fired when a
css animation has completed.
... specifications specification status comment
css animations working draft initial definition ...
Document: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a
css animation ends, and another one begins.
... specifications specification status comment
css animations working draft initial definition ...
Document: animationstart event - Web APIs
the animationstart event is fired when a
css animation has started.
... specifications specification status comment
css animations working draft initial definition ...
Document.bgColor - Web APIs
the recommended alternative is use of the
css style background-color which can be accessed through the dom with document.body.style.backgroundcolor.
... another alternative is document.body.bgcolor, although this is also deprecated in html 4.01 in favor of the
css alternative.
Document.fgColor - Web APIs
the recommended alternative is the
css property color (e.g., document.body.style.color = "red").
... another alternative is document.body.text, although this is deprecated in html 4.01 in favor of the
css alternative above.
Document.fonts - Web APIs
}); specifications specification status comment
css font loading module level 3the definition of 'fontfaceset' in that specification.
... full support 60edge full support 79firefox full support 41 full support 41 no support 35 — 41disabled disabled from version 35 until version 41 (exclusive): this feature is behind the layout.
css.font-loading-api.enabled preference (needs to be set to true).
Document: transitioncancel event - Web APIs
the transitioncancel event is fired when a
css transition is canceled.
... specifications specification status comment
css transitionsthe definition of 'transitioncancel' in that specification.
Document: transitionend event - Web APIs
the transitionend event is fired when a
css transition has completed.
... specifications specification status comment
css transitionsthe definition of 'transitionend' in that specification.
Document: transitionrun event - Web APIs
the transitionrun event is fired when a
css transition is first created, i.e.
... specifications specification status comment
css transitionsthe definition of 'transitionrun' in that specification.
Document: transitionstart event - Web APIs
the transitionstart event is fired when a
css transition has actually started, i.e., after any transition-delay has ended.
... specifications specification status comment
css transitionsthe definition of 'transitionstart' in that specification.
Document.vlinkColor - Web APIs
the recommended alternative is to get/set the color of the
css :visited pseudo-class on html <a> elements (e.g., a:visited {color:red;}).
... another alternative is document.body.vlink, although this is deprecated in html 4.01 in favor of the
css alternative.
Locating DOM elements using selectors - Web APIs
for example, to select all paragraph (p) elements in a document whose
css class is either warning or note, you can do the following: var special = document.queryselectorall( "p.warning, p.note" ); you can also query by id.
... you may use any
css selectors with the queryselector() and queryselectorall() methods.
Document Object Model (DOM) - Web APIs
the html dom api provides access to various browser features such as tabs and windows,
css styles and stylesheets, browser history, and so forth.
...enumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svg
cssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...
Element.classList - Web APIs
document.documentelement.firstchild.appendchild(document.createelement('style')).stylesheet.
csstext=( '_*{x-uclp:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' + // ie6 '[class]{x-uclp/**/:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' //ie7-8 ); } })(window); // 3.
... a minor note is that in ie6-7, this polyfill uses the window[" ucl"] property on the window object for communicating with the
css expressions, the x-uclp
css property on all elements, and the element[" ucl"] property on all elements to allow garbage collection and boost performance.
Element.clientWidth - Web APIs
the element.clientwidth property is zero for inline elements and elements with no
css; otherwise, it's the inner width of an element in pixels.
... example specification specification status comment
css object model (
cssom) view modulethe definition of 'clientwidth' in that specification.
Element.getAnimations() - Web APIs
note: this array includes
css animations,
css transitions, and web animations.
...this includes animations that target any
css pseudo-elements attached to element or one of its descendents.
Element: mouseenter event - Web APIs
combined with the corresponding mouseleave (which is fired at the element when the mouse exits its content area), the mouseenter event acts in a very similar way to the
css :hover pseudo-class.
... html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div>
css styling the div to make it more visible.
Element.querySelector() - Web APIs
syntax element = baseelement.queryselector(selectors); parameters selectors a group of selectors to match the descendant elements of the element baseelement against; this must be valid
css syntax, or a syntaxerror exception will occur.
... find a specific element with specific values of an attribute in this first example, the first <style> element which either has no type or has type "text/
css" in the html document body is returned: var el = document.body.queryselector("style[type='text/
css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches.
Element.scrollHeight - Web APIs
</textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form>
css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop ===...
...teelement("span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status comment
css object model (
cssom) view modulethe definition of 'element.scrollheight' in that specification.
Element.scrollLeft - Web APIs
example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button>
css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment
css obje...
...ct model (
cssom) view modulethe definition of 'scrollleft' in that specification.
FontFace.featureSettings - Web APIs
syntax var featuresettingdescriptor = fontface.featuresettings; fontface.featuresettings = featuresettingdescriptor; value a
cssomstring containing a descriptor.
... specifications specification status comment
css font loading module level 3the definition of 'featuresettings' in that specification.
FontFace.stretch - Web APIs
syntax var stretchdescriptor = fontface.stretch; fontface.stretch = stretchdescriptor; value a
cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule.
... specifications specification status comment
css font loading module level 3the definition of 'stretch' in that specification.
FontFace.style - Web APIs
syntax var style = fontface.style; fontface.style = value; value a
cssomstring containing the descriptors defined in the style sheet's @font-face rule.
... specifications specification status comment
css font loading module level 3the definition of 'style' in that specification.
FontFace.unicodeRange - Web APIs
syntax var unicoderangedescriptor = fontface.unicoderange; fontface.unicoderange = unicoderangedescriptor; value a
cssomstring containing a descriptor as it would appear in a style sheet's @font-face rule.
... specifications specification status comment
css font loading module level 3the definition of 'unicoderange' in that specification.
FontFace.variant - Web APIs
syntax var variantsubproperty = fontface.variant; fontface.variant = variantsubproperty; value a
cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule.
... specifications specification status comment
css font loading module level 3the definition of 'variant' in that specification.
FontFace.weight - Web APIs
syntax var weightdescriptor = fontface.weight; fontface.weight = weightdescriptor; value a
cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule.
... specifications specification status comment
css font loading module level 3the definition of 'weight' in that specification.
FontFaceSet.check() - Web APIs
syntax bool = afontfaceset.check(font); bool = afontfaceset.check(font, text); returns a boolean that is true if the font list is available parameters font: a font specification using the
css value syntax, e.g.
... specifications specification status comment
css font loading module level 3the definition of 'check' in that specification.
FontFaceSet.load() - Web APIs
parameters font: a font specification using the
css value syntax, e.g.
... document.fonts.load("12px myfont", "ß").then(…); specifications specification status comment
css font loading module level 3the definition of 'load' in that specification.
FontFaceSetLoadEvent - Web APIs
the fontfacesetloadevent interface of the the
css font loading api is fired whenever a fontfaceset loads.
... specifications specification status comment
css font loading module level 3the definition of 'fontfacesetloadevent' in that specification.
Guide to the Fullscreen API - Web APIs
presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds
css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%".
...to get the same fullscreen behavior in webkit, you need to add your own "width: 100%; height: 100%;"
css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use
css rules to adjust the inner element to match the appearance you want.
HTMLCanvasElement - Web APIs
if no [separate]
css height is assigned to the <canvas>, then this value will also be used as the height of the canvas in the length-unit
css pixel.
...if no [separate]
css width is assigned to the <canvas>, then this value will also be used as the width of the canvas in the length-unit
css pixel.
HTMLContentElement.select - Web APIs
it is a domstring containing a space-separated list of
css selectors that select the content to insert in place of the <content> element.
... syntax object.select = "
cssselector
cssselector ..."; example // select <h1> elements and elements with class="error" mycontentobject.select = "h1 .error"; specifications this feature is no longer defined by any standards.
HTMLElement.hidden - Web APIs
this is quite different from using the
css property display to control the visibility of an element.
...now get out there and do awesome things awesomely to make the world more awesome!</p> </div>
css the content is styled using the
css below.
HTMLElement.offsetWidth - Web APIs
typically, offsetwidth is a measurement in pixels of the element's
css width, including any borders, padding, and vertical scrollbars (if rendered).
... example specification specification status comment
css object model (
cssom) view modulethe definition of 'offsetwidth' in that specification.
HTMLElement: transitioncancel event - Web APIs
the transitioncancel event is fired when a
css transition is canceled.
... specifications specification status comment
css transitionsthe definition of 'transitioncancel' in that specification.
HTMLElement: transitionend event - Web APIs
the transitionend event is fired when a
css transition has completed.
... specifications specification status comment
css transitionsthe definition of 'transitionend' in that specification.
HTMLElement: transitionrun event - Web APIs
the transitionrun event is fired when a
css transition is first created, i.e.
... specifications specification status comment
css transitionsthe definition of 'transitionrun' in that specification.
HTMLElement: transitionstart event - Web APIs
the transitionstart event is fired when a
css transition has actually started, i.e., after any transition-delay has ended.
... specifications specification status comment
css transitionsthe definition of 'transitionstart' in that specification.
Image() - Web APIs
disambiguation: image(), the
css function notation.
...the intrinsic width and height of the image in
css pixels are reflected through the properties htmlimageelement.naturalwidth and htmlimageelement.naturalheight.
HTMLImageElement.height - Web APIs
the height property of the htmlimageelement interface indicates the height at which the image is drawn, in
css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
... if the image is being rendered to a visual medium such as a screen or printer, the height is expressed in
css pixels.
HTMLImageElement.sizes - Web APIs
source size values the source size value is a
css length.
...i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article>
css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles th...
HTMLImageElement.width - Web APIs
the width property of the htmlimageelement interface indicates the width at which the image is drawn, in
css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
... if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in
css pixels.
HTMLImageElement.x - Web APIs
css the
css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status...
... comment
css object model (
cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
css the
css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status...
... comment
css object model (
cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLMarqueeElement - Web APIs
living standard made obsolete in favor of
css but define its expected behavior for backward compatibility.
... recommendation made obsolete in favor of
css but define its expected behavior for backward compatibility.
HTMLObjectElement - Web APIs
htmlobjectelement.height returns a domstring that reflects the height html attribute, specifying the displayed height of the resource in
css pixels.
... htmlobjectelement.width is a domstring that reflects the width html attribute, specifying the displayed width of the resource in
css pixels.
HTMLStyleElement.type - Web APIs
for gecko, the type is most often given as "text/
css." from the w3c spec on
css: "the expectation is that binding-specific casting methods can be used to cast down from an instance of the
cssrule interface to the specific derived interface implied by the type." syntax string = style.type; example if (newstyle.type != "text/
css"){ // not supported!
... warn
css(); } ...
HTMLStyleElement - Web APIs
this interface doesn't allow to manipulate the
css it contains (in most case).
... to manipulate
css, see using dynamic styling information for an overview of the objects used to manipulate specified
css properties using the dom.
HTMLTextAreaElement - Web APIs
examples autogrowing textarea example make a textarea autogrow while typing: javascript function autogrow (ofield) { if (ofield.scrollheight > ofield.clientheight) { ofield.style.height = ofield.scrollheight + "px"; } }
css textarea.noscrollbars { overflow: hidden; width: 300px; height: 100px; } html <form> <fieldset> <legend>your comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea.
...nselend : nselstart) + sstarttag.length); omsginput.focus(); }
css css to decorate the internal span to behave like a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[ <span class="intlink" onclick="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></span> | <span class="intlink" onclick="insertmetachars('<em>','<\/em>');"><em>italic</em></span> | <...
HTMLVideoElement.videoHeight - Web APIs
the htmlvideoelement interface's read-only videoheight property indicates the intrinsic height of the video, expressed in
css pixels.
... syntax height = htmlvideoelement.videoheight; value an integer value specifying the intrinsic height of the video in
css pixels.
HTMLVideoElement.videoWidth - Web APIs
the htmlvideoelement interface's read-only videowidth property indicates the intrinsic width of the video, expressed in
css pixels.
... syntax width = htmlvideoelement.videowidth; value an integer value specifying the intrinsic width of the video in
css pixels.
Ajax navigation example - Web APIs
lude "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <div id="ajax-content"> <?php echo $page_content; ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?>
css/style.
css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
...first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="
css/style.
css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown error."); ...
ImageBitmap - Web APIs
properties imagebitmap.height read only is an unsigned long representing the height, in
css pixels, of the imagedata.
... imagebitmap.width read only is an unsigned long representing the width, in
css pixels, of the imagedata.
Using IndexedDB - Web APIs
="clear the whole store" class="destructive" /> </div> </form> <form id="search-form"> <div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> </div> </form> <div> <div id="pub-msg"> </div> <div id="pub-viewer"> </div> <ul id="pub-list"> </ul> </div>
css content body { font-size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } ...
...{ var img_id = 'image-' + key; var img = $('<img id="' + img_id + '"/>'); $(this).contents().find('body').html(img); var obj_url = window.url.createobjecturl(blob); $(this).contents().find('#' + img_id).attr('src', obj_url); window.url.revokeobjecturl(obj_url); }); } else if (blob.type == 'application/pdf') { $('*').
css('cursor', 'wait'); var obj_url = window.url.createobjecturl(blob); iframe.load(function() { $('*').
css('cursor', 'auto'); }); iframe.attr('src', obj_url); window.url.revokeobjecturl(obj_url); } else { iframe.load(function() { $(this).contents().find('body').html("no view available"); }); } }); } /** ...
IntersectionObserver.rootMargin - Web APIs
the intersectionobserver interface's read-only rootmargin property is a string with syntax similar to that of the
css margin property.
... syntax var marginstring = intersectionobserver.rootmargin; value a string, formatted similarly to the
css margin property's value, which contains offsets for one or more sides of the root's bounding box.
Intersection Observer API - Web APIs
can have values similar to the
css margin property, e.g.
... <div id="box"> <div class="vertical"> welcome to <strong>the box!</strong> </div> </div>
css the
css isn't terribly important for the purposes of this example; it lays out the element and establishes that the background-color and border attributes can participate in
css transitions, which we'll use to affect the changes to the element as it becomes more or less obscured.
KeyboardEvent.code - Web APIs
examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div>
css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to...
... html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script>
css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
KeyframeEffect.target - Web APIs
it performs as both a getter and a setter, except with animations and transitions generated by
css.
... syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element,
csspseudoelement, or null.
MediaList - Web APIs
medialist.item() a getter that returns a
cssomstring representing a media query as text, given the media query's index value inside the medialist.
... const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment
css object model (
cssom)the definition of 'medialist' in that specification.
MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div>
css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getel...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div>
css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getel...
MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div>
css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div>
css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video...
Recording a media element - Web APIs
<div class="bottom"> <pre id="log"></pre> </div>
css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; ...
... result when put all together with the rest of the html and the
css not shown above, it looks and works like this: you can take a look at all the code, including the parts hidden above because they aren't critical to the explanation of how the apis are being used.
Capabilities, constraints, and settings - Web APIs
the html and
css for this example are pretty simple, and aren't shown here.
...or" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div>
css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { he...
MouseEvent.clientX - Web APIs
syntax var x = instanceofmouseevent.clientx return value a double floating point value, as redefined by the
cssom view module.
...>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment
css object model (
cssom) view modulethe definition of 'clientx' in that specification.
MouseEvent.clientY - Web APIs
syntax var y = instanceofmouseevent.clienty return value a double floating point value, as redefined by the
cssom view module.
...>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment
css object model (
cssom) view modulethe definition of 'clienty' in that specification.
MouseEvent.pageY - Web APIs
the
cssom view module redefined it as a double float.
... examples var pagey = event.pagey; specifications specification status comment
css object model (
cssom) view modulethe definition of 'pagey' in that specification.
MouseEvent - Web APIs
"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent' in that specification.
...
css object model (
cssom) view modulethe definition of 'mouseevent' in that specification.
Using Navigation Timing - Web APIs
html <div class="output"> </div>
css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and
css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... html <div class="output"> </div>
css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented.
ParentNode.querySelector() - Web APIs
note: characters which are not part of standard
css syntax must be escaped using a backslash character.
... note: if the specified selectors include a
css pseudo-element, the returned value is always null.
PointerEvent.height - Web APIs
the height read-only property of the pointerevent interface represents the height of the pointer's contact geometry, along the y-axis (in
css pixels).
... syntax var contactheight = pointerevent.height; return value contactheight the height of the event's contact area (in
css pixels).
PointerEvent.width - Web APIs
the width read-only property of the pointerevent interface represents the width of the pointer's contact geometry along the x-axis, measured in
css pixels.
... syntax var contactwidth = pointerevent.width; return value contactwidth the width of the event's contact area (in
css pixels).
PointerEvent - Web APIs
pointerevent.width read only the width (magnitude on the x axis), in
css pixels, of the contact geometry of the pointer.
... pointerevent.height read only the height (magnitude on the y axis), in
css pixels, of the contact geometry of the pointer.
Range.getBoundingClientRect() - Web APIs
the bounding client rectangle contains everything selected in the range.</p>
css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highligh...
...t.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`; result specification specification status comment
css object model (
cssom) view modulethe definition of 'range.getboundingclientrect()' in that specification.
format - Web APIs
if the font is in one of the formats listed in
css2([
css2], section15.3.5), then its value is the corresponding <string> parameter of the font.
... syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from
css2([
css2], section15.3.5).
SVGElement - Web APIs
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
SVGSVGElement - Web APIs
(if the parent uses
css or xsl layout, then unitless values represent pixel units for the current
css or xsl viewport.) svgsvgelement.pixelunittomillimeterx a float representing the size of the pixel unit (as defined by
css2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target me...
... candidate recommendation replaced the inheritance from svgelement by svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svglocatable, documentevent, view
css, and document
css and added implemented interface windoweventhandlers.
Screen.colorDepth - Web APIs
per the
cssom, some implementations return 24 for compatibility reasons.
... syntax bitdepth = window.screen.colordepth; example // check the color depth of the screen if ( window.screen.colordepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment
css object model (
cssom) view modulethe definition of 'screen.colordepth' in that specification.
Screen.pixelDepth - Web APIs
per the
cssom, some implementations return 24 for compatibility reasons.
... syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status comment
css object model (
cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
ScrollToOptions - Web APIs
the scrolltooptions dictionary of the
cssom view spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.
...'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment
css object model (
cssom) view modulethe definition of 'scrolltooptions' in that specification.
Using Service Workers - Web APIs
let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker: self.addeventlistener('install', (event) => { event.waituntil( caches.open('v1').then((cache) => { return cache.addall([ './sw-test/', './sw-test/index.html', './sw-test/style.
css', './sw-test/app.js', './sw-test/image-list.js', './sw-test/star-wars-logo.jpg', './sw-test/gallery/', './sw-test/gallery/bountyhunters.jpg', './sw-test/gallery/mylittlevader.jpg', './sw-test/gallery/snowtroopers.jpg' ]); }) ); }); here we add an install event listener to the service worker (hence self), and then chain a exten...
... you’ll want to update your install event listener in the new service worker to something like this (notice the new version number): self.addeventlistener('install', (event) => { event.waituntil( caches.open('v2').then((cache) => { return cache.addall([ './sw-test/', './sw-test/index.html', './sw-test/style.
css', './sw-test/app.js', './sw-test/image-list.js', … // include other new resources for the new version...
ShadowRoot - Web APIs
documentorshadowroot.stylesheets read only returns a stylesheetlist of
cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
...from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the
css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + 'background-color...
StylePropertyMap.append() - Web APIs
the append() method of the stylepropertymap interface adds a new
css declaration to the stylepropertymap with the given property and value.
... example // tbd specifications specification status comment
css typed om level 1the definition of 'append()' in that specification.
StylePropertyMap.delete() - Web APIs
the delete() method of the stylepropertymap interface removes the
css declaration with the given property.
... return value undefined example // tbd specifications specification status comment
css typed om level 1the definition of 'delete()' in that specification.
StylePropertyMap.set() - Web APIs
the set() method of the stylepropertymap interface changes the
css declaration with the given property.
... return value undefined example // tbd specifications specification status comment
css typed om level 1the definition of 'set()' in that specification.
Stylesheet.href - Web APIs
example // on a local machine: <html> <head> <link rel="stylesheet" href="example.
css" type="text/
css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.
css notes if the style sheet is a linked style sheet, the value of its attribute is its location.
... specifications specification status comment
css object model (
cssom)the definition of 'stylesheet: href' in that specification.
StyleSheet.media - Web APIs
example <!doctype html> <html> <head> <link rel="stylesheet" href="document.
css" type="text/
css" media="screen" /> <style rel="stylesheet" type="text/
css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if (i...
...a: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment
css object model (
cssom)the definition of 'stylesheet: media' in that specification.
StyleSheet.ownerNode - Web APIs
syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.
css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.
css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
... specifications specification status comment
css object model (
cssom)the definition of 'stylesheet: ownernode' in that specification.
StyleSheet - Web APIs
css style sheets will further implement the more specialized
cssstylesheet interface.
... specifications specification status comment
css object model (
cssom)the definition of 'stylesheet' in that specification.
StyleSheetList - Web APIs
examples get document stylesheet objects with for loop for (let i = 0; i < document.stylesheets.length; i++) { let stylesheet = document.stylesheets[i]; } get all
css rules for the document using array methods const all
css = [...document.stylesheets] .map(stylesheet => { try { return [...stylesheet.
cssrules] .map(rule => rule.
csstext) .join(''); } catch (e) { console.log('access to stylesheet %s is denied.
... ignoring...', stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status comment
css object model (
cssom)the definition of '
cssstylesheetlist' in that specification.
msManipulationViewsEnabled - Web APIs
the msmanipulationviewsenabled read-only property returns true if manipulation features are support available, such as touch panning and zooming using
css rules.
... value returns true if manipulation features are support available, such as touch panning and zooming using
css rules.
Touch() - Web APIs
finger, stylus) along the axis indicated by rotationangle, in
css pixels of the same scale as screenx; 0 if no value is known.
...finger, stylus) along the axis perpendicular to that indicated by rotationangle, in
css pixels of the same scale as screeny; 0 if no value is known.
TransitionEvent() - Web APIs
propertyname optional is a domstring containing the value of the property-name
css property associated with the transition.
... specifications specification status comment
css transitionsthe definition of 'transitionevent()' in that specification.
TransitionEvent.transitionName - Web APIs
the transitionevent.transitionname read-only property is a domstring containing the name of the
css property associated with the transition.
... syntax name = transitionevent.transitionname specifications specification status comment
css transitionsthe definition of 'transitionevent.transitionname' in that specification.
TransitionEvent.initTransitionEvent() - Web APIs
transitionnamearg is a domstring containing the name of the
css property associated with the transition.
... specifications this method is non-standard and not part of any specification, though it was present in early drafts of
css transitions.
Canvas size and WebGL - Web APIs
« previousnext » this webgl example explores the effect of setting (or not setting) the canvas size to its element size in
css pixels, as it appears in the browser window.
... the size of the first canvas is set to the styled element size, determined by
css.
Signaling and video calling - Web APIs
ss="flexchild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button" onclick="hangupcall();" disabled> hang up </button> </div> </div> the page structure defined here is using <div> elements, giving us full control over the page layout by enabling the use of
css.
... we'll skip layout detail in this guide, but take a look at the
css on github to see how we handled it.
Taking still photos with WebRTC - Web APIs
as it turns out, any
css filters you apply to the element using the filter property affect the captured photo.
... you can play with this effect using, for example, the firefox developer tools' style editor; see edit
css filters for details on how to do so.
Window: animationend event - Web APIs
the animationend event is fired when a
css animation has completed.
... specifications specification status comment
css animations working draft initial definition ...
Window: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a
css animation ends, and another one begins.
... specifications specification status comment
css animations working draft initial definition ...
Window: animationstart event - Web APIs
the animationstart event is fired when a
css animation has started.
... specifications specification status comment
css animations working draft initial definition ...
Window.convertPointFromNodeToPage() - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of
css 2d transforms module level 3.
... it is not present in the current
css transforms module level 1 working draft.
Window.convertPointFromPageToNode - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of
css 2d transforms module level 3.
... it is not present in the current
css transforms module level 1 working draft.
Window.matchMedia() - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; } result see testing media queries programmatically for additional code examples.
... specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.matchmedia()' in that specification.
Window.mozInnerScreenX - Web APIs
note: this coordinate is reported in
css pixels, not in hardware pixels.
... that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelsper
csspixel property.
Window.mozInnerScreenY - Web APIs
note: this coordinate is reported in
css pixels, not in hardware pixels.
... that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelsper
csspixel property.
Window.open() - Web APIs
in a few years, the target property of the
css3 hyperlink module may be implemented (if
css3 hyperlink module as it is right now is approved).
... living standard
css object model (
cssom) view modulethe definition of 'the features argument to the open() method' in that specification.
Window.pageYOffset - Web APIs
css iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "open sans", "helvetica", "arial"; } result the result follows.
... specification specification status comment
css object model (
cssom) view modulethe definition of 'window.pageyoffset' in that specification.
Window: transitioncancel event - Web APIs
the transitioncancel event is fired when a
css transition is canceled.
... specifications specification status comment
css transitionsthe definition of 'transitioncancel' in that specification.
Window: transitionend event - Web APIs
the transitionend event is fired when a
css transition has completed.
... specifications specification status comment
css transitionsthe definition of 'transitionend' in that specification.
Window: transitionrun event - Web APIs
the transitionrun event is fired when a
css transition is first created, i.e.
... specifications specification status comment
css transitionsthe definition of 'transitionrun' in that specification.
Window: transitionstart event - Web APIs
the transitionstart event is fired when a
css transition has actually started, i.e., after any transition-delay has ended.
... specifications specification status comment
css transitionsthe definition of 'transitionstart' in that specification.
Generating HTML - Web APIs
<xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/
css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> </br> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p c...
...stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/
css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:auth...
Using the link role - Accessibility
this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard,
css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
... html <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p>
css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
ARIA: alert role - Accessibility
when the display value is changed with
css or javascript, it would automatically trigger the screen reader to read out the content.
... <p role="alert" style="display: none;">the alert will trigger when the element becomes visible.</p> while triggering an alert via
css alone is possible, it is better to rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation.
ARIA: cell role - Accessibility
you can add aria roles to ensure accessibility should the native semantics of the table be removed, such as with
css.
... a relevant use case for the aria table role is when the native semantics of a table are overridden by
css's display property, such as by display: grid.
ARIA: grid role - Accessibility
td role="gridcell" tabindex="-1"> 28 </td> <td role="gridcell" tabindex="-1"> 29 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 40</th> <td role="gridcell" tabindex="-1"> 30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table>
css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { ...
... 3 </td> <td role="gridcell" tabindex="-1"> 4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table>
css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } javascript var s...
ARIA: row role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with
css.
... a relevant use case for the aria table role is when the native semantics of a table are overridden by
css's display property, such as by display: grid.
ARIA: rowgroup role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with
css.
... a relevant use case for the aria table role is when the
css's display property overrides the native semantics of a table, such as by display: grid.
ARIA: table role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with
css.
... a relevant use case for the aria table role is when
css's display property overrides the native semantics of a table, such as by display: grid.
ARIA: checkbox role - Accessibility
earance of the checkbox so it appears checked or unchecked to the sighted user onkeypress handle the case where the user presses the space key to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using
css and javascript to handle the checked or unchecked status of the element.
... html <span role="checkbox" id="chkpref" aria-checked="false" onclick="changecheckbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label>
css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "true": item.setattribute('aria-checked', "false"); break; case "false": item.setattribute('aria-checked', "true"); break; } } accessibility...
Accessibility documentation index - Accessibility
15 using the alert role aria, accessibility, advanced,
css, example, html, needscontent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the alert role is used to communicate an important and usually time-sensitive message to the user.
...sliders, menu bars, file list views, and more can be built with a combination of javascript,
css, and html.
Keyboard - Accessibility
you can do this with the :focus
css pseudo-class.
... see also using
css to change the presentation of a ui component when it receives focus ...
Perceivable - Accessibility
decorative images should be implemented using
css background images (see backgrounds).
...the order should be made obvious by use of correct semantic elements (e.g., headings, paragraphs), with
css being used to create any unusual layout styles, irrespective of the markup.
Accessibility
css and javascript accessibility best practices
css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
...this article outlines some
css and javascript best practices that should be considered to ensure even complex content is as accessible as possible.
Rich-Text Editing in Mozilla - Developer guides
the stylewith
css command can be used to toggle between
css and html markup creation.
...!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/
css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compf...
Using HTML sections and outlines - Developer guides
this is often useful if you want to add
css selectors to the class property of the element to style the document.
... html5 semantic elements don't need a special dom interface, but they will need a specific
css styling in older browser that don't support them explicitly.
The Unicode Bidirectional Text Algorithm - Developer guides
in this guide, we'll take a look at the bidi algorithm and learn in general what it does and how it applies to your content, so that you'll be better prepared when using the features of html and
css to which the algorithm applies while determining the order and directionality of text during rendering.
... fundamentals (base direction, character types, etc) the algorithm character level directionality directional runs (what they are, how base direction applies) handling neutral characters overriding the algorithm content about using html and
css to override the default behavior of the algorithm; include info about isolating ranges etc.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
however, you should not use <b> for styling text; instead, you should use the
css font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance.
... if there is no semantic purpose to using the <b> element, you should use the
css font-weight property with the value "bold" instead in order to make text bold.
<dl>: The Description List element - HTML: Hypertext Markup Language
<dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the
css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element.
... to change the indentation of a description term, use the
css margin property.
<font> - HTML: Hypertext Markup Language
for any new web development, styling should be written using
css only.
... the former behavior of the <font> element can be achieved, and even better controlled using the
css fonts
css properties.
<input type="email"> - HTML: Hypertext Markup Language
the :valid and :invalid
css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not.
...browsers that implement the specification should be using an algorithm equivalent to the following regular expression: /^[a-za-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-za-z0-9](?:[a-za-z0-9-]{0,61} [a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-]{0,61}[a-za-z0-9])?)*$/ to learn more about how form validation works and how to take advantage of the :valid and :invalid
css properties to style the input based on whether or not the current value is valid, see form data validation.
<input type="tel"> - HTML: Hypertext Markup Language
for example, let's use this html: <form> <div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following
css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-l...
... in this example we'll use the same
css as before, but our html is changed to look like this: <form> <div> <label for="telno">enter a telephone number (in the form xxx-xxx-xxxx): </label> <input id="telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + spa...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
you can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your
css.
... result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some
css:
css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> re...
<label> - HTML: Hypertext Markup Language
styling with
css there are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element.
...if the label's text needs to be adjusted visually, use
css classes applied to the <label> element instead.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
however, it should not be used simply to apply bold styling; use the
css font-weight property for that purpose.
...each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the
css font-weight property.
hidden - HTML: Hypertext Markup Language
note: changing the value of the
css display property on an element with the hidden attribute overrides the behavior.
... living standard defines the suggested default rendering of the hidden attribute using
css html 5.1the definition of 'hidden' in that specification.
style - HTML: Hypertext Markup Language
the style global attribute contains
css styling declarations to be applied to the element.
...
css style attributes recommendation defines the content of the style attribute.
HTML: Hypertext Markup Language
other technologies besides html are generally used to describe a web page's appearance/presentation (
css) or functionality/behavior (javascript).
... related topics applying color to html elements using
css this article covers most of the ways you use
css to add color to html content, listing what parts of html documents can be colored and what
css properties to use when doing so.
Resource URLs - HTTP
syntax resource urls are composed of two parts: a prefix (resource:), and a url pointing to the resource you want to load: resource://<url> an example: resource://gre/res/svg.
css when arrows are found in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details.
... for example, if you open the view source page (view page source or view selection source), you will find it requires viewsource.
css through a resource: uri.
Cross-Origin Resource Sharing (CORS) - HTTP
web fonts (for cross-domain font usage in @font-face within
css), so that servers can deploy truetype fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
...
css shapes from images.
List of default Accept values - HTTP
user agent value comment firefox */* see bug 170789 safari, chrome */* source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 application/javascript, */*;q=0.8 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a
css stylesheet when a
css stylesheet is requested, via the <link rel="stylesheet"> html element, most browsers use specific values.
... user agent value comment firefox 4 text/
css,*/*;q=0.1 see bug 170789 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 text/
css see fiddler is better with internet explorer 9 (ieinternals' msdn blog) safari, chrome text/
css,*/*;q=0.1 source opera 11.10 text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 konqueror 4.6 text/
css,*/*;q=0.1 ...
Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a
css stylesheet a different value is set for the request than when fetching an image, video or a script.
... 117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images,
css, javascript, and so forth.
Referrer-Policy - HTTP
a name of referrer: <meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with
css css can fetch resources referenced from stylesheets.
... these resources follow a referrer policy as well: external
css stylesheets use the default policy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the
css stylesheet’s response.
JavaScript technologies overview - JavaScript
introduction whereas html defines a webpage's structure and content and
css sets the formatting and appearance, javascript adds interactivity to a webpage and creates rich web applications.
... the
css object model abstract
css rules as objects.
JavaScript
jsfiddle edit javascript,
css, html and get live results.
...edit your javascript,
css, html files and get live results and file structure.
background_color - Web app manifests
therefore background_color should match the background-color
css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.
... note: the background_color member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the background-color
css property when the progressive web app stylesheet is available.
<mmultiscripts> - MathML
subscriptshift the minimum space by which to shift the subscript below the baseline of the expression, as a
css length.
... superscriptshift the minimum space by which to shift the superscript above the baseline of the expression, as a
css length.
Image file type and format guide - Web media technologies
you can display an svg image anywhere you can use any of the other image types, including with the <img> and <picture> elements, the background-image
css property, and so forth.
...safari svg support 4 12 3 9 10 (presto) 15 (blink) 3.2 svg as image (<img> etc) 28 12 4 9 10 (presto) 15 (blink) 9 maximum dimensions unlimited supported color modes colors in svg are specified using
css color syntax.
Navigation and resource timings - Web Performance
the browser then parses the content received, builds the dom,
cssom, accessibility, and render trees, eventually rendering the page.
...client-side web applications may seem faster than this one with transfer sizes under 10000 and decoded body sizes under 30000, but that doesn't mean javascript,
css, or media assets aren't adding bloat.
Web technology reference
introduction to html | learn html | html5 | developer guide | element reference | reference
css — styling the web cascading style sheets are used to describe the appearance of web content.
... introduction to
css | getting started with
css | learn
css | common
css questions | reference javascript — dynamic client-side scripting the javascript programming language is used to add interactivity and other dynamic features to web sites.
SVG Core Attributes - SVG: Scalable Vector Graphics
its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with
css).
... note: instead of using the xml:space attribute you should use the white-space
css property.
attributeName - SVG: Scalable Vector Graphics
the attributename attribute indicates the name of the
css property or attribute of the target element that is going to be changed during an animation.
...%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the
css property or attribute of the target element to be animated.
attributeType - SVG: Scalable Vector Graphics
are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value
css | xml | auto default value auto animatable no
css this value specifies that the value of attributename is the name of a
css property defined as animatable.
...user agents first search through the list of
css properties for a matching property name, and if none is found, search the default xml namespace for the element.
class - SVG: Scalable Vector Graphics
you can use this class to style svg content using
css.
... example <html> <body> <svg width="120" height="220" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/
css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]]> </style> <rect class="rectclass" x="10"...
clip - SVG: Scalable Vector Graphics
this attribute has the same parameter values as defined for the
css clip property.
... specifications specification status comment
css masking module level 1the definition of 'clip' in that specification.
cx - SVG: Scalable Vector Graphics
value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as
css property for circles.
... value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as
css property for ellipses.
cy - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a
css property for circles.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a
css property for ellipses.
fill-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute fill-opacity can be used as a
css property.
...ml,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a
css property --> <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for fill-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity w...
paint-order - SVG: Scalable Vector Graphics
note: as a presentation attribute, paint-order can be used as a
css property.
...imson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achieved via the following
css property: #stroke-under { paint-order: stroke; } specifications specification status comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
rx - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a
css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a
css property for rects.
ry - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a
css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a
css property for rects.
stop-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute, stop-opacity can be used as a
css property.
... candidate recommendation refers to the definition in
css colors 3, but allows percentage values.
stroke-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute stroke-opacity can be used as a
css property.
...0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a
css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices t...
<clipPath> - SVG: Scalable Vector Graphics
--> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of
css for browsers who * * implemented the r geometry property.
...troke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text>, <use> specifications specification status comment
css masking module level 1the definition of '<clippath>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg>
css text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filt...
...er> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p>
css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<svg> - SVG: Scalable Vector Graphics
value type: <string> ; default value: text/
css; animatable: no height the displayed height of the rectangular viewport.
... value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning these attributes can also be used as
css properties.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
suspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920)
css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow d...
...commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and related methods removed from svgpathelement implementation status unknown d attribute as
css property implementation status unknown basic shapes change notes pathlength attribute for all basic shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change...
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements
css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts:
css list-style-image
css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
...
css backgrounds and borders module level 3the definition of 'svg within 'background-image'
css property' in that specification.
Specification Deviations - SVG: Scalable Vector Graphics
extending the 'style' attribute to apply to all svg elements should only really be visible to svg authors if they call view
css.getcomputedstyle on the element or one of its descendants.
...note that this extension does not mean that we add a
css::
cssstyledeclaration 'style' property to the dom of elements that do not implement the svgstylable interface.
Clipping and masking - SVG: Scalable Vector Graphics
using well-known
css techniques one of the most powerful tools in a web developer's toolbox is display: none.
... it is therefore little surprise, that it was decided to take this
css property into svg as well, together with visibility and clip as defined by
css 2.
Introduction - SVG: Scalable Vector Graphics
not all svg viewers are equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the svg specification or another specification that you are using along with svg (that is, javascript or
css).
...it was dropped for the upcoming svg 2.0, which is under heavy development right now and follows a similar approach to
css 3 in that it splits components into several loosely coupled specifications.
Same-origin policy - Web security
css applied with <link rel="stylesheet" href="…">.
... due to the relaxed syntax rules of
css, cross-origin
css requires a correct content-type header.
Using shadow DOM - Web Components
inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some
css to style it: // create some
css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; ...
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.
css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.
Using templates and slots - Web Components
me">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h4><span>attributes</span></h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> that <template> element has several features: the <template> has a <style> element with a set of
css styles that are scoped just to the document fragment the <template> creates.
... adding a final bit of style as a finishing touch, we'll add a tiny bit more
css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like.
XML introduction - XML: Extensible Markup Language
one way to style xml output is to specify
css to apply to the document using the xml-stylesheet processing instruction.
... <?xml-stylesheet type="text/
css" href="stylesheet.
css"?> there is also another more powerful way to display xml: the extensible stylesheet language transformations (xslt) which can be used to transform xml into other languages such as html.
Index - XPath
found 57 pages: # page tags and summary 1 xpath
css selectors, dom, jxon, landing, path, xml, xpath, xslt xpath stands for xml path language.
... 16 comparison of
css selectors and xpath
css, draft, needscontent, reference, selectors, xpath this article seeks to document the difference between
css selectors and xpath for web developers to be able to better choose the right tool for the right job.
XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's
css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(25...
tabs - Archive of obsolete content
the stylesheet is called "style.
css" and is located in the add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.
css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(...
content/loader - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js,
css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
Display a Popup - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/
css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" i...
Embedding SVG - Archive of obsolete content
<svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ...
Label and description - Archive of obsolete content
absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/> element regardless of the
css style, but this creates a hard-break that does not change as parent elements resize.
QuerySelector - Archive of obsolete content
however, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/tr/selectors-api/#resolving) (even though
css3 does support namespaced attribute selectors: http://www.w3.org/tr/
css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/tr/
css3-selectors/#id-selectors ).
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
sic/ % overlay chrome://browser/content/browser.xul chrome://myextension/content/myextensionoverlay.xul content/myextensionoverlay.js (content/myextensionoverlay.js) content/myextensionoverlay.xul (content/myextensionoverlay.xul) locale/myextension.dtd (locale/myextension.dtd) locale/myextension.properties (locale/myextension.properties) skin/classic/myextension.
css (skin/classic/myextension.
css) place this code in a file called jar.mn in the root directory of your extension, making sure that the paths in parentheses point to actual files (when interpreted relative to the root directory).
Displaying web content in an extension without security issues - Archive of obsolete content
for example, your template document might have this code: <style type="text/
css"> #entrytemplate { display: none; } </style> <div id="entrytemplate"> <div class="title"></div> <div class="description"></div> </div> now to insert a new entry in the document you would do the following: var template = doc.getelementbyid("entrytemplate"); var entry = template.clonenode(true); entry.removeattribute("id"); entry.getelementsbyclassname("title")[0].textcontent = title; entry...
Setting up an extension development environment - Archive of obsolete content
version, thunderbird version) chrome edit plus a user file editor (firefox and thunderbird) firebug a variety of development tools (firefox) pentadactyl, a general purpose extension with builtin tools for extension development, including a command line with chrome javascript evaluation (including property and function argument completion) and the ability to demand-load external javascript and
css files into window chrome.
Adding preferences to an extension - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to w...
DOMSubtreeModified - Archive of obsolete content
this event has been deprecated in favor of the mutation observer api this event can cause infinite loops if you decide to change the dom inside the event handler, hence it has been disabled in a number of browsers (see domattrmodified and domsubtreemodified events are no longer fired when style attribute is changed via
cssom for example).
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
under hkey_local_machine\software\mozilla\compuserve 7.0 you'll find: "plugins folders"="c:\\program files\\common files\\
csshare\\plugins0942" "product"="compuserve" "version"="7.0" "displayname"="compuserve 7.0" the product, version, and displayname string values are currently only written by compuserve 7.0, and they are written alongside the geckover string value.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
3850 01-01-2010 00:00 defaults/profile/bookmarks.html 869 01-01-2010 00:00 defaults/profile/chrome/usercontent-example.
css 1165 01-01-2010 00:00 defaults/profile/chrome/userchrome-example.
css 366 01-01-2010 00:00 defaults/profile/localstore.rdf 569 01-01-2010 00:00 defaults/profile/mimetypes.rdf 76 01-01-2010 00:00 defaults/preferences/firefox-l10n.js 91656 01-01-2010 00:00 defaults/preferences/firefox.js 1593 01-01-2010 00:00 defaults/preferences/firefox-branding.js...
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.
css" type="text/
css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions ca...
Creating a hybrid CD - Archive of obsolete content
"gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg file" .pl ascii 'mcpl' 'text' "perl file" .pm ascii 'mcpl' 'text' "perl module file" .xml ascii 'r*ch' 'text' "xml file" .xul ascii 'r*ch' 'text' "xul file" .xbl ascii 'r*ch' 'text' "xbl file" .
css ascii 'r*ch' 'text' "
css file" .dtd ascii 'r*ch' 'text' "dtd file" .js ascii 'r*ch' 'text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 'text' "text file" for more infor...
Makefile.mozextension.2 - Archive of obsolete content
) chrome/$(project).jar ~/.mozilla/default/32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.
css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24...
Mozilla Application Framework - Archive of obsolete content
framework xul a comprehensive, cross-platform ui toolkit with an easy-to-learn xml language for defining ui structure, a schema for localization, and support for both native and cross-platform (using
css) look and feel to make writing uis quick and painless.
FAQ - Archive of obsolete content
prism is built on top of the mozilla platform and its gecko rendering engine, just like mozilla firefox, so it provides the same capabilities to web applications that firefox provides, including support for html, javascript,
css, and <canvas>.
Table Cellmap - Border Collapse - Archive of obsolete content
l group to the left ecolowner = 3, eajacolowner = 4, // col to the left erowgroupowner = 5, eajarowgroupowner = 6, // row group above erowowner = 7, eajarowowner = 8, // row above ecellowner = 9, eajacellowner = 10 // cell to the top or to the left the ownership is determined by the rules for border conflict resolution as defined in
css 2.1 corner for the corner we store the corner ownership, defined by the orientation of the major edge relative to the corner that goes into that corner.
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> <labe...
Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearf...
textbox (Toolkit autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </wi...
Textbox (XPFE autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </wi...
Adding Buttons - Archive of obsolete content
the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also.
Adding HTML Elements - Archive of obsolete content
here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above.
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <...
Creating an Installer - Archive of obsolete content
our find files example for the find files dialog, we'll create a structure in the archive much like the following: install.js findfile content contents.rdf findfile.xul findfile.js skin contents.rdf findfile.
css locale contents.rdf findfile.dtd a directory has been added for each part of the package, the content, the skin and the locale.
Cross Package Overlays - Archive of obsolete content
the following example shows how: <rdf:seq about="urn:mozilla:stylesheets"> <rdf:li resource="chrome://messenger/content/messenger.xul"/> </rdf:seq> <rdf:seq about="chrome://messenger/content/messenger.xul"> <rdf:li>chrome://blueswayedshoes/skin/myskinfile.
css</rdf:li> </rdf:seq> next, we'll see how to create an installer for a xul application.
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, ...
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <?xml-stylesheet href="findfile.
css" type="text/
css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menup...
More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="enter the secret code:"/> <textbo...
Templates - Archive of obsolete content
however, the tradeoff is that trees may only display text, and, since no elements are created, you can't use
css properties to style tree cells in the same way.
Tree View Details - Archive of obsolete content
they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["hel...
XUL Tutorial - Archive of obsolete content
rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using
css and xbl xbl example specialized window types features of a window creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts additional install features this xul tutorial was originally created by neil deakin.
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/
css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object...
XML - Archive of obsolete content
as the figure below indicates, xul is an amalgam of these different standards:
css for styling or "skinning", dom for the object model and scriptable access, javascript for the linking and behavior, rdf for resources, xml for the structure, and html for the content and some little extras.
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item aler...
colorpicker - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </wi...
dialog - Archive of obsolete content
accept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.
css" type="text/
css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" s...
preference - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </wi...
prefwindow - Archive of obsolete content
ept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-back...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbo...
wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="sec...
CommandLine - Archive of obsolete content
.getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this is a simple xulrunner...
XULRunner tips - Archive of obsolete content
when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single
css file named "communicator.
css" with this content: @import url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of clicking the "add to..." button, right-click and select "save link as...").
xbDesignMode.js - Archive of obsolete content
de = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesignmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbdesignmode.prototype.set
csscreation = function (ause
css){ if (this.meditordocument) this.meditordocument.execcommand("use
css", false, ause
css); else throw "no meditordocument found"; } ...
Mozilla release FAQ - Archive of obsolete content
mozilla has (at least) the following new features: xml support a highly configurable appearance (courtesy of xul) publicly available source code :) http compression exists on more platforms mathml support (somewhat limited at the moment) a significantly faster rendering engine better html support (
css 1 and partial
css 2, dom 1 and partial dom 2) plug-in jvm support tabbed browsing message filtering an irc client why is the animated icon different?
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus
css1 color: ; font-family: ; font-size: ; deprecated center or align="center"
css1 text-align: center; for in-line elements like text or image deprecated center or align="center"
css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor
css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scriptin...
Styling Abbreviations and Acronyms - Archive of obsolete content
ccessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.
css abbr[title], acronym[title] { text-decoration: dotted underline; } the solution if authors wish to remove the underline from abbr and acronym elements, this can be done with the following rule: abbr[title], acronym[title] { text-decoration: none; } it may be better to lessen the visual weight of the border without actually removing it.
Building up a basic demo with Babylon.js - Game development
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some
css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space.
Building up a basic demo with the PlayCanvas engine - Game development
rgin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some
css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.
Audio for Web games - Game development
audio sprites audio sprites borrow their name from
css sprites, which is a visual technique for using
css with a single graphic resource to break it into a series of sprites.
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
d-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="wrapper"> <div class="item1">item</div> <div class="item2">item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading
css grid layout guide: basic concepts of grid layout
css grid layout guide: grid template areas definition of grid areas in the
css grid layout specification ...
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
your data model is probably contained in some kind of database (be it a traditional server-side database like mysql, or a client-side solution such as indexeddb [en-us].) your app's controlling code is probably written in html/javascript, and your user interface is probably written using html/
css/whatever else you like.
Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
learn more property reference flex-basis flex-direction flex-grow flex-shrink justify-content flex further reading
css flexbox guide: basic concepts of flexbox
css flexbox guide: aligning items in a flex container
css flexbox guide: controlling ratios of flex items along the main axis ...
Example 3 - Learn web development
n> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form>
css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : ...
Example 4 - Learn web development
ion>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form>
css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : ...
Example 5 - Learn web development
x"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form>
css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : ...
Example - Learn web development
id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form>
css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; ...
Example - Learn web development
or="name">name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form>
css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea...
HTML Cheatsheet - Learn web development
it's always possible to totally change the look and feel of a given tag using
css so, when using html, take the time to focus on the meaning rather than the appearance.
Introduction to HTML - Learn web development
it contains information such as the page <title>, links to
css (if you want to style your html content with
css), links to custom favicons, and metadata (data about the html, such as who wrote it, and important keywords that describe the document).
HTML Tables - Learn web development
coupled with a little
css for styling, html makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
Structuring the web with HTML - Learn web development
after learning html, you can then move on to learning about more advanced topics such as:
css, and how to use it to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data ...
JavaScript building blocks - Learn web development
get started prerequisites before starting this module, you should have some familiarity with the basics of html and
css, and you should have also worked through our previous module, javascript first steps.
Roll your own browser: An embedding how-to
(mozilla blurb) bradsoft's topstyle
css builder: implements an internal browser using mozilla activex embedding control.obsolete since gecko 7.0 nxzilla: a set of libraries that allow mozilla to be used with a nanox server.
Gecko
gecko's function is to render web content, such as html,
css, xul, javascript, and render it on the user's screen or print it.
How Mozilla determines MIME Types
this means that, for example, if mozilla encounters a <link type="text/
css" rel="stylesheet" href="..."> element, a type of text/
css will be assumed.
PopupNotifications.jsm
this is normally specified in
css using list-style-image and the .popup-notification-icon[popupid=...] selector.
Localization content best practices
create localizable ui
css issues some
css text/font properties may cause problems with text legibility when applied to certain language texts.
Creating localizable web content
images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by
css or have to be fixed for all locales but english don't use text in icons images 1&2.
MathML3Testsuite
characters blocks symbols variants entitynames numericrefs utf8 general clipboard genattribs math presentation
css dynamicexpressions generallayout scriptsandlimits tablesandmatrices tokenelements topics accents bidi elementarymathexamples embellishedop largeop linebreak nesting stretchychars whitespace torturetests errorhandling original document information author(s): frédéric wang other contributors: last updated date: may 26, 2010 copyright information: portions of this content are © 2...
MathML Torture Test
><mrow><mi>σ</mi><mo>∊</mo><msub><mi>s</mi><mi>n</mi></msub></mrow></munder><mrow><mi>ϵ</mi><mo stretchy="false">(</mo><mi>σ</mi><mo stretchy="false">)</mo></mrow><mrow><munderover><mo>∏</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msub><mi>a</mi><mrow><mi>i</mi><mo>,</mo><msub><mi>σ</mi><mi>i</mi></msub></mrow></msub></mrow></mrow></math></td> </tr> </table>
css content /* table style */ body { text-align: center; } table { border: solid thin; border-collapse: collapse; margin-left: auto; margin-right: auto; } th { background-color: #ddf; border: solid thin; color: black; padding: 5px; } td { border: solid thin; padding: 5px; text-align: center; } .asana math { font-family: asana math; } .cambria...
Updates
mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (
css1), and the w3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed.
MathML Demo: <mfrac> - fractions
<mi>c</mi> </msub> <mfrac> <mrow> <mi>f</mi> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math>
css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML Demo: <mtable> - tables and matrices
mathml doesn't specify how to only display certain sides of the table border, as in "|rcl", but these can be obtained in mozilla using the 'border' property of
css, e.g., "|rcl" can be achieved with the
css declaration "mtable { border-left: solid thin }".
BloatView
217760 14.94% 5817060 7.63% nsxulattribute 113048 -70.92% 113568 -71.16% literalimpl 53280 26.62% 75840 19.40% nsxulelement 51648 0.00% 51648 0.00% nsprofile 51224 0.00% 51224 0.00% nsframe 47568 -26.15% 48096 -50.49%
cssdeclarationimpl 42984 0.67% 43488 0.67% this "delta report" shows the leak offenders, sorted from most leaks to fewest.
Performance
investigating
css performance how to figure out why restyle is taking so long power profiling power profiling overview this page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches.
NSS 3.27 release notes
the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = d
cssi sha256 fingerprint: b9:be:a7:86:0a:96:2e:a3:61:1d:ab:97:ab:6d:a3:e2:1c:10:68:b9:7d:55:57:5e:d0:e1:12:79:c1:1c:89:32 cn = juur-sk, o = as sertifitseerimiskeskus sha256 fingerprint: ec:c3:e9:c3:40:75:03:be:e0:91:aa:95:2f:41:34:8f:f8:8b:aa:86:3b:22:64:be:fa:c8:07:90:15:74:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-256 fingerp...
Secure Development Guidelines
memory leaks example: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 440230) void addref() { ++mrefcnt; ns_log_addref(this, mrefcnt, "ns
cssvalue::array", sizeof(*this)); } void release() { --mrefcnt; ns_log_release(this, mrefcnt, "ns
cssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit constructor/destructor issues if a constructor fails the destructor never gets c...
Embedded Dialog API
it is probably easier to write
css rules (a skin) to give gecko's xul dialogs the same appearance as the application's own.
Using XPCOM Components
using xpcom components in your cpp xpconnect makes it easy to ace
css xpcom components as javascript objects, but using xpcom components in c++ is not much more difficult.
Creating XPCOM components
ing notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.
css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a windo...
Index
235 getcomputedstyle
cssvalue no summary!
Components.utils.Sandbox
the following objects are supported: -promise (removed in firefox 37)
css indexeddb (web worker only) xmlhttprequest textencoder textdecoder url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxsc...
Components.utils.importGlobalProperties
the following strings are supported: string/object xpcom component atob blob btoa crypto
css fetch file nsidomfile indexeddb nodefilter firefox 60 nsidomnodefilter obsolete since gecko 60 rtcidentityprovider textdecoder textencoder url urlsearchparams xmlhttprequest nsixmlhttprequest obsolete since gecko 60 for string/object in table with...
Observer Notifications
inspector-ruleview-ready - sent when the inspector's
css rule view is opened and initialized.
imgIContainer
aviewportsize the size (in
css pixels) of the viewport that would be available for the full image to occupy, if we were drawing the full image.
nsIAutoCompleteItem
inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description classname string class name used to define some style through
css like the colors, an icon url, and so on.
nsIDOMChromeWindow
void setcursor( in domstring cursor ); parameters cursor you can specify same values of
css cursor property (including -moz- prefixed values).
nsIDOMClientRect
see also
cssom view module : the clientrect interfacewd this object was renamed a few times: initial name was textrectangle, then clientrect, then domrect.
nsIDOMNSHTMLDocument
void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "
css1compat" if the document is in full standards or almost standards mode.
nsIFileView
example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex=...
nsIScriptError
categories the web console does not display "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "
css parser" "
css loader" "content javascript" "dom events" "dom:html" "dom window" "svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
nsIWebBrowserPersist
savedocument() save the specified dom document to file and optionally all linked files (for example images,
css, js & subframes).
Setting HTTP request headers
you can add your own http headers to any request the application makes, whether the request is initiated by your code explicitly opening an http channel, because of xmlhttprequest activity, an <img> element in content, or even from
css.
DB Views (message lists)
see the tutorial for information about styling trees using
css, and the thunderbird source for some example
css.
Adding items to the Folder Pane
n-container", text: "numbers", level: 0, open: false, _children: null, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; }, getproperties: function gne_getprops() { // put your
css attributes here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and 3) are copies of the follow...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.
css" type="text/
css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the
css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Styling the Folder Pane
treeview row/cell properties
css property equivalent call explanation foldernamecol -- a property for indicating that a column is the folder name column.
Theme Packaging
pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (
css), probably xbl, and some graphic design and aesthetic skill (...or maybe not).
Working with windows in chrome code
todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/
css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.length > 0) { maxprogress = window.arguments[...
Drawing and Event Handling - Plugins
this happens when plug-ins are invoked with an html object element that has been hidden with
css rules (see plug-in display modes in the introduction) or with an embed element whose hidden attribute has been set.
Dominators view - Firefox Developer Tools
for example, if we click on the first window object: we can see that this window dominates a
css2properties object, whose retained size is 2% of the total snapshot size.
Network request details - Firefox Developer Tools
if the response is html, js, or
css, it will be shown as text: if the response is json, it will be shown as an inspectable object: if the response is an image, the tab displays a preview: for network responses that are initiated by a websocket connection, the details pane shows any associated messages.
Inspect and select colors - Firefox Developer Tools
in the
css pane's rules view, if a rule contains a color value, you'll see a sample of the color next to the value: a color sample is also shown for
css custom properties (variables) that represent colors.
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div>
css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100...
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layouts
css grid inspector: examine grid layoutsedit
css filtersedit shape paths in
cssedit fontsexamine event listenersexamine and edit
cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
UI Tour - Firefox Developer Tools
waterfall the waterfall presents a view of the work the browser is doing during the recording: executing javascript, updating the
css, updating the page layout, and performing repaints.
Performance - Firefox Developer Tools
scenarios animating
css properties uses the waterfall to understand how the browser updates a page, and how animating different
css properties can affect performance.
Tips - Firefox Developer Tools
click the options button in the style sheet pane and click "show original sources" to toggle the display of
css preprocessor files.
Web Console - Firefox Developer Tools
the web console: logs information associated with a web page: network requests, javascript,
css, security errors and warnings as well as error, warning and informational messages explicitly logged by javascript code running in the page context enables you to interact with a web page by executing javascript expressions in the context of the page user interface of the web console parts of the web console ui.
Animation - Web APIs
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query |
css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment web animationsthe definition of 'animation' in that specification.
AnimationEffect - Web APIs
the animationeffect interface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by
css animations and transitions).
AnimationEvent.elapsedTime - Web APIs
syntax time = animationevent.elapsedtime specifications specification status comment
css animationsthe definition of 'animationevent.elapsedtime' in that specification.
AnimationEvent.pseudoElement - Web APIs
syntax name = animationevent.pseudoelement specifications specification status comment
css animationsthe definition of 'animationevent.pseudoelement' in that specification.
AnimationEvent - Web APIs
specifications specification status comment
css animationsthe definition of 'animationevent' in that specification.
Cache.addAll() - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'c...
CacheStorage.open() - Web APIs
self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status comment service workersthe definition of 'cachestorage: open' in that specif...
CacheStorage - Web APIs
self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // cach...
CanvasGradient - Web APIs
if the offset is not between 0 and 1, inclusive, an index_size_err is raised; if the color can't be parsed as a
css <color>, a syntax_err is raised.
CanvasRenderingContext2D.getTransform() - Web APIs
html <canvas width="240"></canvas> <canvas width="240"></canvas>
css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.ar...
CanvasRenderingContext2D.setTransform() - Web APIs
html <canvas width="240"></canvas> <canvas width="240"></canvas>
css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.ar...
A basic ray-caster - Web APIs
input.js | level.js | player.js | raycaster.html | raycaster.js | trace.
css | trace.js see also canvas tutorial ...
CaretPosition - Web APIs
methods caretposition.getclientrect specification specification status comment
css object model (
cssom) view modulethe definition of 'caretposition' in that specification.
console - Web APIs
styling console output you can use the %c directive to apply a
css style to console output: console.log("this is %cmy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px"); the text before the directive will not be affected, but the text after the directive will be styled using the
css declarations in the parameter.
CustomElementRegistry.define() - Web APIs
attribute content and put it inside the info span var text = this.getattribute('text'); info.textcontent = text; // insert icon var imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some
css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + ...
DOMMatrix() - Web APIs
syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a
css transform string.
DOMMatrix - Web APIs
the dommatrix interface is designed with the intent that it will be used for all matrices within markup, supplanting the svgmatrix and
cssmatrix interfaces.
DataTransfer.dropEffect - Web APIs
</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css content div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will ...
DataTransfer.getData() - Web APIs
html content <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent.target.style.color = 'blue'; allowdropevent.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } funct...
DataTransferItem.webkitGetAsEntry() - Web APIs
<p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul>
css content the styles used by the example are shown here.
DataTransferItemList.DataTransferItem() - Web APIs
// clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/pl...
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(...
DataTransferItemList.length - Web APIs
// clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specification.
DataTransferItemList.remove() - Web APIs
f <code>datatransferitemlist</code> methods and property</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status comment html living standardthe definition of 'remove()' in that specification.
Document: DOMContentLoaded event - Web APIs
ing hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = docume...
Document.compatMode - Web APIs
"
css1compat" if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.
Document.createProcessingInstruction() - Web APIs
example var doc = new domparser().parsefromstring('<foo />', 'application/xml'); var pi = doc.createprocessinginstruction('xml-stylesheet', 'href="my
css.
css" type="text/
css"'); doc.insertbefore(pi, doc.firstchild); console.log(new xmlserializer().serializetostring(doc)); // displays: <?xml-stylesheet href="my
css.
css" type="text/
css"?><foo/> specifications specification status comment domthe definition of 'createprocessinginstruction()' in that specification.
Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div>
css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { ...
Document.linkColor - Web APIs
as an alternative, you can set the
css color property on either html anchor links (<a>) or on :link pseudo-classes.
Document.readyState - Web APIs
console.log("the first
css rule is: " + document.stylesheets[0].
cssrules[0].
csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystate...
Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = docume...
Document.scrollingElement - Web APIs
syntax var element = document.scrollingelement; example var scrollelm = document.scrollingelement; scrollelm.scrolltop = 0; specifications specification status comment
css object model (
cssom) view modulethe definition of 'scrollingelement' in that specification.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment
css object model (
cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.styleSheets - Web APIs
the stylesheets read-only property of the documentorshadowroot interface returns a stylesheetlist of
cssstylesheet objects, for stylesheets explicitly linked into or embedded in a document.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.stylesheetsread only returns a stylesheetlist of
cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
ody.appendchild(mycurrent_row); } // appends <tbody> into <table> mytable.appendchild(mytablebody); // appends <table> into <body> mybody.appendchild(mytable); // sets the border attribute of mytable to 2; mytable.setattribute("border","2"); } </script> </head> <body onload="start()"> </body> </html> manipulating the table with dom and
css getting a text node from the table this example introduces two new dom attributes.
Element: auxclick event - Web APIs
html <button><h1>click me!</h1></button>
css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick...
Element.clientLeft - Web APIs
padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment
css object model (
cssom) view modulethe definition of 'clientleft' in that specification.
Element.clientTop - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'clienttop' in that specification.
Element.closest() - Web APIs
however, it will only support
css 2.1 selectors in ie 8, and it can cause severe lag spikes in production websites.
Element: compositionend event - Web APIs
ml <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div>
css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryse...
Element: compositionstart event - Web APIs
ml <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div>
css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryse...
Element: compositionupdate event - Web APIs
ml <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div>
css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryse...
Element: copy event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div>
css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.preventdef...
Element: cut event - Web APIs
examples live example html <div class="source" contenteditable="true">try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div>
css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.delete...
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside>
css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
Element: error event - Web APIs
examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselec...
Element.getAttribute() - Web APIs
retrieving nonce values for security reasons, csp nonces from non-script sources, such as
css selectors, and .getattribute("nonce") calls are hidden.
Element.id - Web APIs
another common case is to use an element's id as a selector when styling the document with
css.
Element: mousedown event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas>
css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
Element: mousemove event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas>
css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
Element: mouseup event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas>
css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
Element: paste event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div>
css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getsel...
Element.releasePointerCapture() - Web APIs
html <div id="slider">slide me</div>
css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `tr...
Element.scroll() - Web APIs
examples // put the 1000th vertical pixel at the top of the element element.scroll(0, 1000); using options: element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment
css object model (
cssom) view modulethe definition of 'element.scroll()' in that specification.
Element.scrollBy() - Web APIs
examples // scroll an element element.scrollby(300, 300); using options: element.scrollby({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment
css object model (
cssom) view modulethe definition of 'element.scrollby()' in that specification.
Element.scrollIntoView() - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'element.scrollintoview()' in that specification.
Element.scrollTo() - Web APIs
examples element.scrollto(0, 1000); using options: element.scrollto({ top: 100, left: 100, behavior: 'smooth' }); specifications specification status comment
css object model (
cssom) view modulethe definition of 'element.scrollto()' in that specification.
Element.scrollTop - Web APIs
if you can see this, scrolltop is maxed-out padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment
css object model (
cssom) view modulethe definition of 'scrolltop' in that specification.
Element.scrollWidth - Web APIs
ts are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment
css object model (
cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/
css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); ...
Element.setPointerCapture() - Web APIs
html <div id="slider">slide me</div>
css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `tr...
Element.shadowRoot - Web APIs
from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the
css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute(...
Event.eventPhase - Web APIs
li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div>
css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.g...
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div>
css we use a little bit of
css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
Event - Web APIs
animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent
cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror p...
EventTarget.addEventListener() - Web APIs
, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div>
css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px; } javascript const outer = document.queryselector('.out...
ExtendableEvent.waitUntil() - Web APIs
example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.
css' ]); }; event.waituntil(precache()); }); specifications specification status comment service workersthe definition of 'waituntil()' in that specification.
File.getAsBinary() - Web APIs
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/
css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); } else if (accept.text.indexof(file.type) > -1) { // file is of type text, which we accept ...
File.getAsText() - Web APIs
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/
css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as utf-8 var data = file.getastext("utf-8"); // modify data with string methods } ...
FileReader: abort event - Web APIs
abel for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { dis...
FileReader: load event - Web APIs
abel for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { dis...
FileReader: loadend event - Web APIs
abel for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { dis...
FileReader: loadstart event - Web APIs
abel for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { dis...
FileReader: progress event - Web APIs
abel for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { dis...
FileSystemDirectoryReader.readEntries() - Web APIs
<p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul>
css content the styles used by the example are shown here.
FontFace.FontFace() - Web APIs
family: family style: style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with
css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment
css font loading module level 3the definition of 'fontface constructor' in that specification.
FontFace.family - Web APIs
example var fontface = new fontface('roboto', 'url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status comment
css font loading module level 3the definition of 'family' in that specification.
FontFace.load - Web APIs
specifications specification status comment
css font loading module level 3the definition of 'load' in that specification.
FontFace.loaded - Web APIs
specifications specification status comment
css font loading module level 3the definition of 'loaded' in that specification.
FontFace.status - Web APIs
specifications specification status comment
css font loading module level 3the definition of 'status' in that specification.
FontFaceSet.ready - Web APIs
specifications specification status comment
css font loading module level 3the definition of 'fontfaceset' in that specification.
Using the Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering,
css animations, etc.
Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering,
css animations, etc.
GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p>
css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused...
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div>
css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdef...
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p>
css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.client...
GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div>
css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -...
GlobalEventHandlers.onscroll - Web APIs
html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p>
css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html living standard...
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div>
css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event...
HTMLCanvasElement.height - Web APIs
the htmlcanvaselement.height property is a positive integer reflecting the height html attribute of the <canvas> element interpreted in
css pixels.
HTMLCanvasElement.width - Web APIs
the htmlcanvaselement.width property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in
css pixels.
HTMLContentElement - Web APIs
the value is a comma-separated list of
css selectors that select the content to insert in place of the <content> element.
HTMLDetailsElement: toggle event - Web APIs
</details> </section>
css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle...
HTMLDialogElement: cancel event - Web APIs
bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div>
css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function'...
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div>
css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') ...
HTMLElement.offsetLeft - Web APIs
mentbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment
css object model (
cssom) view modulethe definition of 'offsetleft' in that specification.
HTMLElement.offsetTop - Web APIs
example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status comment
css object model (
cssom) view modulethe definition of 'offsettop' in that specification.
HTMLFormElement - Web APIs
usage notes obtaining a form element object to obtain an htmlformelement object, you can use a
css selector with queryselector(), or you can get a list of all of the forms in the document using its forms property.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div>
css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe def...
HTMLImageElement.isMap - Web APIs
usage notes when an image marked as being part of a server-side image map is clicked, the browser constructs the string "?x,y", where x and y indicate the coordinates at which the mouse was clicked as offsets from the top-left corner of the image, specified in
css pixels.
HTMLImageElement.srcset - Web APIs
<div class="box"> <img src="/files/16797/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"> </div>
css the
css simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it.
HTMLInputElement.stepDown() - Web APIs
*/ input.stepdown(); } }
css input:invalid { border: red solid 3px; } result note if you don't pass a parameter to the stepdown() method, it defaults to 1.
HTMLInputElement.stepUp() - Web APIs
try it with 0 */ input.stepup() } }
css input:invalid { border: red solid 3px; } result note if you don't pass a parameter to the stepup method, it defaults to 1.
HTMLLIElement - Web APIs
as the standard way of defining the list type is via the
css list-style-type property, use the
cssom methods to set it via a script.
HTMLMediaElement: loadstart event - Web APIs
o cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; ...
HTMLMediaElement: progress event - Web APIs
no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div>
css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; ...
HTMLOListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line-height
css property used for that behavior in modern pages.
HTMLObjectElement.height - Web APIs
the height property of the htmlobjectelement interface returns a domstring that reflects the height html attribute, specifying the displayed height of the resource in
css pixels.
HTMLObjectElement.width - Web APIs
the width property of the htmlobjectelement interface returns a domstring that reflects the width html attribute, specifying the displayed width of the resource in
css pixels.
HTMLSelectElement.form - Web APIs
the below code gives all select elements in a particular form a
css class of "selectclass": <script type="text/javascript"> var form_element = document.getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment html living standardthe definition of 'form' in that speci...
HTMLStyleElement.media - Web APIs
example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.
css" type="text/
css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/
css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living stand...
HTMLTableElement.cellSpacing - Web APIs
while you should instead use the
css border-spacing property, the obsolete htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells.
HTMLUListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line-height
css property used for that behavior in modern pages.
KeyboardEvent.key - Web APIs
html <div class="fx"> <div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div>
css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = docu...
Location - Web APIs
anatomy of location html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospa...
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, element
cssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaDevices.getSupportedConstraints() - Web APIs
html <p>the following media constraints are supported by your browser:</p> <ul id="constraintlist"> </ul>
css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</cod...
MediaDevices.ondevicechange - Web APIs
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div>
css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; m...
MediaList.mediaText - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment
css object model (
cssom)the definition of 'mediatext' in that specification.
MediaQueryList.addListener() - Web APIs
'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment
css object model (
cssom) view modulethe definition of 'addlistener' in that specification.
MediaQueryList.matches - Web APIs
if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment
css object model (
cssom) view modulethe definition of 'matches' in that specification.
MediaQueryList.media - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; } result specifications specification status comment
css object model (
cssom) view modulethe definition of 'media' in that specification.
MediaQueryList.onchange - Web APIs
mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment
css object model (
cssom) view modulethe definition of 'onchange' in that specification.
MediaQueryList.removeListener() - Web APIs
e.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status comment
css object model (
cssom) view modulethe definition of 'removelistener' in that specification.
MediaQueryList - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mediaquerylist' in that specification.
MediaQueryListEvent.MediaQueryListEvent() - Web APIs
examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status comment
css object model (
cssom) view modulethe definition of 'mediaquerylistevent()' in that specification.
MediaQueryListEvent.matches - Web APIs
this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment
css object model (
cssom) view modulethe definition of 'matches' in that specification.
MediaQueryListEvent.media - Web APIs
�� less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment
css object model (
cssom) view modulethe definition of 'media' in that specification.
MediaQueryListEvent - Web APIs
'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment
css object model (
cssom) view modulethe definition of 'mediaquerylistevent' in that specification.
MediaQueryListListener - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mediaquerylistlistener' in that specification.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe def...
MediaTrackSupportedConstraints.autoGainControl - Web APIs
html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe...
MediaTrackSupportedConstraints.channelCount - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe defini...
MediaTrackSupportedConstraints.deviceId - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition...
MediaTrackSupportedConstraints.echoCancellation - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe de...
MediaTrackSupportedConstraints.facingMode - Web APIs
example html <div id="result"> </div>
css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'facin...
MediaTrackSupportedConstraints.frameRate - Web APIs
javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div>
css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can replace the simple output of "supported" vs.
MediaTrackSupportedConstraints.groupId - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition ...
MediaTrackSupportedConstraints.height - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition o...
MediaTrackSupportedConstraints.latency - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition ...
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsth...
MediaTrackSupportedConstraints.sampleRate - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definiti...
MediaTrackSupportedConstraints.sampleSize - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definiti...
MediaTrackSupportedConstraints.volume - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
MediaTrackSupportedConstraints.width - Web APIs
example html content <div id="result"> </div>
css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of...
Using the Media Capabilities API - Web APIs
navigator.mediacapabilities.decodinginfo(videoconfiguration).then( console.log('it worked') ).catch(error => console.log('it failed: ' + error) ); media capabilities live example
css li { margin : 1em; } html <form> <p>select your video configuration and find out if this browser supports the codec, and whether decoding will be smooth and power efficient:</p> <ul> <li> <label for="codec">select a codec</label> <select id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</opt...
MouseEvent() - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.offsetX - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.offsetY - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body>
css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red = document.getelementbyid('red'), blue = document.getelementbyid('blue'); red.addeventlistener('mouseover', ov...
MouseEvent.screenX - Web APIs
indow, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications specification status comment
css object model (
cssom) view modulethe definition of 'screenx' in that specification.
MouseEvent.screenY - Web APIs
>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment
css object model (
cssom) view modulethe definition of 'screeny' in that specification.
MouseEvent.x - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent.x' in that specification.
MouseEvent.y - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'mouseevent.y' in that specification.
Online and offline events - Web APIs
"online" : "offline"; status.classname = condition; status.innerhtml = condition.touppercase(); log.insertadjacenthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of
css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id...
Node.isConnected - Web APIs
examples standard dom a standard dom example: let test = document.createelement('p'); console.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some
css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; ...
Node.isEqualNode() - Web APIs
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p>
css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: " + divlist[0].ise...
Node.isSameNode() - Web APIs
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p>
css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].is...
Node.textContent - Web APIs
moreover, since innertext takes
css styles into account, reading the value of innertext triggers a reflow to ensure up-to-date computed styles.
Node - Web APIs
node.getboxquads() returns a list of the node's
css boxes relative to another node.
Page Visibility API - Web APIs
hiding an <iframe> using
css properties (such as display: none;) doesn't trigger visibility events or change the state of the document contained within the frame.
ParentNode.replaceChildren() - Web APIs
pperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --></button> <button id="to-no"><-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple
css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" li...
ParentNode - Web APIs
see locating dom elements using selectors to learn how to use
css selectors to find nodes or elements of interest.
PerformanceFrameTiming - Web APIs
a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering,
css animations, etc..
RTCPeerConnection: iceconnectionstatechange event - Web APIs
in this example, a handler for iceconnectionstatechange is set up to update a call state indicator by using the value of iceconnectionstate to create a string which corresponds to the name of a
css class that we can assign to the status indicator to cause it to reflect the current state of the connection.
Range.commonAncestorContainer - Web APIs
html <ul> <li>strings <ul> <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul>
css the .highlight class created below uses a set of
css @keyframes to animate a fading outline.
Range.extractContents() - Web APIs
html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p>
css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselecti...
Range.getClientRects() - Web APIs
syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); rectlist = range.getclientrects(); specification specification status comment
css object model (
cssom) view modulethe definition of 'range.getclientrects()' in that specification.
Range - Web APIs
css object model (
cssom) view modulethe definition of 'extensions to range' in that specification.
Resource Timing API - Web APIs
the initiatortype property returns the type of resource that initiated the performance entry such as "
css" for a
css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg).
SVGClipPathElement - Web APIs
specifications specification status comment
css masking module level 1the definition of 'svgclippathelement' in that specification.
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg>
css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment ...
SVGGraphicsElement: paste event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg>
css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment ...
SVGMaskElement - Web APIs
specifications specification status comment
css masking module level 1the definition of 'svgmaskelement' in that specification.
SVGTextContentElement - Web APIs
note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the
css 'letter-spacing' and 'word-spacing' properties.
Screen.availWidth - Web APIs
syntax var width = window.screen.availwidth example var screenavailwidth = window.screen.availwidth; console.log(screenavailwidth); specifications specification status comment
css object model (
cssom) view modulethe definition of 'screen.availwidth' in that specification.
Screen.height - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'screen.height' in that specification.
Screen.width - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'screen.width' in that specification.
Screen - Web APIs
void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment
css object model (
cssom) view modulethe definition of 'screen' in that specification.
ScrollToOptions.behavior - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment
css object model (
cssom) view modulethe definition of 'behavior' in that specification.
ScrollToOptions.left - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment
css object model (
cssom) view modulethe definition of 'left' in that specification.
ScrollToOptions.top - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment
css object model (
cssom) view modulethe definition of 'top' in that specification.
ServiceWorkerGlobalScope: install event - Web APIs
the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.o...
ServiceWorkerGlobalScope.oninstall - Web APIs
the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); specifications specification status comment service workersthe definition of 'even...
StylePropertyMap.clear() - Web APIs
return value undefined example // tbd specifications specification status comment
css typed om level 1the definition of 'clear()' in that specification.
StyleSheet.disabled - Web APIs
} specification specification status comment
css object model (
cssom)the definition of 'stylesheet.disabled' in that specification.
StyleSheet.title - Web APIs
specifications specification status comment
css object model (
cssom)the definition of 'stylesheet: title' in that specification.
StyleSheet.type - Web APIs
syntax string = stylesheet.type example mystylesheet.type = 'text/
css'; specifications specification status comment
css object model (
cssom)the definition of 'stylesheet: type' in that specification.
TextDecoder() - Web APIs
'iso-2022-jp' "
csshiftjis", "ms_kanji", "shift-jis", "shift_jis", "sjis", "windows-31j", "x-sjis" 'shift-jis' "cseuckr", "csksc56011987", "euc-kr", "iso-ir-149", "korean", "ks_c_5601-1987", "ks_c_5601-1989", "ksc5601", "ksc_5601", "windows-949" 'euc-kr' "csiso2022kr", "iso-2022-kr" 'iso-2022-kr' "utf-16be" 'utf-16be' "utf-16", "utf-16le" 'utf-16le'...
TextMetrics.actualBoundingBoxAscent - Web APIs
the read-only actualboundingboxascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the bounding rectangle used to render the text, in
css pixels.
TextMetrics.actualBoundingBoxDescent - Web APIs
the read-only actualboundingboxdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle used to render the text, in
css pixels.
TextMetrics.actualBoundingBoxLeft - Web APIs
the read-only actualboundingboxleft property of the textmetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in
css pixels.
TextMetrics.actualBoundingBoxRight - Web APIs
the read-only actualboundingboxright property of the textmetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in
css pixels.
TextMetrics.alphabeticBaseline - Web APIs
the read-only alphabeticbaseline property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the alphabetic baseline of the line box, in
css pixels.
TextMetrics.emHeightAscent - Web APIs
the read-only emheightascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the top of the em square in the line box, in
css pixels.
TextMetrics.emHeightDescent - Web APIs
the read-only emheightdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the bottom of the em square in the line box, in
css pixels.
TextMetrics.fontBoundingBoxAscent - Web APIs
the read-only fontboundingboxascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in
css pixels.
TextMetrics.fontBoundingBoxDescent - Web APIs
the read-only fontboundingboxdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in
css pixels.
TextMetrics.hangingBaseline - Web APIs
the read-only hangingbaseline property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the hanging baseline of the line box, in
css pixels.
TextMetrics.ideographicBaseline - Web APIs
the read-only ideographicbaseline property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the ideographic baseline of the line box, in
css pixels.
TextMetrics.width - Web APIs
the read-only width property of the textmetrics interface contains the text's advance width (the width of that inline box) in
css pixels.
TransitionEvent.elapsedTime - Web APIs
syntax name = transitionevent.elapsedtime specifications specification status comment
css transitionsthe definition of 'transitionevent.elapsedtime' in that specification.
TransitionEvent.pseudoElement - Web APIs
syntax name = transitionevent.pseudoelement specifications specification status comment
css transitionsthe definition of 'transitionevent.pseudoelement' in that specification.
UIEvent.layerX - Web APIs
& layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/
css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates ...
UIEvent.layerY - Web APIs
& layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/
css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates ...
UIEvent.pageY - Web APIs
& layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/
css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates ...
VTTCue - Web APIs
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video>
css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtit...
VisualViewport.offsetTop - Web APIs
the offsettop read-only property of the visualviewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in
css pixels.
VisualViewport.offsetleft - Web APIs
the offsetleft read-only property of the visualviewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in
css pixels.
VisualViewport.pageLeft - Web APIs
the pageleft read-only property of the visualviewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in
css pixels.
VisualViewport.pageTop - Web APIs
the pagetop read-only property of the visualviewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in
css pixels.
Basic scissoring - Web APIs
block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in
css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by
css.
Clearing with colors - Web APIs
note that
css sets the background color of the canvas to black, so when the canvas turns green we know that webgl's magic has worked.
WebGL by example - Web APIs
canvas size and webgl the example explores the effect of setting (or not setting) the canvas size to its element size in
css pixels, as it appears in the browser window.
WebGL best practices - Web APIs
instead, we can use non-integer values for
css's top/bottom/left/right to fairly reliably 'pre-snap' our canvas to whole integer device coordinates.
WebXR Device API - Web APIs
matrix math for the web a guide covering how matrices can be used on the web, including both for
css transforms and for webgl purposes, as well as to handle the positioning and orientation of objects in webxr contexts.
Controlling multiple parameters with ConstantSourceNode - Web APIs
lass="left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p>
css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; disp...
Example and tutorial: Simple synth keyboard - Web APIs
<div class="right"> <span>current waveform: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div>
css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px...
Window: blur event - Web APIs
html <p id="log">click on this document to give it focus.</p>
css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window: error event - Web APIs
examples live example html <div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselec...
Window: focus event - Web APIs
html <p id="log">click on this document to give it focus.</p>
css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window.innerHeight - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.innerheight' in that specification.
Window.innerWidth - Web APIs
ll return the width of the frame viewport within a frameset var intframewidth = self.innerwidth; // this will return the width of the viewport of the closest frameset var intframesetwidth = parent.innerwidth; // this will return the width of the viewport of the outermost frameset var intouterframesetwidth = top.innerwidth; specification specification status comment
css object model (
cssom) view modulethe definition of 'window.innerwidth' in that specification.
Window: load event - Web APIs
age is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = documen...
Window.moveBy() - Web APIs
function budge() { moveby(10, -10); } specification specification status comment
css object model (
cssom) view modulethe definition of 'window.moveby()' in that specification.
Window.moveTo() - Web APIs
function origin() { window.moveto(0, 0); } specification specification status comment
css object model (
cssom) view modulethe definition of 'window.moveto()' in that specification.
Window.onmozbeforepaint - Web APIs
this time is the same for all animations being run in the same browser window, including those using the window.mozrequestanimationframe() method,
css transitions, and smil animations.
Window.outerHeight - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.outerheight' in that specification.
Window.outerWidth - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.outerwidth' in that specification.
Window.pageXOffset - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.pagexoffset' in that specification.
Window.requestAnimationFrame() - Web APIs
the element moves at a speed of 0.1px/ms to the right, so its relative position (in
css pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed.
Window.resizeBy() - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.resizeby()' in that specification.
Window.resizeTo() - Web APIs
function quarter() { window.resizeto( window.screen.availwidth / 2, window.screen.availheight / 2 ); } specification specification status comment
css object model (
cssom) view modulethe definition of 'window.resizeto()' in that specification.
Window.screen - Web APIs
syntax let screenobj = window.screen; example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.screen' in that specification.
Window.scroll() - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.scroll()' in that specification.
Window.scrollBy() - Web APIs
specification specification status comment
css object model (
cssom) view modulethe definition of 'window.scrollby()' in that specification.
Window.scrollTo() - Web APIs
specifications specification status comment
css object model (
cssom) view modulethe definition of 'window.scroll()' in that specification.
Window.scrollX - Web APIs
window.pageyoffset : (document.documentelement || document.body.parentnode || document.body).scrolltop; specification specification status comment
css object model (
cssom) view modulethe definition of 'window.scrollx' in that specification.
WindowOrWorkerGlobalScope.caches - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.
css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'ca...
Worklet.addModule() - Web APIs
examples audioworklet example const audioctx = new audiocontext(); const audioworklet = audioctx.audioworklet; await audioworklet.addmodule('modules/bypassfilter.js', { credentials: 'omit', }); paintworklet example
css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/
csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the
css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: paint(hollowhighlights, filled, 3px); } } specifications specification status comment ...
XMLHttpRequest: abort event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
XMLHttpRequest: error event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
XMLHttpRequest: load event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
XMLHttpRequest: loadend event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
XMLHttpRequest: loadstart event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
XMLHttpRequest: progress event - Web APIs
examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea>
css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.
Using the alert role - Accessibility
pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using
css, making it visible will cause the alert to fire as if it was just added to the page.
ARIA Test Cases - Accessibility
afari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - radiogroup and radiobutton radio example using
css background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position.
ARIA: switch role - Accessibility
document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.addeventlistener("click", handleclickevent, false); }); function handleclickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } }
css the purpose of the
css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm.
ARIA: tab role - Accessibility
required javascript features while there are ways to build tab-like functionality without javascript, there are no substitute combination of html and
css only that will provide the same set of functionality that's required above for accessible tabs with content.
Keyboard-navigable JavaScript widgets - Accessibility
in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and ie doesn't implement
css outlines).
Color contrast - Accessibility
examples let's have a look at some simple html and
css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color.
Demos of open web technologies
browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code)
css css zen garden
css floating logo "mozilla" paperfold
css blockout rubik's cube pure
css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial
css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web...
Ajax - Developer guides
asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml,
css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
Guide to Web APIs - Developer guides
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apic
css counter styles
css font loading api
cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture ...
Cross-browser audio basics - Developer guides
first of all, we apply a quick update to the progress bar
css to display the hand pointer on hover: #progress { margin-left: 80px; border: 1px solid black; cursor: pointer; } then we add the code that detects the click and moves the 'playhead' to the correct position: var progress = document.getelementbyid('progress'); progress.addeventlistener('click', function(e) { // calculate the normalized position clicked var clickposition = (e.pagex...
Media buffering, seeking, and time ranges - Developer guides
the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following
css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } ...
Audio and Video Delivery - Developer guides
the general technique for achieving this is to omit the controls attribute so that the default browser controls are not displayed, create custom controls using html and
css, then use javascript to link your controls to the audio/video api.
Event developer guide - Developer guides
you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with
css 3d transforms.
Making content editable - Developer guides
!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/
css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compf...
HTML5 Parser - Developer guides
the dom methods and
css selectors behave case-sensitively, so you need to write your dom calls and
css selectors using the canonical case, which is camelcase for various parts of svg such as viewbox.
Printing - Developer guides
<link href="/path/to/print.
css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
Developer guides
css learning area cascading style sheets (
css) is a stylesheet language used to define the presentation of a document written in html.
HTML attribute: multiple - HTML: Hypertext Markup Language
/* uncomment this
css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute.
<input type="hidden"> - HTML: Hypertext Markup Language
</textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="34657"> </form> let's also add some simple
css: html { font-family: sans-serif; } form { width: 500px; } div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to ...
<input type="radio"> - HTML: Hypertext Markup Language
the
css involved is a bit more significant: html { font-family: sans-serif; } div:first-of-type { display: flex; align-items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s a...
<menu> - HTML: Hypertext Markup Language
examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu>
css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
<menuitem> - HTML: Hypertext Markup Language
</menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu>
css content div { width: 300px; height: 80px; background-color: lightgreen; } result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification.
Using the application cache - HTML: Hypertext Markup Language
example 2: a more complete cache manifest file the following is a more complete cache manifest file for the imaginary web site at www.example.com: cache manifest # v1 2011-08-14 # this is another comment index.html cache.html style.
css image1.png # use from network if available network: network.html # fallback content fallback: .
Common MIME types - HTTP
terleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .
css cascading style sheets (
css) text/
css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) ...
Accept - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a
css stylesheet a different value is set for the request than when fetching an image, video or a script.
Cache-Control - HTTP
this includes static files that are served by the application such as images,
css files and javascript files, for example.
DPR - HTTP
the dpr header is a client hints headers which represents the client device pixel ratio (dpr), which is the the number of physical device pixels corresponding to every
css pixel.
X-Content-Type-Options - HTTP
header type response header forbidden header name no syntax x-content-type-options: nosniff directives nosniff blocks a request if the request destination is of type: "style" and the mime type is not text/
css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification ...
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images,
css, javascript, and so forth.
Link prefetching FAQ - HTTP
some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.
css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched?
<feComponentTransfer> - SVG: Scalable Vector Graphics
="170">discrete table lookup</text> <rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg>
css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as
css properties for that element.
<hatch> - SVG: Scalable Vector Graphics
hatches defined by the <hatch> element can then referenced by the fill and stroke
css properties on a given graphics element to indicate that the given element shall be filled or stroked with the hatch.
<mask> - SVG: Scalable Vector Graphics
y number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment
css masking module level 1the definition of '<mask>' in that specification.
<rect> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as
css properties for that element.
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/
css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='...
Positions - SVG: Scalable Vector Graphics
much like absolute and relative font sizes in
css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers.
SVG Tutorial - SVG: Scalable Vector Graphics
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and
css the following topics are more advanced and hence should get their own tutorials.
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes
css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in
css where a <url> value is used (@font-face, cursor, background-image, and so forth).
Web security
privacy and the :visited selector before about 2010, the
css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited.
xml:base - XML: Extensible Markup Language
<svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/
css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/
css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can in...
XPath
related topics xslt, xquery, xml, dom, jxon, jsonpath comparison of
css selectors and xpath ...
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/gp/product/0596004206 digital websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (
css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto standard.
Basic Example - XSLT: Extensible Stylesheet Language Transformations
et <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/
css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> ...
WebAssembly Concepts - WebAssembly
a set of web apis that the web app can call to control web browser/device functionality and make things happen (dom,
cssom, webgl, indexeddb, web audio api, etc.).