Video and Audio APIs - Learn web development
ity of 0.5 by default, so that they are less distracting when you are trying to watch the video. only when you are hovering/focusing over the player do the controls appear at full opacity. we lay out the buttons inside the control bar using flexbox (display: flex), to make things easier. ...
...ting when you are trying to watch the video. only when you are hovering/focusing over the player do the controls appear at full opacity. we lay out the buttons inside the control bar using flexbox (display: flex), to make things easier. ...
...he player do the controls appear at full opacity. we lay out the buttons inside the control bar using flexbox (display: flex), to make things easier. ...
...And 2 more matches

Embedding API for Accessibility
only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies from originating server only, 2=no cookies */ setboolpref("network.cookie.warnaboutcookies", boolwarn); moz 0.8 fonts setcharpref("font.name.monospace.x-western", newfontname); setcharpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar,...
...charpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw */ setintpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_document_fonts", whichfonts); ...
... setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_document_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system? ...
...And 2 more matches

Mozilla Web Developer FAQ
ired and some other browsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. ...
...rowsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. ...
... people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. does mozilla support downloadable fonts? downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.5. the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers. downloadable fonts in the eot format are not supported. if you use downloadable fonts, please make sure the fonts have the right unicode mappings and the content uses the right unicode characters. the past practi...
...And 2 more matches

font-stretch - CSS: Cascading Style Sheets
for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-stretch descriptor to explicitly specify the font face's stretch. the values for the css descriptor is same as that of its corresponding font property. ...
...e most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greate...
...ble below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed 50% extra-condensed 62.5% condensed 75% semi-condensed 87.5% normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values. however some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for this, percentage ranges are useful. for truetype or opentype variable fonts, the "wdth" variation is used to i...
...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. syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family specifies a name that will be used as the font face value for font properties. font-stretch a font-stretch value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; fo...
...hat is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value. font-feature-settings allows control over advanced typographic features in opentype fonts. font-variation-settings allows low-level control over opentype or truetype font variations, by specifying the four letter axis names of the features to vary, along with their variation values. src specifies the resource containing the font data. this can be a url to a remote font file location or the name of a font on the user's computer. to provide the browser with a hint as to what for...
...-opentype", and "svg". unicode-range the range of unicode code points to be used from the font. description if the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. otherwise, the font resource specified using the url() function is downloaded and used. by allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). the ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an interne...
...And 2 more matches

font-stretch - CSS: Cascading Style Sheets
e most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility table for details. keyword t...
...normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% description some font families offer additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the normal face (expanded faces). you can use font-stretch to select a condensed or expanded face from such fonts. if the font you are using does not offer condensed or expanded faces, this property has no effect. font face selection the face selected for a given value of font-stretch depends on the faces supported by the font in question. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% ma...
...for a given value of font-stretch depends on the faces supported by the font in question. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. the table below demonstrates the effect of supplying various different percentage values of font-stretch on two different fonts: 50% 62.5% 75% 87.5% 100% 112.5% 125% 150% 200% helvetica neue league mono variable helvetica neue, which is installed by default on macos, has a single condensed face in addition to the normal face. all values of font-stretch less than 100% select the conde...
...And 2 more matches

font-style - CSS: Cascading Style Sheets
to 90deg inclusive. if an angle is not specified, an angle of 14 degrees is used. positive values are slanted to the end of the line, while negative values are slanted towards the beginning. in general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm). variable fonts variable fonts can offer a fine control over the degree to which an oblique face is slanted. you can select this using the <angle> modifier for the oblique keyword. for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. for th...
... oblique face is slanted. you can select this using the <angle> modifier for the oblique keyword. for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. 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 /* ...
... mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements. it also applie...
...And 2 more matches

contextmenu - HTML: Hypertext Markup Language
xt" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
...> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray! ...
...ipt function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray! ...
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
s to be rendered using a normal, italic, or oblique face. 84 font-variant svg, svg attribute the font-variant attribute indicates whether the text is to be rendered using variations of the fontʼs glyphs. 85 font-weight svg, svg attribute the font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. 86 format deprecated, svg, svg attribute the format attribute indicates the format of the given font. 87 fr svg, svg attribute the fr attribute defines the radius of the focal point for the radial gradient. 88 from svg, svg attribute the from attribute indicates the initial value of the attribute that will be ...
... how to use inline svg to provide a background picture for a form. it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html. 285 svg and css css, css:getting_started, example, guide, intermediate, needsupdate, svg, web below you'll create a simple demonstration that runs in your svg-enabled browser. 286 svg fonts advanced, needsupdate, svg, svg:tutorial when svg was specified, support for web fonts was not widespread in browsers. since accessing the correct font file is however crucial for rendering text correctly, a font description technology was added to svg to provide this ability. it was not meant for compatibility with other formats like postscript or otf, but rather as a simple means of e...
...ginner, needsbeginnerupdate, needscontent, needsupdate, svg, tutorial the svg <image> element allows for raster images to be rendered within an svg object. 288 texts intermediate, svg, svg:tutorial when talking about text in svg we have to differentiate two almost completely separate topics. the one is the inclusion and display of text in an image, and the other are svg fonts. the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image. 289 tools for svg intermediate, needsupdate, svg, tools now that we covered the basics of the svg internals, we will take a look at some tools to work with svg files. 290 svg animation with smil animation, firefox 4...
...And 2 more matches

Browser Feature Detection - Archive of obsolete content
e borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true color true true true display true true true cssfloat true false true font true true true fontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyle...
... counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth true ie7 only true minheight true true true minwidth true ie7 only true orp...
..., {name: 'borderbottomwidth', 'supported': false}, {name: 'borderleftwidth', 'supported': false}, {name: 'borderwidth', 'supported': false}, {name: 'clear', 'supported': false}, {name: 'color', 'supported': false}, {name: 'display', 'supported': false}, {name: 'cssfloat', 'supported': false}, {name: 'font', 'supported': false}, {name: 'fontfamily', 'supported': false}, {name: 'fontsize', 'supported': false}, {name: 'fontstyle', 'supported': false}, {name: 'fontvariant', 'supported': false}, {name: 'fontweight', 'supported': false}, {name: 'height', 'supported': false}, {name: 'letterspacing', 'supported': false}, {name: 'lineheight', 'supported': false}, {name: 'liststyle', 'supported': false}, {name: 'liststyleimage', 'supported': false}, {name: 'liststyle...
..., {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported': false}, {name: 'maxheight', 'supported': false}, {name: 'maxwidth', 'supported': false}, {name: 'minheight', 'supported': false}, {name: 'minwidth', 'supported': false}, {name: 'orphans', 'supporte...

Styling tables - Learn web development
you don't have a border round the whole outside of the table and end up with gaps. we've set some padding on the <th> and <td> elements — this gives the data items some space to breathe, making the table look a lot more legible. at this point, our table already looks a lot better: some simple typography now we'll get our text sorted out a bit. ...
...ore legible. at this point, our table already looks a lot better: some simple typography now we'll get our text sorted out a bit. first of all, we've found a font on google fonts that is suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
...t of all, we've found a font on google fonts that is suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
... and cells, as we feel it aids readability. again, mostly a stylistic choice. we've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings. by default, cells are given a text-align value of left, and headings are given a value of center, but generally it looks better to have the alignments set the same for both. the default bold weight on the heading fonts is enough to differentiate their look. we've right-aligned the heading inside the <tfoot> so that it is visually associated better with its data point. the result looks a bit neater: graphics and colors now onto graphics and colors! because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. don't worry, you don't have to make your tables this l...

nsIHTMLEditor
isvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astrin...
...out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asource...
... dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63. nsidomelement createelementwithdefaults( in astring atagname ); parameters atagname the html tagname. special input value for links: use "href" to get a link node (an "a" tag with the "href" attribute set) return value the new element created. decreasefontsize() decrease font size for text in selection by 1 html unit all existing text is scanned for existing <font size> attributes so they will be decreased instead of inserting new <font> tag. void decreasefontsize(); parameters none. dodrag() transfers the relevant data (as appropriate) to a transferable so it can later be dropped. void dodrag( in nsidomevent aevent ); parameters aeve...
...ontainer of the selection. nsidomelement getselectioncontainer(); parameters none. return value a dom element. ignorespuriousdragevent() used to suppress spurious drag/drop events to workaround bug 50703. do not use this method! it will go away after first release! void ignorespuriousdragevent( in boolean aignorespuriousdragevent ); parameters aignorespuriousdragevent increasefontsize() increase font size for text in selection by 1 html unit all existing text is scanned for existing <font size> attributes so they will be incremented instead of inserting new <font> tag. void increasefontsize(); parameters none. indent() document me! void indent( in astring aindent ); parameters aindent insertelementatselection() insert an element, which may have child no...

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 font-weight property can separately be used to set how thick or thin characters in text should be displayed. for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. the values for the css descriptor is same as that of its corresponding font property. there are generally limited weights available for a particular font family. when a specified weight doesn't exist, a nearby weight is used. fonts lacking bold are often synthesized by the user agent. to prevent this, use font-synthesis property. syntax /* sing...
...usive. higher numbers represent weights that are bolder than (or as bold as) lower numbers. certain commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts. 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. common weight name mapping the numerical values 100 to ...
...es 100 to 900 roughly correspond to the following common weight names: value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying we...
...#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or import it, and allows using the font for normal font weights. @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification. working draft css fonts module level 3the definition of 'font-weight' in that specification. candidate recommendation ...

font-weight - CSS: Cascading Style Sheets
usive. higher numbers represent weights that are bolder than (or as bold as) lower numbers. certain commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the fallback weights system. 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. fallback weights if the exact wei...
...pe specification): value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal (regular) 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying ...
...mon weight name mapping. however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. 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. html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</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>...
...pan>i'm lighter</span> </div> css /* set paragraph text to be bold. */ p { font-weight: bold; } /* set div text to two steps heavier than normal but less than a standard bold. */ div { font-weight: 600; } /* set span text to be one step lighter than its parent. */ span { font-weight: lighter; } result specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification. working draft defines font-weight to accept any numbers between 1 and 1000. css fonts module level 3the definition of 'font-weight' in that specification. candidate recommendation no change. css level 2 (revision 1)the definition of 'font-weight' in that specification. recommendation no change...

Using dns-prefetch - Web Performance
requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a rel attribute value of dns-prefetch. the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind. best practices...
...for one, dns-prefetch is only effective for dns lookups on cross-origin domains, so avoid using it to point to your site or domain. this is because the ip behind your site’s domain will have already been resolved by the time the browser sees the hint. second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect hint. while dns-prefetch only performs a dns lookup, preconnect establishes a connection to a server. this process includes dns resolution, as well as establishing the tcp connection, and performing the tls handshake—if a site is served over https. combining the two provides an opportunity to further reduc...
...a dns lookup, preconnect establishes a connection to a server. this process includes dns resolution, as well as establishing the tcp connection, and performing the tls handshake—if a site is served over https. combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. you can safely use them together like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive. the preconnect hint is best used for only the most critical connections. for the others, just use <link rel="dns-prefetch"> to save time on the first step — the dns lookup. the logic behind...
...ch is better than support for preconnect. browsers that don’t support preconnect will still get some added benefit by falling back to dns-prefetch. because this is an html feature, it is very fault-tolerant. if a non-supporting browser encounters a dns-prefetch hint—or any other resource hint—your site won’t break. you just won’t receive the benefits it provides. some resources such as fonts are loaded in anonymous mode. in such cases you should set the crossorigin attribute with the preconnect hint. if you omit it, the browser will only perform the dns lookup. ...

Structural overview of progressive web apps - Progressive web apps (PWAs)
e fastest way to serve your app's content. the performance benefits will be truly spectacular. for working examples and more information, see the streams api documentation. structure of a sample application the js13kpwa web site's structure is quite simple. it consists of a single html file (index.html), with basic css styling provided in style.css. also included are a few images, scripts, and fonts. 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. the parts that are directly relevant to the app shell model are found outside the <section> with the id content...
...ctory: self.importscripts("data/games.js"); then it creates a list of all the files that the service worker needs to cache. ...
...hen it creates a list of all the files that the service worker needs to cache. ...
... service worker needs to cache. ...

CSS3 - Archive of obsolete content
llowing to tailor a web site regarding the input methods available on the user agent, with new media features like hover or pointer. detection of ecmascript support, using the script media features is also proposed. css style attributes recommendation since november 7th, 2013 formally defines the syntax of the content of the html style global attribute. css fonts module level 3 candidate recommendation since september 20th, 2018 amends the css2.1 font matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the cs...
... the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. ...
...box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web developers can define new list counter schemes. motion path module level 1 working draft css fonts module level 4 working draft css easing functions level 1 working draft css logical properties and values level 1 editor's draft modules in the revising phase modules that are in the revising phase are much less stable than those in the refining phase. often the syntax is still under scrutiny and may evolve a lot, in a...

Styling links - Learn web development
d this information at the end of the module — see typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. ...
...f the module — see typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. ...
...ticle before moving on to it. ...

CSS basics - Learn web development
tribute. img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state. (for example, when a cursor hovers over a link.) a:hover selects <a>, but only when the mouse pointer is hovering over the link. there are many more selectors to discover. to learn more, see the mdn selectors guide. fonts and text now that we've explored some css fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file. first, find the output from google fonts that you previously saved from what will your website look like?. add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). it looks somet...
... next, delete the existing rule you have in your style.css file. ...
...e for text. this rule defines a global base font and font size for the whole page. since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family. html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font sizes for elements that will have text inside the html body (<h1>, <li>, and <p>). we'll also center the heading. finally, let's expand the second ruleset (below) with set...

What will your website look like? - Learn web development
what should your website actually do? a website can do basically anything, but, for your first try, you should keep things simple. ...
...what information are you presenting on the subject? write a title and a few paragraphs and think of an image you'd like to show on your page. what does your website look like, in simple high-level terms? what's the background color? what kind of font is appropriate: formal, cartoony, bold and loud, subtle? note: complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. this is sometimes called a design guide, design system, or brand book, and you can see an example at the firefox photon design system. sketching out your design next, grab pen and paper and sketch out roughly how you want your site to look. for your first simple webpage, there's not much to sketch out, but you should get i...
... your browser's address bar for later use. note that most images on the web, including in google images, are copyrighted. to reduce your likelihood of violating copyright, you can use google's license filter. click on the tools button, then on the resulting usage rights option that appears below. you should choose an option such as labeled for reuse. font to choose a font: go to google fonts and scroll down the list until you find one you like. you can also use the controls on the right to further filter the results. click the "plus" (add to) icon next to the font you want. click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected). in the popup box, you can see and copy the lines of code google gives you into your text...

Mozilla’s UAAG evaluation report
checkpoint title status notes/plans 4.1 configure text size. (p1) c can be changed through preferences, zooming or user style sheet. zooming is really the best solution, because the document retains its look - all font sizes are increased the same percentage. zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if you just want to change the minimum font size for a certain font: user_pref("font.minimum-size.x-western", newfontsizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family. (p1) c ...
...(p1) vg can be changed through preferences or by editing the prefs.js file the prefs are at preferences, appearances, colors to use any color offered in windows, the prefs.js file must be edited by hand 4.4 slow multimedia. ...
...(p2) vg html 4.01: vg css 1: vg css 2: vg dom 1.0: vg guideline 9. provide navigation mechanisms. checkpoint title status notes/plans 9.1 provide content focus. (p1) c provides...

Midas
e clipboard and remove the selection from the edit control. if there isn't a selection, nothing will happen. note: this command won't work without setting a pref or using signed js. see: more about security preferences note: the shortcut key will automatically trigger this command (typically accel-x) with or without the signed js or any code on the page to handle it. decreasefontsize this command will add a <small> tag around selection or at insertion point. delete this command will delete all text and objects that are selected. if no text is selected it deletes one character to the right. this is similar to the delete button on the keyboard. fontname a font name this command will set the font face for a selection or at the insertion p...
...if no text is selected it deletes one character to the right. this is similar to the delete button on the keyboard. fontname a font name this command will set the font face for a selection or at the insertion point if there is no selection. the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names. fontsize a number this command will set the fontsize for a selection or at the insertion point if there is no selection. the given number is such as would be used in the "size" attribute of the font tag. forecolor a color code this command will set the text color of the selection or at the insertion point. formatblock h1, h2, h3, h4, h5, h6, p, div, address, blo...
..., h3, h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element. heading h1, h2, h3, h4, h5, h6 selected block will be formatted as the given type of heading. hilitecolor a color code this command will set the hilite color of the selection or at the insertion point. it only works with stylewithcss enabled. increasefontsize this command will add a <big> tag around selection or at insertion point. indent indent the block where the caret is located. if the caret is inside a list, that item becomes a sub-item one level deeper. insertbronreturn true/false selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag. inserthorizo...

Document.execCommand() - Web APIs
a value argument for the hyperlink's href. the uri must contain at least a single character, which may be whitespace. (internet explorer will create a link with a null value.) cut removes the current selection and copies it to the clipboard. when this behavior is enabled varies between browsers, and its conditions have evolved over time. check the compatibility table for usage details. decreasefontsize adds a <small> tag around the selection or at the insertion point. (not supported by internet explorer.) defaultparagraphseparator changes the paragraph separator used when new paragraphs are created in editable text regions. see differences in markup generation for more details. delete deletes the current selection. enableabsolutepositioneditor enables or disables the grabber that allo...
...efault since firefox 64 (bug 1490641). enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects. the handles are disabled by default since firefox 64 (bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like "arial") as a value argument. fontsize changes the font size for the selection or at the insertion point. this requires an integer from 1-7 as a value argument. forecolor changes a font color for the selection or at the insertion point. this requires a hexadecimal color value string as a value argument. formatblock adds an html block-level element around the line containing the current selection, replacing the block element co...
...ng element around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a color value string as a value argument. usecss must be true for this to function. (not supported by internet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the enter key inserts a <br> eleme...

ResizeObserver.observe() - Web APIs
s which box model the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. ...
...the default), and border-box. return value void. exceptions none. ...
...nippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); an observe() call with an options object would look like so: resizeobserver.observe(divelem, { box : 'border-box' }); specifications specification status comment resize observerthe defini...

ResizeObserver.unobserve() - Web APIs
element. syntax void unobserve(target); parameters target a reference to an element or svgelement to be unobserved. return value void. exceptions none. ...
...t or svgelement to be unobserved. return value void. exceptions none. ...
...nippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status...

ResizeObserverEntry.contentRect - Web APIs
e resize-observer-text.html (see source) example. this uses a simple feature detection test to see if the browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses contentrect. ...
...st to see if the browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses contentrect. ...
... uses that to get the sizing data it needs. if not, it uses contentrect. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'contentrect' in that specification. editor's draft initial definition. ...

ResizeObserverEntry - Web APIs
he resize-observer-text.html (see source) example. this uses a simple feature detection test to see if the browser supports the newer contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses the older contentrect property. ...
...est to see if the browser supports the newer contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses the older contentrect property. ...
...he sizing data it needs. if not, it uses the older contentrect property. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'resizeobserverentry' in that specification. editor's draft initial definition. ...

src - CSS: Cascading Style Sheets
function, which uniquely identifies a single font face within a larger family. the name can optionally be enclosed in quotes. description the value of this descriptor is a prioritized, comma-separated list of external references or locally-installed font face names. when a font is needed the user agent iterates over the set of references listed using the first one it can successfully activate. fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list. 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. in the case of svg fonts, the url points to an element within a document containing svg font definitions. if the e...
...fragment identifiers are used to indicate which font to load. ...
... candidate recommendation initial definition ...

font-kerning - CSS: Cascading Style Sheets
the font-kerning css property sets the use of the kerning information stored in a font. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. kerning defines how letters are spaced. in well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be. in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below. values auto the browser determines whether font kerning should be used or not. for example, some browsers will disabl...
...form and pleasant to read than it would otherwise be. in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below. values auto the browser determines whether font kerning should be used or not. for example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text. normal font kerning information stored in the font must be applied. none font kerning information stored in the font is disabled. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none...
... candidate recommendation initial definition. ...

font-size - CSS: Cascading Style Sheets
ent's font size. note: to maximize accessibility, it is generally best to use values that are relative to the user's default font size. description there are several ways to specify the font size, including with keywords or numerical values for pixels or ems. choose the appropriate method based on the needs for the particular web page. keywords keywords are a good way to set the size of fonts on the web. by setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. pixels setting the font size in pixel values (px) is a good choice when you need pixel accuracy. a px value is static. this is an os-independent and cross-browser way of literall...
... candidate recommendation no change. css level 2 (revision 1)the definition of 'font-size' in that specification. recommendation no change. css level 1the definition of 'fon...
...24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status comment css fonts module level 4the definition of 'font-size' in that specification. working draft adds xxx-large keyword. css fonts module level 3the definition of 'font-size' in that specification. candidate recommendation no change. css level 2 (revision 1)the definition of 'font-size' in that specification. recommendation no change. css level 1the definition of 'font-size' in that specification. recommendation initial definition. ...

font-variation-settings - CSS: Cascading Style Sheets
4-character axis. some will end up becoming more common, and may even become registered over time. note: registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. note that font designers aren't forced follow this practice in any way, and some won't. the important takeaway here is that axis tags are case-sensitive. in order to use variable fonts on your operating system, you need to make sure that it is up to date. for example linux oses need the latest linux freetype version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. formal definition initial valuenormalapplies toall elements. it also appl...
...perating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea transform formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org. weight (wght) the following live example's css can be edited to allow you to play with font weight values. slant (slnt) the following live example's css can be edited to allow you to play with font slant/oblique values. ...
... other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org. weight (wght) the following live example's css can be edited to allow you to play with font weight values. slant (slnt) the following live example's css can be edited to allow you to play with font slant/oblique values. specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification. working draft initial definition ...

font - CSS: Cascading Style Sheets
</div> <br/><br/><br/><br/><br/><br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left; text-align: center; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom...
... candidate recommendation added support for font-stretch values. css level 2 (revision 1)the definition of 'font-weight' in that specification. recom...
... candidate recommendation added support for font-stretch values. ...

Authoring MathML - MathML
ct the rendering engines with native mathml support (gecko and webkit). note that ua string sniffing is not the most reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('applewebkit') > -1 && ua.indexof('chrome') === -1; mathematical fonts in order to get a good layout or to allow different style, it's important to have mathematical fonts available. it's always good to provide a link to mdn's font instructions, so that your visitors can verify whether they have appropriate fonts installed on their system. it's also good to provide a fallback with web fonts. prior to gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), i...
...for gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), this is much simpler and is compatible with any web rendering engine with mathml support. ...
...ext and latin modern math for the mathematics: @namespace url('http://www.w3.org/1999/xhtml'); @namespace m url('http://www.w3.org/1998/math/mathml'); body, m|mtext { font-family: latin modern; } m|math { font-family: latin modern math; } you can then use the @font-face rule as usual to provide woff fallback for latin modern and latin modern math. see this github repository to get woff fonts and sample css stylesheets to use on your web site and check its test page. mathml in xml documents (xhtml, epub, etc) if for some reason you need to use mathml in xml documents, be sure to satisfy the usual requirements: well-formed document, use of correct mime type, mathml namespace "http://www.w3.org/1998/math/mathml" on <math> roots. for example, the xhtml version of the previous example l...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
nd add files to it for offline use. our js13kpwa app does exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. ...
...a app does exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. ...
... storing the cache name is created, and the app shell files are listed in one array. ...

New Skin Notes - Archive of obsolete content
indeed, the logout link is as it should be on the left in personal tools. --mmondor 12:49, 26 aug 2005 (pdt) the logout link is exactly where the login link is. this makes sense as-is. not changing. --dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86. a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles. that our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will m...
...6. a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles. that our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well). but it should work by default with 800 pixels width, imo. --mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-size to anything other than 100%, let the user figure out which font-setting is best for him/her on his/her computer, rather than tweak it to what the designer feels is the right size for the designers eye(s). if th...

Adding Style Sheets - Archive of obsolete content
eviousnext » we have hardly modified the look of the elements we have created so far. xul uses css (cascading style sheets) to customize elements. style sheets a style sheet is a file which contains style information for elements. it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter. the style sheet contains information such as the fonts, colors, borders, and size of elements. mozilla applies a default style sheet to each xul window. in many cases, it will suffice to leave the defaults as is. other times, however, you will want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely and accessed via ...
...?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and borders to make the elements look more suitable. changing the styles however, there will be times when the default look of elements will not give the look that is desired. for this, we will need to add a style sheet of our own. so far, we have been applying styles using the style attribute on elements. although this works, it is not really the best thing to do. it is much better to cr...

Writing Skinnable XUL and CSS - Archive of obsolete content
a css file for a ui component that will be overlayed into other components. below are examples for each case. example 1: the navigator package has a personal toolbar with popup menu buttons. the colors for the toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elements in the xul. there should be no rules in navigator.css that attempt to define colors, fonts, etc. for either the personal toolbar headers or for the menu buttons' borders. example 2: the messenger package has a css file that describes the appearance of the messenger button that appears on the taskbar used by all windows. the messenger css file should not attempt to describe the borders or the colors for this button. it should only describe the icon. because the button is used in the ...
...aders or for the menu buttons' borders. example 2: the messenger package has a css file that describes the appearance of the messenger button that appears on the taskbar used by all windows. the messenger css file should not attempt to describe the borders or the colors for this button. it should only describe the icon. because the button is used in the navigator window (through overlays), the fonts/colors used should not be described by messenger. this allows the button to blend in as much as possible regardless of where it is used. the importance of this rule cannot be overstated. derived skin files should not contain any rules for colors, fonts, or borders. exceptions to this rule must be approved in order to be allowed into the product. note that in our current designed mozilla skin (...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
e the browser's address bar, page tabs and bookmarks menu. 143 fetch directive csp, http, security csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded. for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts. 144 fetch metadata request header fetch metadata request headers, glossary a fetch metadata request header is a http request header that provides additional information about the context the request originated from. these header names are prefixed with sec- and thus they are forbidden header names so headers can not be modified from javascript. 145 firefox os ...
... it occurs when most, but not necessarily all visible ui elements are interactive, and the user interface responds, on average, to most user input within 50ms. it is also known as first interactive. 147 first meaningful paint glossary, reference, web performance first meaningful paint (fmp) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded. it is when the answer to "is it useful?" becomes "yes", upon first meaningful paint completion. 148 first contentful paint glossary, performance, reference, web performance first contentful paint (fcp) is when the browser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading. the question "is it...

Typesetting a community school homepage - Learn web development
raw html for the homepage of an imaginary community college, plus some css that styles the page into a three column layout and provides some other rudimentary styling. you are to write your css additions below the comment at the bottom of the css file, to make sure it is easy to mark the bits you have done. don't worry if some of the selectors are repetitious; we'll let you off in this instance. fonts: first of all, download a couple of free-to-use fonts. because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body f...
...hareable editor (as mentioned in step 1 above). ...

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. here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. 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...
...specific to lists that you need to know about, and some best practices to consider. this article explains all. styling links when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. we'll look at all these topics in this article. web fonts here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling. assessments the following assessments will test your understanding of the text styling techniques covered in the guides above. typesetting a community school homepage in this assessment we'll test your understanding of styling text ...

CSS performance optimization - Learn web development
applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load. this improves performance by making the text visible instead of having a blank screen, with a trade-off being a flash of unstyled text. @font-face { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. this allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of ...
...y combination of them for a limited area of the dom and not the entire page. ...

Multimedia: Images - Learn web development
ter of the image. the less colors an image has and the less photographic it is, the better it is to use the svg format. this requires the source to be available as in a vector graphic format. should such an image only exist as a bitmap, then png would be the fallback format to chose. examples for these types of motifs are logos, illustrations, charts or icons (note: svgs are far better than icon fonts!). both formats support transparency. pngs can be saved with three different output combinations: 24 bit color + 8 bit transparency — offer full color acurracy and smooth transparencies at the expense of size. you probably want to avoid this combination in favor for webp (see below). 8 bit color + 8 bit transparency — offer no more than 255 colors but maintain smooth transparencies. the ...
...let's take a look at video optimization, tackling the next 20% of bandwidth consumption. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

Perceived performance - Learn web development
ted by user interaction. if some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive. avoid font file delays font use can both help and harm user experience. selecting the right fonts is an art form, and can greatly improve the user experience. fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding). flicker of unstyled text and missing text both harm performance. make fallback fonts the same size and weight so that when fonts load the page change is less noticeable. inter...
...peeding up, let's take a look at some metrics and learn how we can measure these events. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

Web performance resources - Learn web development
e scrolling. these styles will improve perceived performance as the css does not require a file request. <style type="text/css"> // insert your css here </style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements. javascript only block rendering for elements that appear after the script tag in the dom tree. web fonts eot and ttf formats are not compressed by default. apply compression such as gzip or brotli for these file types. use woff and woff2. these formats have compression built in. within @font-face use font-display: swap. by using font display swap the browser will not block rendering and will use the backup system fonts that are defined. optimiize font weight to match the web font as closely as pos...
...mats are not compressed by default. apply compression such as gzip or brotli for these file types. use woff and woff2. these formats have compression built in. within @font-face use font-display: swap. by using font display swap the browser will not block rendering and will use the backup system fonts that are defined. optimiize font weight to match the web font as closely as possible. icon web fonts if possible avoid icon web fonts and use compressed svgs. to further optimize inline your svg data within html markup to avoid http requests. tools learn to use the firefox dev tools to profile your site. pagespeed insights can analyze your page and give some general hints to improve performance. lighthouse can give you a detailed breakdown of many aspects of your site including performanc...

MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> ...
...istener("change", updatemathfont, false) } window.addeventlistener("load", load, false); the following test contains sample tex formulas from knuth's tex book and equivalent mathml representations. it compares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts. to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher. you may also try this test page for mathematical opentype fonts which instead relies on web fonts. finally, you may want to check this table comparing how the tests are r...

getFile
o. ...
...n_send_to_dir "sndto" ns_win_bitbucket_dir "buckt" ns_win_startmenu_dir "strt" same thing as ns_os_desktop_dir ns_win_desktop_directory "deskp" file sys dir which physically stores objects on desktop ns_win_drives_dir "drivs" ns_win_network_dir "netw" ns_win_nethood_dir "neth" ns_win_fonts_dir "fnts" ns_win_templates_dir "tmpls" ns_win_common_startmenu_dir "cmstrt" ns_win_common_programs_dir "cmprgs" ns_win_common_startup_dir "cmstrt" ns_win_common_desktop_directory "cmdeskp" ns_win_appdata_dir "appdata" ns_win_local_appdata_dir "localappdata" ns_w...

UI Tour - Firefox Developer Tools
e inspector is split into two or three sections, depending on your settings. you can toggle the 3-pane view of the inspector. 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. to learn more about the structure of the html pane, see the guide to examining and editing html. ...
...e inspector. if more than one element has a given property applied to it, click the triangle to show all the occurences. to configure the set of browsers you want the compatibility view to check for, click settings at the bottom of the panel. untick the checkbox for any browser you are not interested in. as new browser versions are released, the version numbers in this list will be updated. fonts view the fonts view shows all the fonts in the page along with editable samples. see view fonts for more details. animations view the animations view gives you details of any animations applied to the selected element, and a controller to pause them: see work with animations for more details. ...

Cache - Web APIs
ork is: %o', event.request.url, response); if (response.status < 400 && response.headers.has('content-type') && response.headers.get('content-type').match(/^font\//i)) { // this avoids caching responses that we know are errors (i.e. http status code of 4xx or 5xx). ...
... // it is something to keep in mind if you're attempting to cache other resources from a cross-origin // domain that doesn't support cors, though! // we call .clone() on the response to save a copy of it to the cache. ...

FontFace.FontFace() - Web APIs
escriptor of @font-face . source the font source. this can be either: a url binary font data descriptors optional a set of optional descriptors passed as an object. ...
...n object. it can have the following keys: 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. working draft initial definition ...

FontFaceSet.load() - Web APIs
the load() method of the fontfaceset forces all the fonts given in parameters to be loaded. syntax result = afontfaceset.load(font); result = afontfaceset.load(font, text); returns a promise of an array of fontface loaded. the promise is fulfilled when all the fonts are loaded; it is rejected if one of the fonts failed to load. parameters font: a font specification using the css value syntax, e.g. "italic bold 16px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text. this does not check for individual glyph coverage. ...
...tion using the css value syntax, e.g. "italic bold 16px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text. this does not check for individual glyph coverage. examples // returns a promise that will be fulfilled or rejected according the success to load myfont // the code in 'then' can assume the availability of that font. document.fonts.load("12px myfont", "ß").then(…); specifications specification status comment css font loading module level 3the definition of 'load' in that specification. working draft initial definition ...

TextMetrics - Web APIs
e canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. textmetrics.fontboundingboxascent read only 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 read only 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.actualboundingboxascent read only is a double giving the distance from the ho...
... it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to get the absolute text width: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50px serif'; const textmetrics = ctx.measuretext(text); conso...

Using IIR filters - Web APIs
ld(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on size const spacing = width/16; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canv...
...); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-fontsize, spacing+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < mag...

font-style - CSS: Cascading Style Sheets
for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-style descriptor to explicitly specify the font face's style. the values for the css descriptor is same as that of its corresponding font property. syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 30deg; font-style: oblique 30deg 50deg; values normal selects the normal version of the font-family. italic specifies that font-face is an italicized version of the normal font. ...
...a few degrees. on the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized. true italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. these fonts are specially created by font designers and are not artificially sloped. @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 fon...

unicode-range - CSS: Cascading Style Sheets
ption the purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. for example, a site with many localizations could provide separate font resources for english, greek and japanese. for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth. formal definition related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font. to make it obvious,...
...in a <span> and applying a different font just to that, but that is an extra element and rule set. 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. candidate recommendation initial definition ...

@font-feature-values - CSS: Cascading Style Sheets
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. syntax feature value blocks @swash specifies a feature name that will work with the swash() functional notation of font-variant-alternates. a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet explorero...

prefers-reduced-data - CSS: Cascading Style Sheets
ly on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...
...="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, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe u...

Border-image generator - CSS: Cascading Style Sheets
t.join(' '); setoutputcss('outset', value); }; var setborderrepeat = function setborderrepeat(obj) { border_repeat[obj.value] = obj.name; var value = border_repeat.join(' '); preview.style.borderimagerepeat = value; setoutputcss('repeat', value); }; var setoutputcss = function setoutputcss(topic, value) { css_code[topic].textcontent = value + ';'; }; var setpreviewfontsize = function setpreviewfontsize(value) { preview.style.fontsize = value + 'px'; }; var setpreviewwidth = function setpreviewwidth(value) { preview.style.width = value + 'px'; }; var setpreviewheight = function setpreviewheight(value) { preview.style.height = value + 'px'; }; var setpreviewareaheight = function setpreviewareaheight(value) { preview_area.style.height = v...
... dropdownmanager.subscribe('image-repeat-x', setborderrepeat); dropdownmanager.subscribe('image-repeat-y', setborderrepeat); inputslidermanager.subscribe('preview-area-height', setpreviewareaheight); inputslidermanager.subscribe('preview-width', setpreviewwidth); inputslidermanager.subscribe('preview-height', setpreviewheight); inputslidermanager.subscribe('font-size', setpreviewfontsize); inputslidermanager.setvalue('preview-width', 300); inputslidermanager.setvalue('preview-height', 200); }; return { init: init, setoutputcss: setoutputcss, setborderslice: setborderslice }; })(); /** * init tool */ var init = function init() { inputslidermanager.init(); dropdownmanager.init(); buttonmanager.init(); unitpanel.init(); tool.init(); imag...

font-feature-settings - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... candidate recommendation initial definition ...

font-language-override - CSS: Cascading Style Sheets
ide: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language. ...
... working draft initial definition. ...

font-optical-sizing - CSS: Cascading Style Sheets
lues */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. auto the browser will modify the shape of glyphs for optimal viewing. description optical sizing is enabled by default for fonts that have an optical size variation axis. the optical size variation axis is represented by opsz in font-variation-settings. when optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes. formal definition initial valueautoapplies toall element...
... working draft ...

font-size-adjust - CSS: Cascading Style Sheets
rs relative to the current font size (which defines the size of upper-case letters). /* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font). to use this property in a way that is compatible with browsers that ...
... 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. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, ple...

font-synthesis - CSS: Cascading Style Sheets
following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. weight indicates that a bold typeface may be synthesized if needed. style indicates that an italic typeface may be synthesized if needed. description most standard western fonts include italic and bold variants, but many novelty fonts do not. fonts used for chinese, japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. in these cases, it may be desirable to switch off the browser's default font-synthesis. formal definition initial valueweight styleapplies toall elements. it also a...
... candidate recommendation initial definition ...

font-variant-alternates - CSS: Cascading Style Sheets
this function enables ornaments, like fleurons and other dingbat glyphs. the parameter is a font-specific name mapped to a number. it corresponds to the opentype value ornm, like ornm 2. note: in order to preserve text semantics, font designers should include ornaments that don't match unicode dingbat characters as ornamental variants of the bullet character (u+2022). be aware that some existing fonts don't follow this advice. annotation() this function enables annotations, like circled digits or inverted characters. the parameter is a font-specific name mapped to a number. it corresponds to the opentype value nalt, like nalt 2. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation ...
... specifications not part of any standard. ...

font-variant-caps - CSS: Cascading Style Sheets
ples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. if petite capital glyphs are not available, they are rendered using small capital glyphs. if these are not present, the browser synthesizes them from the uppercase glyphs. fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. however, small capital glyphs are never synthesized for caseless characters. language-specific rules this property accounts for language-specific case mapping rules. for example: in turkic languages, such as turkish (tr), azerbaijani (az), crime...
... candidate recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet ex...

font-variant-east-asian - CSS: Cascading Style Sheets
...
... candidate recommendation initial definition ...

font-variant-ligatures - CSS: Cascading Style Sheets
values> || <contextual-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> ...
... candidate recommendation initial definition ...

font-variant - CSS: Cascading Style Sheets
candidate recommendation made it a shorthand of the new font-variant-* properties. css level 2 (revision 1)the definition of 'font-variant' in that specification. recommendation no change css level 1the definition of 'font-variant' in that specification. recommendation initial definition ...
... 1chrome android full support 18firefox android full support 4opera android full support 11safari ios full support 1samsung internet android full support 1.0css fonts module level 3 shorthandchrome full support 52edge full support 79firefox full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): thi...

text-rendering - CSS: Cascading Style Sheets
: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard. however, gecko and webkit browsers let you apply this property to html and xml content on windows, macos, and linux. one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family). syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. for differences in how this value is interpreted by the browser, see the compatibility table. optimizespeed the browser emphasizes rendering speed over...
...he browser emphasizes rendering speed over legibility and geometric precision when drawing text. it disables kerning and ligatures. optimizelegibility the browser emphasizes legibility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser emphasizes geometric precision over rendering speed and legibility. certain aspects of fonts — such as kerning — don't scale linearly. so this value can make text using those fonts look good. in svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. but if you request a font size of, say, 9 with a scale of 140%,...

Index - Developer guides
k at the objects provided by the web platform to make the common tasks of serializing and parsing xml easy. 38 printing dom, guide, needscontent, needsrelocation, printing there may be times in which your web site or application would like to improve the user's experience when printing content. there are a number of possible scenarios: 39 svg-in-opentype draft, fonts, guide, needscontent the svg-in-opentype work is currently in the hands of the mpeg group. once we're ready for wider adoption the information from wiki.mozilla.org will be moved here, updated and expanded. 40 the unicode bidirectional text algorithm algorithm, bidi, guide, internationalization, introduction, localization, text, unicode, direction, i18n, l10n, ltr, rtl ...
...ional text algorithm algorithm, bidi, guide, internationalization, introduction, localization, text, unicode, direction, i18n, l10n, ltr, rtl the unicode® bidirectional algorithm (also known as the bidi algorithm) is part of the unicode text standard that describes how the user agent should order characters while rendering unicode text. 41 the web open font format (woff) fonts, needsmobilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. 42 user input and controls screen orientation, c...

The Web Open Font Format (WOFF) - Developer guides
, including predefined fields allowing foundries and vendors to provide license information if desired. there are three main benefits to using woff: the font data is compressed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed truetype or opentype files. many font vendors that are unwilling to license their truetype or opentype format fonts for use on the web will license woff format fonts. this improves availability of fonts to site designers. both proprietary and free software browser vendors like the woff format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats. there are two versions of woff; woff and woff2, they mostly differ in regard to the comp...
...so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats. there are two versions of woff; woff and woff2, they mostly differ in regard to the compression algorithm used. in @font-face they are identified by the 'woff' and respectively 'woff2' format descriptor. using woff you can use the @font-face css property to use woff fonts for text in web content. it works exactly like opentype and truetype format fonts do, except it will likely let your content download more efficiently due to the addition of compression. tools for working with woff fonts tools for working with woff fonts are available. sfnt2woff and woff2sfnt convert between woff and opentype. specifications specification status comment ...

Preloading content with rel="preload" - HTML: Hypertext Markup Language
ble as soon as they are required for the rendering of the page later on. this example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. for example: resources that are pointed to from inside css, like fonts or images. resources that javascript can request, like json, imported scripts, or web workers. larger images and video files. preload has other advantages too. using as to specify the type of content to be preloaded allows the browser to: prioritize resource loading more accurately. store in the cache for future requests, reusing the resource if appropriate. apply the correct content sec...
...ting case where this applies, even if the fetch is not cross-origin, is font files. because of various reasons, these have to be fetched using anonymous mode cors (see font fetching requirements). let's use this case as an example. you can see the full example source code on github (also see it live): <head> <meta charset="utf-8"> <title>web font example</title> <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> <link href="style.css" rel="stylesheet"> </head> <body> … </body> not only are we providing the mime type hints in the type attributes, but we are also providing the crossorigin attribute to handle the cors issue. including ...

Content-Security-Policy - HTTP
ts loaded using elements such as <frame> and <iframe>. instead of child-src, if you want to regulate nested browsing contexts and workers, you should use the frame-src and worker-src directives, respectively. connect-src restricts the urls which can be loaded using script interfaces default-src serves as a fallback for the other fetch directives. font-src specifies valid sources for fonts loaded using @font-face. frame-src specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>. img-src specifies valid sources of images and favicons. manifest-src specifies valid sources of application manifest files. media-src specifies valid sources for loading media using the <audio> , <video> and <track> elements. object-src specifies v...
...be no connection allowed and, as the strictest policy, connect-src 'none' is enforced. ...

Populating the page: how browsers work - Web Performance
urn responds with an ip address. after this initial request, the ip will likely be cached for a time, which speeds up subsequent requests by retrieving the ip address from the cache instead of contacting a name server again. dns lookups usually only need to be done once per hostname for a page load. however, dns lookups must be done for each unique hostname the requested page references. if your fonts, images, scripts, ads, and metrics all have different hostnames, a dns lookup will have to be made for each one. this can be problematic for performance, particularly on mobile networks. when a user is on a mobile network, each dns lookup has to go from the phone to the cell tower to reach an authoritative dns server. the distance between a phone, a cell tower, and the name server can add sign...
...k rendering, and pause the parsing of html. though the browser's preload scanner hastens this process, excessive scripts can still be a significant bottleneck. preload scanner while the browser builds the dom tree, this process occupies the main thread. as this happens, the preload scanner will parse through the content available and request high priority resources like css, javascript, and web fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded. the optimizations the preload scanner provides reduce blockages. <link rel="stylesheet" src="...

Progressive web app structure - Progressive web apps (PWAs)
lable, it will be the fastest way of serving the content — the benefits are going to be huge in terms of performance. for working examples and more information, see the streams api documentation. 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. the folder structure looks like this: the html from the html point of view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about ...
... first imports data from the games.js file: self.importscripts('data/games.js'); next, it creates a list of all the files to be cached, both from the app shell and the content: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa...

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. ...
...ht="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. specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification. working draft defines font-weight to accept any numbers between 1 and 1000. css fonts module level 3the definition of 'font-weight' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-weight' in that specification. r...

SVG Tutorial - SVG: Scalable Vector Graphics
the tutorial is in an early stage of development. if you're able, please help out by chipping in and writing a paragraph or two. ...
...ions 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. scripting svg with javascript tbd svg filters tutorial tbd animations with smil in svg tbd creating fonts in svg tbd ...

Tutorials
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. styling text here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. common css questions common questions and answers for beginners. intermediate level css layout 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. now it's time to look at how to place your boxes in the right place in relation to the viewport, and ...
.... css challenges flex your css skills, and see where you need more practice. advanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the changes take effect instantly. quick guide to implement web fonts (with @font-face) the @font-face feature from css3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way. starting to write css an introduction to tools and methodologies to write more succinct, maintainable, and scalable css. canvas tutorial learn how to draw graphics using scripting using the canvas element. html5 doctor articles about u...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
css files are explicitly declared as "screen" media instead of "all" media. by doing this, we don't have to override any of the screen styles, giving us a blank slate to start with for print styles. the print styles present the page content in one column, rather than splitting content up into two or three columns. it also eliminates most of the background colors and images to save on printer ink. fonts are sized in point (pt) units and use serif faces for improved legibility on a printed page. our stories are logically the most printed pages of the site. technically, with the print media css file, we didn't have to generate a separate print template for stories. however, since some of our stories are broken up into 2 or 3 pages, we created a slightly altered template for print versions which p...

Index - Archive of obsolete content
x 3 firefox 3 introduces the concept of content preferences. this permits code running within chrome (in other words: extensions and the browser itself, not web sites) to locally save preferences on a per-site basis. this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance). 3432 visualizing an audio spectrum this example calculates and displays fast fourier transform (fft) spectrum data for the playing audio. the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas. 3433...

Using content preferences - Archive of obsolete content
firefox 3 introduces the concept of content preferences. this permits code running within chrome (in other words: extensions and the browser itself, not web sites) to locally save preferences on a per-site basis. this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance). the content preferences service, implemented by nsicontentprefservice, offers functions for setting and retrieving preferences for specific sites or in the global preference space; global preferences are used whenever a site-specific preference isn't available. site-specific content preferences are stored in the profile folder, in the database file "content-prefs.sqlite". example:...

Editor Embedding Guide - Archive of obsolete content
the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring or string) "helvetica, arial, sans-serif" "times new roman, times, serif" "courier new, courier, monospace" any string is acceptable. the above strings should be considered examples of base functionality and in no way imply that this command won't handle other fonts. cmd_align sets the alignment for the lines contained in the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_charset sets the charset for the document. getcommandstate "state_attribute" (cstring) docommand "state_at...

jspage - Archive of obsolete content
a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={m...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
t editing commands command name description argument bold toggles the selection's bold attribute. --- createlink generates an html link from the selected text. the url to use for the link delete deletes the selection. --- fontname changes the font used in the selected text. the font name to use (arial, for example) fontsize changes the font size used in the selected text. the font size to use fontcolor changes the font color used in the selected text. the color to use indent indents the block where the caret is. --- inserthorizontalrule inserts an <hr> element at the cursor's position. --- insertimage inserts an image at the cursor's position. url ...

Anonymous Content - Archive of obsolete content
ss 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. style rules using the child, descendant, or sibling selectors transparently cross bind scopes and operate on the altered and original content models. the final modified content tree determines how css properties (e.g., fonts and colors) are inherited. an element either ends up underneath its explicit parent (just as in the content model), or it ends up being nested through a series of insertion points. when nested, it inherits from the innermost anonymous parent. binding stylesheets a binding file can load stylesheets using the stylesheet element. by default these stylesheets apply to the bound element and to all a...

getFolder - Archive of obsolete content
"chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local desktop" "macosx local documents" "macosx local frameworks" "macosx loc...

Complete - Archive of obsolete content
refox etc. have a bug that prevents this from working. to work around the bug, close the application, delete the file xul.mfl in its profile, then restart it with the command line switch. firefox etc. support specifying the language alone, without any region—for example, just: -uilocale fr seamonkey does not support this. themes a theme changes the appearance of the user interface, affecting fonts, colours, graphics, and sometimes layout. a theme consists of a skin for each component. this extension is just one component, allcustom, so it contains a skin for this component in each of the themes that it supports. these themes are: classic for firefox etc. classic for seamonkey modern for seamonkey to make it easier to support different themes, developers place anything that might de...

Creating a Skin - Archive of obsolete content
dy in the global stylesheets. for example, rules are already defined for buttons and tabs and so on and we defined additional rules for them. when changing the global skin, you would need to merge the changes into the existing rules. for the best skinnability, it is best to declare appearance related style rules in the global directory rather than in individual style files. this includes colors, fonts and general widget appearances. if you change the color of something in a local skin file (such as findfile.css), the dialog may look odd if the user changes their global skin. don't expect the user to be using the default one. our find files example with this skin: source view stylesheet see also mozilla css extensions css reference the next section discusses how to make a xul applicat...

Skinning XUL Files by Hand - Archive of obsolete content
. in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. the following table shows the basic format for these two common types of style definitions: class id element.class { attribute: value; } element#id ...

XUL Questions and Answers - Archive of obsolete content
e don't really belong on this page. is there a way to check what directory "application.ini" is in? use directory service the key to the folder where application.ini resides is "resource:app". i get the error: gecko minversion requirement not met. visit http://developer.mozilla.org/en/docs...pplication.ini to find out how to properly set up the application.ini file. how can i use other fonts on xulrunner applications which are not installed on the current machine? in order to do this, you must first attach the font file as a bundle with the xulrunner application as a bundle. you also have to write css code to refer to which element(s) you wish to apply this font to. someelement { font-family: "my font", "trebuchet ms"; } for more information about platform specific questions, ...

XUL accessibility guidelines - Archive of obsolete content
e it is true that presentation is essential, documents should also be structured so that the user can invoke display preferences that may be necessary for accessibility. presentation should also be flexible to window and font resizing. cooperative applications adapt well to the user's environment. system defaults maintain system defaults. many users set their computers to use larger than normal fonts and/or specific color themes. by default, xul menus, labels, and other widgets get their font, size, and color settings from the user settings specified in the operating system. respect these defaults unless you have a specific and unavoidable reason to change them. if you must change them, use css to size elements relative to the default sizes (for example, use % or em rather than specific point...

2006-10-13 - Archive of obsolete content
respect font discussion about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix. (user feels print belongs on the context menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture website content before it is displayed. firefox add-on wanted user is inquiring if there is such an application to automatically save pieces of a webpage everytime is it updated. firefox 2.0 should re-implement modal window.open to support web 2.0 user would like the option to show pop-up windows, using window.open(), from inside untrusted script, to be re-implemented.

Theme changes in Firefox 2 - Archive of obsolete content
ces/general.xul - removed from firefox 2. safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site. search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to the default theme the table below lists all the changes made in the default theme for firefox 2; you can use this information as a starting point for figuring out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. ...

Implementing game control mechanisms - Game development
desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas. setting up the environment let's start with a quick overview of the game's folder structure, javascript files and in-game states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its ...

2D maze game with device orientation - Game development
we have this printed out on the screen, but it would be good to update the values every second: this.time.events.loop(phaser.timer.second, this.updatecounter, this); this loop, also in the create function, will execute the updatecounter function every single second...

Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
ized { 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! there are wizards present, and they are quick to anger! </div> <div id="customized"> <p>this is happy text.</p> <div class="warning"> be careful! there are wizards present, and they are quick to anger! </div> </div> the resulting page content is styled like this: ...

Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded. for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts. all fetch directives fall back to default-src. that means, if a fetch directive is absent in the csp header, the user agent will look for the default-src directive. see fetch directives for a complete list. ...

First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
this is the first time users could start consuming page content. ...

First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms
it is when the answer to "is it useful?" becomes "yes", upon first meaningful paint completion. ...

Glyph - MDN Web Docs Glossary: Definitions of Web-related terms
a glyph is a term used in typography for the visual representation of one or more characters. the fonts used by a website contain different sets of glyphs, which represent the characters of the font. learn more general knowledge glyph on wikipedia glyph, character and grapheme on quora ...

Images, media, and form elements - Learn web development
g system and browser that your user visits the site with. in the example below we have styled some text inputs using css — you can see that things such as borders, margins and padding all apply as you would expect. we are using attribute selectors to target the different input types. try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding. important: you should take care when changing the styling of form elements to make sure it is still obvious to the user they are form elements. you could create a form input with no borders and background that is almost indistinguishable from the content around it, but this would make it very hard to recognise and fill in. as explained in the lessons on form styling in the html...

Organizing your CSS - Learn web development
terms of organisation, even if you don't use any of the other sass features. if you want to learn a lot more about sass, start with the sass basics article, then move on to their other documentation. defining variables css now has native custom properties, making this feature increasingly less important, however one of the reasons you might use sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. this means that if you realise you have used the wrong shade of blue, you only need change it in one place. if we created a variable called $base-color as in the first line below, we could then use it through the stylesheet anywhere that required that color. $base-color: #c6538c; .alert { border: 1px solid $base-color;...

Learn to style HTML using CSS - Learn web development
ing and css layout. styling text 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. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout 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. now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layo...

How can we design for all types of users? - Learn web development
font sizing in rem. it will end up setting its own font size, so don't bother feeding it font units. why would i want to use proportional units? because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. also, check your website's statistics: you may receive visits from older browsers. we would advise the following: describe fonts in rem units, most browsers will be very happy with them; let older browsers display fonts with their own internal engine. browser's engines will ignore any property or value in the css if they can't cope with them, so that your website is still usable if not true to your designer's vision. older browsers are on the way out anyway. note: your mileage may vary. if you have to cater to older br...

What are browser developer tools? - Learn web development
nt (the final, normalized values that the browser applies). layout: in firefox, this area includes two sections: box model: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. grid: if the page you are inspecting uses css grid, this section allows you to view the grid details. fonts: in firefox, the fonts tab shows the fonts applied to the current element. find out more find more out about the inspector in different browsers: firefox page inspector ie dom explorer chrome dom inspector (opera's inspector works the same as this) safari dom inspector and style explorer the javascript debugger the javascript debugger allows you to watch the value of variables and set...

What is a web server? - Learn web development
st to the web server, which searches for the requested file in its own storage space. upon finding the file, the server reads it, processes it as-needed, and sends it to the browser. let's look at those steps in more detail. 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. technically, you could host all those files on your own computer, but it's far more convenient to store files all on a dedicated web server because: a dedicated web server is typically more available. (up and running) excusing downtime and systems troubles, a dedicated web server is always connected to the internet. a dedicated web server can have the same ip address all the tim...

Test your skills: Styling basics - Learn web development
glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. styling basics 1 our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with. on top of that, add in some nice, consistent styling for the inputs and button. use some kind of layout technique to make the inputs and labels line up neatly. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive ...

Getting started with the Web - Learn web development
st starting out, you might be confused by the array of code editors, frameworks, and testing tools out there. in installing basic software, we show you step-by-step how to install just the software you need to begin some basic web development. what will your website look like? before you start writing the code for your website, you should plan it first. what information are you showcasing? what fonts and colors are you using? what will your website look like? we outline a simple method you can follow to plan out your site's content and design. dealing with files a website consists of many files: text content, code, stylesheets, media content, and so on. when you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. deal...

Document and website structure - Learn web development
ng the code for our example our example seen above is represented by the following code (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...

Getting started with HTML - Learn web development
basic level. you should also be able to write a few elements and attributes. the subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language. note: as you start to learn more about html, consider learning the basics of cascading style sheets, or css. css is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) html and css work well together, as you will soon discover. ...

Structuring the web with HTML - Learn web development
getting started with the web before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the html basics article is also covered in our introduction to html module, albeit in a lot more detail. ...

A first splash into JavaScript - Learn web development
y entering the following line: guesses.value the browser returns undefined, because paragraphs don't have the value property. to change the text inside a paragraph, you need the textcontent property instead. try this: guesses.textcontent = 'where is my paragraph?'; now for some fun stuff. 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. finished for now... so that's it for building the example. you got to...

What is JavaScript? - Learn web development
) we have covered in much more detail in other parts of the learning area. html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page. 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. javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (okay, not everything, but it is amazing what you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as...

HTML performance features - Learn web development
d/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? ...

Measuring performance - Learn web development
navoidable performance hits appear less severe to the user, or disguise them completely. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

What is web performance? - Learn web development
navoidable performance hits appear less severe to the user, or disguise them completely. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

The business case for web performance - Learn web development
- not prioritizing web performance, but expecting good business metrics (see the three above). previous overview: performance in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

JavaScript performance - Learn web development
pact performance, including some attributes specifically created to improve performance. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

Multimedia: video - Learn web development
ite video through reducing file size, with (html) download settings, and with streaming. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

The "why" of web performance - Learn web development
ell as the overall effectiveness of most sites. ...

Web performance - Learn web development
in detail at how html can be used to ensure maximum performance. css performance features css may be a less important optimization focus for improved performance, but there are some css features that impact performance more than others. in this article we look at some css properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted. fonts and performance a look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance. mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider...

Accessibility Features in Firefox
moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and sizes currently being used in your desktop. mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts. text files used in configuration (techies only): configuration files are easily edited with any text editor. for example, prefs.js gives access to a large number of configuration options not available in the preferences window. also, usercontent.css allows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed. finally, bookmarks.html contai...

The Firefox codebase: CSS Guidelines
o be aware of is that gecko removes all the background-image when high contrast mode is enabled. consider using an actual <img> tag (for html documents) or list-style-image (for xul documents) if rendering the image is important. if you are not using windows, one way to test against those adjustments on other platforms is: going to about:preferences clicking on the "colors..." button in the "fonts & colors" sub-section of the "language and appearance" section under "override the colors specified by the page with your selections above", select the "always" option chrome area the automatic adjustments previously mentioned only apply to pages rendered in the content area. the chrome area of firefox uses colors as authored, which is why using pre-defined variables, currentcolor or inherita...

Eclipse CDT Manual Setup
c++ > editor > save actions" and deselect "ensure newline at the end of file". select "c/c++ > editor > scalability" and set "enable scalability mode when the number of lines in the file is more than:" to something larger, like 100000. select "run/debug > console" and deselect "limit console output". if you want to increase the text size in the editor, select "general > appearance > colors and fonts", select "basic > text font", and edit the font size. creating an eclipse project to create an eclipse project for your mozilla source tree, select "file > new > makefile project with existing code". in the "import existing code" window that opens, enter a meaningful project name that identifies your mozilla source tree, set the code location to the root of your source tree, select an appropria...

Encodings for localization files
windows/charset.mk ascii the win_installer_charset variable must be set to an encoding which matches toolkit/installer/windows/install.it charset= parameter. see the table below for appropriate values. toolkit/installer/windows/install.it a windows codepage. this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/fontsize/charset parameters in this file must be set to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with windows. see the table below for appropriate values for the charset= parameter. browser/installer/installer.inc utf-8 toolkit/installer...

Creating localizable web applications
'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', 'nofirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' }); <?php } ?> images don't put text or numbers in the images just don't do that. applies also to numbers. image 1. bad: image 2. bad: if you wish to use a non-standard font (as in the image above), take advantage of the css's on-line fonts feature available via @font-face. image 3. bad: the trouble with the above image is the "for firefox" part, which should be made localizable. keep in mind that you should allow to localize the whole "for firefox" part, not only the "for" preposition to which you'd concatenate the "firefox" part. that's because some languages might require changing the word order, and others might require putt...

Basics
> <mstyle scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </math> </button> </div> for more information about mathml in mozilla, see the mathml project page. there are links to more samples, screenshots and instructions on how to download fonts for various platforms. these fonts are required to view other examples beyond the basic constructions illustrated here. mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <m...

Test
you should see a grid with perfectly straight black lines. if not, please consider installing some mathml fonts. √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ⏜ ...

MathML3Testsuite
when the markup is intentionally errorous, the correct behavior is not defined by the recommendation and hence the tests are considered passed if there is no fatal error (crash, etc). ...

MathML In Action
mathml in action are you seeing nifty equations throughout this page? no? too bad. here is a screenshot of what you are missing. download a mathml-enabled mozilla build to remedy this sad situation. you already have a mathml-enabled build but what you see on the screenshot is not what you get? in that case you are probably missing some crucial mathml fonts. now that you are well-equipped, you should be able to see this inline equation with varying accents: x ^ + x⁢y ^ + x⁢y⁢z ^ . next to it is this tiny formula, det | a c b d | = a d - b c , which can also be typeset in displaystyle as det | a b c d | = a d - b c . mathematical typesetting is picky. mathml in mozilla aims at complying with the mathml specification so that what you see is what yo...

Updates
this page is not maintained frequently. please follow our monthly irc meeting for the latest updates. march 22, 2011 firefox 4.0 has been released! this new version comes with several bug fixes and new features for mathml. some improvements are particularly worth noting: a new html parser, which lets you use mathml inside non-xhtml documents. complete support for stix fonts 1.0. better rendering of mathematical symbols, especially stretchy operators. october 21, 2010 mathml 3.0 is now a w3c recommendation! june 11, 2010 stix fonts version 1.0 are now compatible with trunk. may 28, 2010 stix fonts version 1.0 released. april 2010 new web pages for the mozilla mathml project! documentation is now available on mdc and wiki.mozilla.org. feel free to complete and improve it!

Mozilla MathML Project
status of each tag result of the mathml 3 testsuite unofficial nightly builds with mathml patches applied (maintained by bill gianopoulos) more updates and archived content community view mozilla forums... mailing list newsgroup rss feed irc channel wiki used by contributors - check out the latest developments and help us improving mathml in mozilla. links installing fonts for mozilla's mathml engine mathml version 3.0 - w3c recommendation, 21 october 2010 w3c mathml test suite - designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner. mathml in mozilla developer network mathml accessibility in mozilla sample mathml documents screenshots mathml start page - with translations...

Gecko Roles
be used by a file chooser. role_file_chooser a file chooser. a specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. may use the directory pane to show the contents of a directory. role_font_chooser a font chooser. a font chooser is a component that lets the user pick various attributes for fonts. role_chrome_window frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. role_html_container a document container for html, whose children represent the document content. role_icon a smal...

inIDOMUtils
getrulecolumn() returns the column number of the specified css style rule in its source file. unsigned long getrulecolumn( in nsidomcssstylerule arule ); parameters arule the style rule to retrieve the column number of. return value the column number of the style rule; the url of the rule can be obtained from its parent style sheet object. getusedfontfaces() returns a list of the fonts specified using @font-face in the specified portion of the document. nsidomfontfacelist getusedfontfaces( in nsidomrange arange ); parameters arange the dom range to retrieve the font faces of. return value an nsidomfontfacelist object listing all the font faces used by the text in the range. isignorablewhitespace() determines if the specified text node contains only ignorable white...

nsIAccessibleRole
role_file_chooser 73 a file chooser. a specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. may use the directory pane to show the contents of a directory. also refer to role_directory_pane. role_font_chooser 74 a font chooser. a font chooser is a component that lets the user pick various attributes for fonts. role_chrome_window 75 frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane 76 a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. also refer to role_root_pane. role_html_container 77 a document container for html, whose children represent the document content. r...

nsIDOMFontFace
le ways within a range. attribute type description fromfontgroup boolean indicates whether or not the font was located in a font group. read only. fromlanguageprefs boolean indicates whether or not the font was located using language preferences. read only. fromsystemfallback boolean indicates whether or not the font is the system fallback font. read only. attributes available for all fonts these attributes are always available. 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). read only. name domstring full font name as obtained from the font resource. read only. attributes only available when specified with @font-face...

nsILocale
the category to retrieve the locale for. valid strings are stored in nsilocale.idl. currently those are: nsilocale_collate - collation order. how strings are sorted. nsilocale_ctype - character classification and case conversion. nsilocale_monetary - monetary formatting. nsilocale_numeric - numeric, non-monetary formatting. nsilocale_time - date and time formats. nsilocale_messages - related to fonts, character encodings and so on. return value the locale code to be used for the given category. a locale code is of the form language[-country[-region]], where "language" is an iso 639 language code (two letter codes preferred over three letter codes when available), "country" is an iso 3166 two letter country code, and "region" is a string of up to 5 letters. see also stringbundle ...

nsIMarkupDocumentViewer
text will be displayed without reordering. 1 - the default order for the charset 2 - logical order 3 - visual order. defaultcharacterset acstring forcecharacterset acstring fullzoom float the amount by which to scale all lengths. default is 1.0. hintcharacterset acstring hintcharactersetsource print32 minfontsize long the minimum font size to allow. note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkupdocumentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0. prevdoccharacterset acstring textzoom float the amount by which to scale all text. default is 1.0. me...

Index - Firefox Developer Tools
a circular gray and white swatch next to them: 59 edit shape paths in css css, devtools, page inspector, rules view, tools, highlighter, shapes 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. this guide walks you through all of the available options. 60 edit fonts fonts, guide, inspector, tools, variable fonts this article provides a tour of the font tools available in the firefox devtools. this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values. 61 examine event ...

Page inspector 3-pane mode - Firefox Developer Tools
pane mode. feature summary from firefox 62 onwards, the page inspector has a new mode available — 3-pane mode. when activated, this allows you to see the following simultaneously: the html pane on the left hand side, as usual. 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. having the css rules in their own pane is very useful because it allows you to not only inspect your html and edit the css applied to it, but also see the effect this has on css features such as computed styles and grids in real time. you just need to have t...

How to - Firefox Developer Tools
links for various how to's can be found here. these links describe in depth the how to techniques. ...

Page Inspector - Firefox Developer Tools
or, here's a quick tour of the ui. 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. ...

CSSRule - Web APIs
specifications specification status comment css object model (cssom)the definition of 'cssrule' in that specification. working draft obsoleted values charset_rule and unknown_rule. added value namespace_rule. css animationsthe definition of 'cssrule' in that specification. working draft added values keyframes_rule and keyframe_rule. css fonts module level 4the definition of 'cssrule' in that specification. working draft added value font_feature_values_rule. css counter styles level 3the definition of 'cssrule' in that specification. candidate recommendation added value counter_style_rule. css conditional rules module level 3the definition of 'cssrule' in that specification. candidate recommendation ...

CSS Font Loading API - Web APIs
the css font loading api provides events and interfaces for dynamically loading font resources. interfaces fontface represents a single usable font face. fontfaceset an interface loading font faces and checking their download statuses. fontfacesource a mixin providing all of the fonts used in font-related operations, unless defined otherwise. it defines the fontfacesources.fonts property available to document and workerglobalscope. fontfacesetloadevent fired whenever a fontfaceset loads. specifications specification status comment css font loading module level 3 working draft initial definition. ...

CSS Object Model (CSSOM) - Web APIs
. css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener. css object model (cssom) working draft extended the css interface and provides the base for the modern cssom specification. screen orientation api working draft css fonts module level 3 candidate recommendation css animations working draft css transitions working draft css custom properties for cascading variables module level 1 candidate recommendation css conditional rules module level 3 candidate recommendation defined the css interface. css device adaptation working draft ...

CanvasRenderingContext2D.font - Web APIs
t value. the default font is 10px sans-serif. examples using a custom font in this example we use the font property to specify a custom font weight, size, and family. 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. let f = new fontface('test', 'url(x)'); f.load().then(function() { // ready to use the font in a canvas context }); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.font' in that spec...

Document - Web APIs
nt. document.documentelementread only returns the element that is a direct child of the document. for html documents, this is normally the htmlhtmlelement object representing the document's <html> element. document.documenturiread only returns the document location as a string. document.embedsread only returns a list of the embedded <embed> elements within the current document. document.fonts returns the fontfaceset interface of the current document. document.formsread only returns a list of the <form> elements within the current document. document.headread only returns the <head> element of the current document. document.hiddenread only returns a boolean value indicating if the page is considered hidden or not. document.imagesread only returns a list of the images in the...

Examples of web and XML development using the DOM - Web APIs
rom the dom. in this case, you are manipulating the individual styles directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document. you can access these sty...

ElementCSSInlineStyle.style - Web APIs
r style values, it is preferred to use the individual properties of style (as in elt.style.color = '...') as using elt.style.csstext = '...' or elt.setattribute('style', '...') sets the complete inline style for the element by overriding the existing inline styles. note that the property names are in camel-case and not kebab-case while setting the style using elt.style.<property> (i.e., elt.style.fontsize, not elt.style.font-size). a style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red;...

FontFace.display - Web APIs
ck period and no swap period. the spec recommends 100 ms or less, though this may vary from browser to browser. 'swap': gives the font face a 0 second block period and an infinite swap period. specifications specification status comment css font loading module level 3the definition of 'display' in that specification. working draft initial definition. css fonts module level 4the definition of 'font-display' in that specification. working draft defines the values for the display property. (they are the same as for font-display.) browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull ...

FontFace.family - Web APIs
the fontface.family property allows the author to get or set the font family of a fontface object. this is equivalent to the font-family descriptor of @font-face. syntax instanceoffontface.family = 'font family name'; var fontface = instanceoffontface.family; // "font family name" value a domstring. 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. working draft initial definition ...

FontFaceSet.check() - Web APIs
the check() method of the fontfaceset returns whether all fonts in the given font list have been loaded and are available. 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. "italic bold 16px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text. this does not check for individual glyph coverage. examples document.fonts.check("12px courier"); // returns true if the font courier is available at 12px document.fonts.check("12px myfont", "ß"); // returns true if the font 'myfont' has a ß character. specifications specification status comment ...

FontFaceSet - Web APIs
ding. fontfaceset.onloadingerror an eventlistener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set. methods fontfaceset.add() adds a font to the font set. fontfaceset.check() a boolean that indicates whether a font is loaded, but doesn't initiate a load when it isn't. fontfaceset.clear() removes all manually-added fonts from the font set. css-connected fonts are unaffected. fontfaceset.delete() removes a manually-added font from the font set. css-connected fonts are unaffected. fontfaceset.load() returns a promise which resolves to a list of font-faces for a requested font. specifications specification status comment css font loading module level 3the definition of 'fontfaceset' in...

Timing element visibility with the Intersection Observer API - Web APIs
d in. body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color. then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads). the wrapper establishes a css grid with two columns and two rows. the first column (sized automatically based on its content) is used for the sidebar and the second column (which will be used for body content) is sized...

PerformanceTiming.domInteractive - Web APIs
poch, when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown. this property can be used to measure the speed of loading web sites that users feels. nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts. check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading. syntax time = performancetiming.dominteractive; specifications specification status comment navigation timingthe definition of 'performancetiming.dominteractive' in that specification. recommendation initial definition. ...

ResizeObserver() - Web APIs
of: function(entries, observer) { for (let entry of entries) { // do something to each entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications ...

ResizeObserver - Web APIs
> div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize / 600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeven...

SVGAltGlyphElement - Web APIs
musical symbols) or even alternate glyphs such as asian text strings it is required that a different set of glyphs be used than the normal given character data. properties this interface also inherits properties from its parent interface, svggraphicselement. ...

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. examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxascent; // 10; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxascent' in that specification. ...

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. examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxdescent; // 3; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxdescent' in that specification. ...

Accessibility: What users can do to browse more safely - Accessibility
e.com from thomas steiner's article "move ya! or maybe, don't, if the user prefers-reduced-motion!"). this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings. use reader mode on browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go. using firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked. to reverse it, you will have to change the value back to "normal" use browser extension...

Web Accessibility: Understanding Colors and Luminance - Accessibility
as much about the physiology of the eye and human perception as it is about light emitting from a computer screen. environment matters. perception of color in a well-lit room will be different than perception of that same color on that same computer screen in a dark room. in terms of accessibility, the use of certain color-combinations have more impact than others. font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen. (see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that colo...

font-display - CSS: Cascading Style Sheets
used normally. font failure period if the font face is not loaded, the user agent treats it as a failed load causing normal font fallback. formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ 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. working draft initial definition ...

font-family - CSS: Cascading Style Sheets
he name of the font family. 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. candidate recommendation initial definition ...

font-variation-settings - CSS: Cascading Style Sheets
working draft initial definition ...

CSS Properties Reference - CSS: Cascading Style Sheets
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 liststyleposition list-style-type liststyletype margin margin ...

font-smooth - CSS: Cascading Style Sheets
syntax /* keyword values */ font-smooth: auto; font-smooth: never; font-smooth: always; /* <length> value */ font-smooth: 2em; webkit implements a similar property, but with different values: -webkit-font-smoothing. it only works on mac os x/macos. auto - let the browser decide (uses subpixel anti-aliasing when available; this is the default) none - turn font smoothing off; display text with jagged sharp edges. antialiased - smooth the font on the level of the pixel, as opposed to the subpixel. ...

font-variant-numeric - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

font-variant-position - CSS: Cascading Style Sheets
candidate recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinterne...

<length> - CSS: Cascading Style Sheets
character u+0030) in the element's font. in the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall. em represents the calculated font-size of the element. if used on the font-size property itself, it represents the inherited font-size of the element. ex represents the x-height of the element's font. on fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts. ic equal to the used advance measure of the "水" (cjk water ideograph, u+6c34) glyph found in the font used to render it. lh equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length. rem represents the font-s...

text-decoration-skip-ink - CSS: Cascading Style Sheets
d ascenders. auto the default — the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. that is, they are interrupted where they would otherwise cross over a glyph. all the browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. this can be helpful with certain chinese, japanese, or korean (cjk) fonts, where the auto behavior might not create interruptions. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas 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 の使...

CSS: Cascading Style Sheets
ng and css layout. styling text 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. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout 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. now it's time to look at how to place your boxes in the right place concerning the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, ...

Rich-Text Editing in Mozilla - Developer guides
lue="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatd...

Making content editable - Developer guides
lue="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatd...

<basefont> - HTML: Hypertext Markup Language
elements related to styling only. starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of each element). in html5, this element has been removed completely. 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. dom interface this element implements the htmlbasefontelement interface. example <basefont color="#ff0000" face="helvetica" size="+2" /> ...

<font> - HTML: Hypertext Markup Language
t the same time as all elements related to styling only, then made obsolete in html5. starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of each element). 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. attributes like all other html elements, this element supports the global attributes. color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. face this attribute contains a comma-separated list of one or more font names. the document text in the default style is rendered in the first font face that the cl...

<textarea> - HTML: Hypertext Markup Language
so line segments exceeding cols are not wrapped and the <textarea> becomes horizontally scrollable. if this attribute is not specified, soft is its default value. styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image. by default, its display value is block. compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular css. styling html forms provides some useful tips on styling <textarea>s. baseline inconsistency the html specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. for gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on a...

<tr>: The Table Row element - HTML: Hypertext Markup Language
o the right of the decimal point. this attribute is obsolete, and was never widely supported anyway. valignobsolete since html5 a domstring specifying the vertical alignment of the text within each cell in the row. possible values for this attribute are: baseline aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row. if all of the characters in the row are the same size, the effect is the same as bottom. bottom, draws the text in each of the row's cells as closely as possible to the bottom edge of those cells. middle each cell's text is vertically centered. top each cell's text is drawn as closely as possi...

HTML documentation index - HTML: Hypertext Markup Language
n to element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. 65 <base>: the document base url element element, html, html document metadata, html:metadata content, reference the html <base> element specifies the base url to use for all relative urls in a document. 66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element. 67 <bdi>: the bidirectional isolate element bdi, bidi, directionality, element, html, html text-level semantics, html:flow content, html:palpable content, html:ph...

Common MIME types - HTTP
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) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format tex...

Reason: CORS request not HTTP - HTTP
reason reason: cors request not http what went wrong? cors requests may only use the https url scheme, but the url specified by the request is of a different type. this often occurs if the url specifies a local file, using a file:/// url. to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets. local file security in firefox 68 when a user opened a page using a file:/// uri in firefox 67 and earlier, the origin of the page was defined as the directory from which the page was opened. resources in the same directory and its subdirectories were treated as having the same origin for purposes of the cors same-origin rule. in response to cve-2019-11730, fi...

Cross-Origin Resource Sharing (CORS) - HTTP
s standard means servers have to handle new request and response headers. another article for server developers discussing cross-origin sharing from a server perspective (with php code snippets) is supplementary reading. what requests use cors? this cross-origin sharing standard can enable cross-site http requests for: invocations of the xmlhttprequest or fetch apis, as discussed above. 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. webgl textures. images/video frames drawn to a canvas using drawimage(). css shapes from images. this article is a general discussion of cross-origin resource sharing and includes a discussion of the necessary ...

Content Security Policy (CSP) - HTTP
include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval(). a policy needs to include a default-src or style-src directive to restrict inline styles from being applied from a <style> element or a style attribute. there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers. examples: common use cases this section provides examples of some common security policy scenarios. example 1 a web site administrator wants all content to come from the site's own origin (this excludes subdomains.) content-security-policy: default-src 'self' example 2 a web site administrator wants to allow content from a trust...

CSP: font-src - HTTP
csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the font-src policy: content-security-policy: font-src <source>; content-security-policy: font-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. ...

Index - HTTP
-policy (csp) default-src directive serves as a fallback for the other csp fetch directives. for each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it: 34 csp: font-src csp, directive, http, reference, security the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. 35 csp: form-action csp, directive, http, security the http content-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given context. 36 csp: frame-ancestors csp, directive, http, security the http content-security-policy (csp) frame-ancestors directive speci...

HTTP Index - HTTP
ves as a fallback for the other csp fetch directives. for each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it: 82 csp: font-src csp, content-security-policy, directive, http, reference, security, font, source the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face. 83 csp: form-action csp, content-security-policy, directive, http, security, action, form, form-action the http content-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given context. 84 csp: frame-ancestors ancestors, csp, content-security-policy, directive, fra...

Closures - JavaScript
-family: helvetica, arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } such interactive text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units. here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively. you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example. document.getelementbyid('size-12').onclick = size12; document.getelemen...

Deprecated and obsolete features - JavaScript
escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals. the escape and unescape functions are deprecated. use encodeuri, encodeuricomponent, decodeuri or decodeuricomponent to encode and decode escape sequences for special characters. string methods html wrapper methods like string.prototype.fontsize and string.prototype.big. string.prototype.quote is removed from firefox 37. non standard flags parameter in string.prototype.search, string.prototype.match, and string.prototype.replace are deprecated. string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… programmers should not use or assume the...

String.prototype.big() - JavaScript
ning a <big> html element. description the big() method embeds a string in a <big> tag: "<big>str</big>". examples using big() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <fontsize=7>hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification. ...

String.prototype.small() - JavaScript
l> html element. description the small() method embeds a string in a <small> tag: "<small>str</small>". examples using small() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.small' in that specification. ...

String - JavaScript
deprecated. avoid these methods. they are of limited use, as they provide only a subset of the available html tags and attributes. ...

Values - MathML
lengths several mathml presentation elements have attributes that accept length values used for size or spacing. mathml accepts different units and constants for specifying lengths. units unit description em font-relative unit ex font-relative unit. (the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value. constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace ...

MathML attribute reference - MathML
this is an alphabetical list of mathml attributes. more details for each attribute are available on particular element pages. notes: the mathml <mstyle> and <math> elements accept all attributes of all mathml presentation elements. see values for notes on values and units in mathml. the attributes background, color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated. the xlink attributes on mathml elements: xlink:actuate, xlink:href, xlink:show and xlink:type are deprecated as well. name elements accepting attribute description accent <mo>, <mover>, <munderover> a boolean value specifying whether the operator should be treated as an accent. accentunder <munder>, <munderover> a boolean value specifying whether the...

Lazy loading - Web Performance
m is constructed. css must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display property, and the font loading api. see also: element link images and iframes very often, webpages contain many images that contribute to data-...

Web Performance
web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu, and battery life, it is important to consider the performance of your web content on these platforms. this article also looks at mobile-specific performance considerations. web font performance an often overlooked aspect of performance landscape are web fonts. web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. in this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. from there, we'll go on to talk about how browsers text, and how you can use css and javascript features to ensure your fo...

Graphic design for responsive sites - Progressive web apps (PWAs)
rating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats. the downsides here are that css3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs. using fonts for icons another technique to consider is using web fonts for icons. text is infinitely scalable on the web, and you can also use css text properties to style your web font icons, such as text-shadow and color. making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome. interactive images if your images need to feature some...

The building blocks of responsive design - Progressive web apps (PWAs)
...

externalResourcesRequired - SVG: Scalable Vector Graphics
the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. this attribute applies to all types of resource references, including style sheets, color profiles and fonts specified by a reference using a <font-face> element or a css @font-face specification. in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element. the externalresourcesrequired attribute is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container. because setting externalresour...

font-family - SVG: Scalable Vector Graphics
ue [ <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. specifications specification status comment css fonts module level 4the definition of 'generic font families' in that specification. working draft adds new generic font families, specifically: system-ui, emoji, math, and fangsong. css fonts module level 3the definition of 'font-family' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition ...

font-size-adjust - SVG: Scalable Vector Graphics
-size. the number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family. this means that the first-choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust. 0 yields text of zero height (hidden text). specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-size-adjust' in that specification. recommendation initial definition ...

font-size - SVG: Scalable Vector Graphics
candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-size' in that specification. recommendation initial definition ...

font-stretch - SVG: Scalable Vector Graphics
<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. working draft adds the <percentage> syntax for variable fonts. css fonts module level 3the definition of 'font-stretch' in that specification. candidate recommendation initial definition of font-stretch in css fonts scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-stretch'...

font-style - SVG: Scalable Vector Graphics
-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. specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification. working draft no change css fonts module level 3the definition of 'font-style' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-style' in that specification. recommendation initial definition browser comp...

font-variant - SVG: Scalable Vector Graphics
c-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. specifications specification status comment css fonts module level 4the definition of 'font-variant' in that specification. working draft no change css fonts module level 3the definition of 'font-variant' in that specification. candidate recommendation added many more keywords for different types of variations. scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-variant' in that specification. ...

method - SVG: Scalable Vector Graphics
ath for <textpath>, method indicates the method by which text should be rendered along the path. value align | stretch default value align animatable yes align this value indicates that the characters should be rendered so that they are not stretched or warped. the characters are rotated, scaled and stretched when they are rendered. as a result, for fonts with connected characters (e.g. cursive fonts), the connections may not align properly when text is rendered along the path. stretch this value indicates that the character outlines will be converted into paths, and then stretched and possibly warped. with this approach, connected characters, such as in cursive fonts, will maintain their connections. specifications specification ...

panose-1 - SVG: Scalable Vector Graphics
t match given a set of typefaces. only one element is using this attribute: <font-face> usage notes value <integer>{10} default value 0 0 0 0 0 0 0 0 0 0 animatable no <integer>{10} this value specifies a panose-1 number and consists of ten decimal integers, separated by whitespace. the initial value zero for each panose digit means "any", i.e. all fonts will match the panose number if this value is used. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'panose-1' in that specification. recommendation initial definition ...

textLength - SVG: Scalable Vector Graphics
ser agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percenta...

<font-face-src> - SVG: Scalable Vector Graphics
the <font-face-src> svg element corresponds to the src descriptor in css @font-face rules. it serves as container for <font-face-name>, pointing to locally installed copies of this font, and <font-face-uri>, utilizing remotely defined fonts. usage context categoriesfont elementpermitted contentone or more of the following elements, in any order:<font-face-name>, <font-face-uri> attributes global attributes core attributes specific attributes none dom interface this element implements the svgfontfacesrcelement interface. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font-face-src>' in that specification. recommendation initial definition ...

<glyph> - SVG: Scalable Vector Graphics
presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface. ...

<vkern> - SVG: Scalable Vector Graphics
this process is known as kerning. usage context categoriesfont elementpermitted contentempty attributes global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this element implements the svgvkernelement interface. ...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face>, <font-face-src>, <font-face-uri>, <font-face-format>, and <font-face-name> and corresponding idl interfaces removed implementation status unknown extensibility chapter change notes made <foreignobject> graphics element implementation status unknown ...

Texts - SVG: Scalable Vector Graphics
the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image. ...

Mixed content - Web security
tp 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). <object> (data attribute) navigator.sendbeacon (url attribute) other resource types like web fonts and workers may be considered active mixed content, as they are in chrome. warnings in web console the firefox web console displays a mixed content warning message in the net pane when a page on your website has this issue. the mixed content resource that was loaded via http will show up in red, along with the text "mixed content", which links to this page. as well as finding these warnings ...

Same-origin policy - Web security
n scripts. css applied with <link rel="stylesheet" href="…">. due to the relaxed syntax rules of css, cross-origin css requires a correct content-type header. restrictions vary by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. sites can use the x-frame-options header to prevent cross-origin framing. how to allow cross-origin access use cors to allow cross-origin access. cors is a part of http that lets servers specify what hosts are permitted to load content from that server. how to block cro...

xml:base - XML: Extensible Markup Language
work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2 specifications specification status comment ...

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
a wide variety of xml technologies, firefox incorporates within itself all of the mechanisms needed to process both original xml documents and the specialized stylesheets used to style and lay them out for html display, reducing server load with client-side processing. at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets. for basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. xslt allows a ...