Block and Line Layout Cheat Sheet - Archive of obsolete content
the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on.
...if set, ns_unconstrainedsize is passed to nslinelayout as the available height.
... nslinelayout encapsulates the transient reflow state for a nslinebox that contains inline frames.
...And 7 more matches

Test Your Skills: Fundamental layout comprehension - Learn web development
if you have worked through this module then you will have already covered the basics of what you need to know to do css layout today, and to work with older css as well.
... this task will test some of your knowledge by way of developing a simple webpage layout using a variety of techniques.
... project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below.
...And 7 more matches

KeyboardLayoutMap - Web APIs
the keyboardlayoutmap interface of the the keyboard api is a map-like object with functions for retrieving the string associated with specific physical keys.
... properties keyboardlayoutmap.entries read only returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... keyboardlayoutmap.keys read only returns a new array iterator object that contains the keys for each index in the array.
...And 7 more matches

Layout mode - CSS: Cascading Style Sheets
a css layout mode, sometimes simply called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes.
...normal flow includes block layout, designed for laying out boxes such as paragraphs and inline layout, which lays out inline items such as text.
... table layout, designed for laying out tables.
...And 7 more matches

Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced.
... the auto-layout mechanism is implemented in basictablelayoutstrategy.cpp the fixed-layout in fixedtablelayoutstrategy.cpp.
... all these files are in the layout/html/table/src subdirectory.
...And 5 more matches

Box alignment in grid layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
... on this page we explore how box alignment works in the context of css grid layout.
... as this page aims to detail things which are specific to css grid layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.
...And 5 more matches

Block and inline layout in normal flow - CSS: Cascading Style Sheets
the behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on flow layout and writing modes.
... elements participating in a block formatting context block elements in a horizontal writing mode such as english, layout vertically, one below the other.
...we see this with a very simple layout of two paragraphs, to which i have added a border.
...And 5 more matches

Column layouts - CSS: Cascading Style Sheets
you will often need to create a layout which has a number of columns, and css provides several ways to do this.
... whether you use grid, flexbox or multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.
... the recipes you need to choose different layout methods in order to achieve your requirements.
...And 5 more matches

Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods; on this page we explore how box alignment works in the context of multi-column layout.
... as this page aims to detail things which are specific to multi-column layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.
... in multi-column layout the alignment container is the content box of the multicol container.
...And 4 more matches

table-layout - CSS: Cascading Style Sheets
the table-layout css property sets the algorithm used to lay out <table> cells, rows, and columns.
... syntax /* keyword values */ table-layout: auto; table-layout: fixed; /* global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most browsers use an automatic table layout algorithm.
... under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed.
...And 4 more matches

Test your skills: Grid Layout - Learn web development
this aim of this task is to get you working with css grid layout, and test that you understand how a grid and grid items behave.
... grid layout one in this task you should create a grid into which the four child elements will auto-place.
... grid layout two in this example we already have a grid defined.
...And 3 more matches

Multiple-column layout - Learn web development
previous overview: css layout next the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create multiple-column layout on webpages, such as you might find in a newspaper.
... a basic example we will now explore how to use multiple-column layout, often referred to as multicol.
...And 3 more matches

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
... in this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements.
... as this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main box alignment page, which details the common features of box alignment across layout methods.
...And 3 more matches

CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from html primitives.
... like tables, grid layout enables an author to align elements into columns and rows.
... however, many more layouts are either possible or easier with css grid than they were with tables.
...And 3 more matches

CSS Layout cookbook - CSS: Cascading Style Sheets
the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites.
... in addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
... note: if you are new to css layout then you might first like to take a look at our css layout learning module, as this will give you the basic grounding you need to make use of the recipes here.
...And 3 more matches

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... discovering flex containers when an html element on your page has display: flex applied to it, a number of features are made available in the devtools to provide easy access to flexbox layout features.
... the layout flex container section the css pane's layout view includes a collapsible "flex container" section.
...And 2 more matches

HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
msislayoutoptimalforplayback is a read-only property which indicates whether the video can be rendered more efficiently.
... syntax htmlvideoelement.msislayoutoptimalforplayback: domstring; value boolean value set to true indicates that video is being rendered optimally (better performance and using less battery power).
... for msislayoutoptimalforplayback to be true, avoid the following: video elements with cascading style sheets (css) outlines set.
...And 2 more matches

Keyboard.getLayoutMap() - Web APIs
the getlayoutmap() method of the keyboard interface returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
... syntax var promise = keyboard.getlayoutmap() parameters none.
... return value a promise that resolves with an instance of keyboardlayoutmap.
...And 2 more matches

LayoutShiftAttribution - Web APIs
the layoutshiftattribution interface of the layout instability api provides debugging information about elements which have shifted.
... properties layoutshiftattribution.node returns the element that has shifted (null if it has been removed).
... layoutshiftattribution.previousrect returns a domrect representing the position of the element before the shift.
...And 2 more matches

Using multi-column layouts - CSS: Cascading Style Sheets
the css multi-column layout module extends the block layout mode to allow the easy definition of multiple columns of text.
...this limitation is solved by adding new css properties to extend the traditional block layout mode.
...this mode is also much more efficient for layout.
...And 2 more matches

CSS Multi-column Layout - CSS: Cascading Style Sheets
css multi-column layout is a module of css that adds support for multi-column layouts.
... support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
... relationship to fragmentation multiple-column layout is closely related to paged media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document.
...And 2 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
layout properties should work in the same way in vertical writing modes.
... in this guide, we look at how flow layout behaves when used with different document writing modes.
... this is not a comprehensive guide to the use of writing modes in css, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways.
...And 2 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in addition to the ability to place items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items.
...in this next example i have added to the layout by setting odd items to span two tracks both for rows and columns.
...however sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.
...And 2 more matches

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... the layout view grid section when grids are included on a page, the css pane's layout view includes a "grid" section containing a number of options for viewing those grids.
... note: the layout view can be found underneath the layout tab on the right-hand pane of the page inspector.
... grid options the grid section of the layout view looks like this: you'll see a number of options contained within: overlay grid: contains a checkbox for each grid present on the page, along with various options.

KeyboardLayoutMap.get() - Web APIs
the get() method of the keyboardlayoutmap interface returns the element with the given key.
... syntax var value = keyboardlayoutmap.get(key) parameters key the key of the item to return from the map.
... example the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); } specifications specification status comment keyboard mapthe definition of 'get()' in that specification.

CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface design, and the layout of items in one dimension.
... in the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
... justify-content align-content align-items align-self place-content place-items row-gap column-gap gap glossary entries flexbox flex container flex item main axis cross axis flex guides basic concepts of flexbox an overview of the features of flexbox relationship of flexbox to other layout methods how flexbox relates to other layout methods, and other css specifications aligning items in a flex container how the box alignment properties work with flexbox.
... backwards compatibility of flexbox browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec specifications specification status comment css flexible box layout module candidate recommendation initial definition.

Using the viewport meta tag to control layout on mobile browsers
to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.
... for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly.
...for example, if your layout needs at least 500 pixels of width then you can use the following markup.

KeyboardLayoutMap.forEach() - Web APIs
the foreach() method of the keyboardlayoutmap interface executes a provided function once for each element of the map.
... syntax keyboardlayoutmap.foreach(function callback(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters callback the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... array optional the keyboardlayoutmap that foreach() is being called on.

Flow Layout and Overflow - CSS: Cascading Style Sheets
flow relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen.
... summary whether you are in continuous media on the web or in a paged media format such as print or epub, understanding how content overflows is useful when dealing with any layout method.
... by understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.

CSS Flow Layout - CSS: Cascading Style Sheets
normal flow, or flow layout, is the way that block and inline elements are displayed on a page before any changes are made to their layout.
... the flow is essentially a set of things that are all working together and know about each other in your layout.
... guides block and inline layout in normal flow in flow and out of flow formatting contexts explained flow layout and writing modes flow layout and overflow reference glossary entries block (css) ...

Layout FAQ - Archive of obsolete content
mozilla.dev.tech.layout faq is there a way to do profiling of what is going on in mozilla?
...t=0359ed50] [sc=035ff990]< text(0)@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41600020] sc=035ffa3c pst=:-moz-non-element< "\nabc" > frame(br)(1)@035ffb1c {330,225,0,0} [state=00000020] [content=035aebf0] > > the linebox is used to contain everything on a single line: example how do you fix inconsistent float behavior in firefox involving a two column layout using display:table and floating div elements?

Layout viewport - MDN Web Docs Glossary: Definitions of Web-related terms
the layout viewport is the viewport into which the browser draws a web page.
...the rendered document doesn't change in any way, so the layout viewport remains the same as the user adjusts the zoom level.

Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
...invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze form controls - rods, bryner style resolution and rule tree - dbaron views, widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow key data structures detailed walk-through incrementalism q & a?

nglayout.debug.disable xul fastload
the preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.
... never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debugging.

onMSVideoOptimalLayoutChanged - Web APIs
onmsvideooptimallayoutchanged is an event which occurs when the msislayoutoptimalforplayback state changes.
... syntax value description event property object.onmsvideooptimallayoutchanged = handler; attachevent method object.attachevent("onmsvideooptimallayoutchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) synchronous no bubbles no cancelable no see also msislayoutoptimalforplayback htmlvideoelement microsoft api extensions ...

KeyboardLayoutMap.entries - Web APIs
the entries read-only property of the keyboardlayoutmap interface returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... syntax keyboardlayoutmap.entries() value an array of the given keyboardlayoutmap object's own enumerable property [key, value] pairs.

KeyboardLayoutMap.has() - Web APIs
the has() method of the keyboardlayoutmap interface returns a boolean indicating whether the object has an element with the specified key.
... syntax var aboolean = keyboardlayoutmap.has(key) parameters key the key of an element to search for in the map.

KeyboardLayoutMap.keys - Web APIs
the keys read-only property of the keyboardlayoutmap interface returns a new array iterator object that contains the keys for each index in the array.
... syntax iterator = keyboardlayoutmap.keys value an iterator.

KeyboardLayoutMap.size - Web APIs
the size read-only property of the keyboardlayoutmap interface returns the number of elements in the map.
... syntax var size = keyboardlayoutmap.size() value a number.

KeyboardLayoutMap.values - Web APIs
the values read-only property of the keyboardlayoutmap interface returns a new array iterator object that contains the values for each index in the map.
... syntax var iterator = keyboardlayoutmap.values value an iterator.

CSS Positioned Layout - CSS: Cascading Style Sheets
css positioned layout is a module of css that defines how to position elements on the page.
... specifications specification status comment css positioned layout module level 3 working draft css level 2 (revision 1) recommendation ...

CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of css that provides the rendering model and formatting controls related to the display of ruby annotation.
... reference properties ruby-align ruby-position specifications specification status comment css ruby layout module level 1 working draft initial definition ...

<multicol>: The HTML Multi-Column Layout element (Obsolete) - HTML: Hypertext Markup Language
the html multi-column layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used.
...in order to implement a multi-column layout, you should be using the regular html elements, like <div> in conjunction with css columns.

Feature-Policy: layout-animations - HTTP
the http feature-policy header layout-animations directive controls whether the current document is allowed to show layout animations.
... syntax feature-policy: layout-animations <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.

Getting from Content to Layout
changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp the frame constructor implements nsimutationobserver which allows it to "watch" the content tree.

nglayout.debug.disable_xul_cache
(default) see also: http://kb.mozillazine.org/nglayout.debug.disable_xul_cache ...

Index - Web APIs
469 cssstylesheet api, css, cssom, cssom api, cssstylesheet, interface, layout, object model, reference, stylesheet the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
... 470 cssstylesheet.addrule() api, css, cssom, cssom api, cssstylesheet, layout, method, object model, obsolete, reference, style, stylesheet, addrule, legacy, rules the obsolete cssstylesheet interface's addrule() legacy method adds a new rule to the stylesheet.
... 471 cssstylesheet.cssrules api, css, cssom, cssom api, cssstylesheet, layout, object model, property, read-only, reference, stylesheet the read-only cssstylesheet property cssrules returns a live cssrulelist which provides a real-time, up-to-date list of every css rule which comprises the stylesheet.
...And 68 more matches

Responsive design - Learn web development
previous overview: css layout next in the early days of web design, pages were built to target a particular screen size.
...as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
... historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the browser window or a fixed width site, which would be a fixed size in pixels.
...And 31 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
this is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block.
... 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
... specifically, blink began as a fork of the webcore library in webkit, which handles layout, rendering, and dom, but now stands on its own as a separate rendering engine.
...And 28 more matches

Index - Archive of obsolete content
on october 11, 2002, wired launched a brand-new site design that uses validating xhtml for its structure and a small collection of css files for its layout.
... 440 block and line layout cheat sheet gecko the details of block and line layout are tricky; this document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on.
...ibmbidi), written by simon montagu and posted to the mozilla-layout mailing list.
...And 26 more matches

Index - Learn web development
27 what do common web layouts contain?
...when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.
...the next article explores debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should.
...And 24 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
if the content, layout, and functionality need to change greatly for different devices, it may not be such a good approach.
... fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels.
... this has a lot of advantages in that the layout will adapt to different viewport dimensions.
...And 23 more matches

Performance best practices for Firefox front-end engineers
for a very down-to-earth explanation of the style, layout, paint and composite steps of the pipeline, this hacks blog post does a great job of explaining it.
...this allows you to put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames.
... this also means that requestanimationframe() is not a good place to put queries for layout or style information.
...And 22 more matches

Supporting older browsers - Learn web development
previous overview: css layout next in this module, we recommend using flexbox and grid as the main layout methods for your designs.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand how to provide support for your layouts on older browsers that might not support the features you want to use.
... creating fallbacks in css css specifications contain information that explains what the browser does when two layout methods are applied to the same item.
...And 21 more matches

Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
... these features are used to create layouts that respond to different screen sizes.
...And 18 more matches

Box Objects - Archive of obsolete content
« previousnext » this section describes the box object, which holds display and layout related information about a xul box as well as some details about xul layout.
... about mozilla layout mozilla divides things into two sets of trees, the content tree and the layout tree.
...the layout tree holds a different tree of nodes for each individual component that can be displayed.
...And 17 more matches

Flexbox - Learn web development
previous overview: css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to use the flexbox layout system to create web layouts.
... for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning.
...And 17 more matches

Grid template areas - CSS: Cascading Style Sheets
when you use css grid layout you always have lines, and this can be a straightforward way to place items on your grid.
...you will see very quickly why we sometimes call this the ascii-art method of grid layout!
...for example, if i wish to create the layout shown below i can identify four main areas.
...And 17 more matches

Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css, svg, and mobile devices — and differentiates between the visual viewport and the layout viewport.
... the area within the innerheight and innerwidth is generally considered the layout viewport.
...this is the layout viewport.
...And 17 more matches

Handling common HTML and CSS problems - Learn web development
the main areas we'll look at are lack of support for modern features, and layout issues.
... as an example, we entered the following code: body { display: flex; } we highlighted it and ran the autoprefixer command, and it replaced it with this: body { display: -webkit-box; display: -ms-flexbox; display: flex; } layout issues another problem that might come up is differences in layouts between browsers.
... historically this used to be much more of a problem, but recently, with modern browsers tending to support css more consistently, layout issues tend to be more commonly associated with: lack of (or differences in) support for modern layout features.
...And 14 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
... note: the documentation for each layout method will detail how box alignment is applied there.
...we were able to align text using text-align, center blocks using auto margins, and in table or inline-block layouts using the vertical-align property.
...And 14 more matches

Critical rendering path - Web Performance
optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.
...layout determines the size and location of everything on the page.
... once layout is determined, pixels are painted to the screen.
...And 14 more matches

Gecko Keypress Event
that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character.
... when the accel key is down, the charcode of a keypress event may be replaced with a character from a latin keyboard layout only when the original character is not an ascii character.
...if gecko doesn't replace the charcode with an ascii character, the web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.).
...And 13 more matches

@font-feature-values - CSS: Cascading Style Sheets
@font-feature-valueschrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... android no support nochrome android no support nofirefox android full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... no@annotationchrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
...And 13 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once.
...in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox.
... single-dimensional layout explained as we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.
...And 12 more matches

display - CSS: Cascading Style Sheets
the display css property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
...the outer type sets an element's participation in flow layout; the inner type sets the layout of children.
...keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout.
...And 12 more matches

Grids - Learn web development
previous overview: css layout next css grid layout is a two-dimensional layout system for the web.
... it lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
... this article will give you all you need to know to get started with page layout.
...And 11 more matches

Experimental features in Firefox
nightly 43 yes developer edition 43 no beta 43 no release 43 no preference name layout.css.control-characters.enabled or layout.css.control-characters.visible property: initial-letter the initial-letter css property is part of the css inline layout specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
... nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
...And 10 more matches

Visual formatting model - CSS: Cascading Style Sheets
the layout of these boxes is governed by: box dimensions and type.
...when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout specifications.
...user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.
...And 9 more matches

MathML documentation index - MathML
12 <menclose> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <menclose> element renders its content inside an enclosing notation specified by the notation attribute.
... 13 <merror> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <merror> element is used to display contents as error messages.
... 14 <mfenced> deprecated, mathml, mathml reference, mathml:element, mathml:general layout schemata the deprecated mathml <mfenced> element used to provide the possibility to add custom opening and closing parentheses (such as brackets) and separators (such as commas or semicolons) to an expression.
...And 9 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
on october 11, 2002, wired launched a brand-new site design that uses validating xhtml for its structure and a small collection of css files for its layout.
... wired news redesign in a nutshell driven by xhtml 1.0 transitional and css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple css positioning; vastly increased accessibility without special coding or user agent detection.
... what made you decide to drop tables as a layout mechanism?
...And 8 more matches

Gecko FAQ - Gecko Redirect 1
gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute.
... what is a layout engine?
... basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...And 8 more matches

Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
... the kind of thing you might get in a newspaper layout.
...And 8 more matches

Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
...what if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel?
...positioning makes such layout work possible.
...And 8 more matches

Keyboard API - Web APIs
the key value takes into account the keyboard's locale (for example, 'en-us'), layout (for example, 'qwerty'), and modifier-key state (shift, control, etc.).
... the keyboard map api provides a way to retrieve the string generated by a particular key press, through the keyboard interface and the keyboardlayoutmap interface.
...keyboard provides the keyboard.getlayoutmap method, which returns a promise that resolves with a keyboardlayoutmap object that contains members for converting codes to keys.
...And 8 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
in this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.
...you can read more about the difference between flexbox and css grid layout in relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout.
... in reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to get alignment capabilities.
...And 8 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in these guides, i have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification.
... for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs.
...which is why in grid layout we use the keyword start when aligning something to the start of the container.
...And 8 more matches

Populating the page: how browsers work - Web Performance
render rendering steps include style, layout, paint and, in some cases, compositing.
... the cssom and dom trees created in the parsing step are combined into a render tree which is then used to compute the layout of every visible element, which is then painted to the screen.
... layout the fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node.
...And 8 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed4"/> </hbox> listing 3: horizontal and vertical box...
...es figure 1: output of listing 3 there is also a grid element, which can be used for layouts similar to those achieved using the html table element, a stack element for layering other elements, and so on.
...you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical.
...And 7 more matches

Gecko Compatibility Handbook - Archive of obsolete content
(more about css) content differs in gecko browsers and internet explorer incorrect layout mode specified by doctype.
... if pages should be displayed by legacy browsers such as netscape navigator 4 or internet explorer 4 and 5, be sure to specify quirks mode layout via the doctype.
... incorrect layout mode specified by doctype.
...And 7 more matches

CSS Containment - CSS: Cascading Style Sheets
if we give each <article> the contain property with a value of content, when new elements are inserted the browser understands it does not need to relayout or repaint any area outside of the containing element's subtree, although if the <article> is styled such that its size depends on its contents (e.g.
... the content value is shorthand for contain: layout paint.
... it tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds.
...And 7 more matches

justify-items - CSS: Cascading Style Sheets
the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis.
... in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* positional alignment */ justify-items: center; /* pack items around the center */ justify-items: start; /* pack items from the start */ justify-items: end; /* pack items from the end */ justify-...
...note that justify-items is ignored in flexbox layouts.
...And 7 more matches

justify-self - CSS: Cascading Style Sheets
the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis.
... in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: center; /* pack item around the center */ justify-self: start; /* pack item from the start */ justify-self: end; /* pack item from the end */ justify-self: flex-start; ...
...note that justify-self is ignored in flexbox layouts.
...And 7 more matches

Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.
...then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate.
...for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first.
...And 7 more matches

The Implementation of the Application Object Model - Archive of obsolete content
how are xml dom/aom trees represented in nglayout?
... nglayout has its own objects for holding content trees.
...if nglayout's formatting objects aren't used to render the widgetry, then drawing code has to be written for each and every widget.
...And 6 more matches

Archived Mozilla and build documentation - Archive of obsolete content
space manager detailed design the space manager and related classes and structures are an important of the gecko layout system, specifically block layout.
... space manager high level design the space manager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them.
... when elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed.
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc.
... this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.
... try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> ...
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc.
... this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.
... try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> ...
...And 6 more matches

nsIDOMWindowUtils
nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsido...
...mwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); ...
...long abutton, in long ascrollflags, in long adelta, in long amodifiers); obsolete since gecko 17.0 void sendwheelevent(in float ax, in float ay, in double adeltax, in double adeltay, in double adeltaz, in unsigned long adeltamode, in long amodifiers, in long alineorpagedeltax, in long alineorpagedeltay, in unsigned long aoptions); void sendnativekeyevent(in long anativekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in nsidomelement aelement); nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ...
...And 6 more matches

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
initially a part of multi-column layout, the definition of column-gap has been broadened to include multiple layout methods.
... now specified in box alignment, it may be used in multi-column, flexible box, and grid layouts.
... css grid layout initially defined the grid-column-gap property.
...And 6 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
for example to make a heading inline we would use the following css: h1 { display: inline; } more recently we have gained css grid layout and flexbox.
...it behaves as block-level things do in relationship to other boxes in the layout.
... the same is true when working with grid layout.
...And 6 more matches

Block formatting context - Developer guides
it's the region in which the layout of block boxes occurs and in which floats interact with other elements.
... elements with contain: layout, content, or paint.
... formatting contexts affect layout, but typically, we create a new block formatting context for the positioning and clearing floats rather than changing the layout, because an element that establishes a new block formatting context will: contain internal floats.
...And 6 more matches

Animation performance and frame rate - Web Performance
for a rate of 60 frames per second, the browser has 16.7 milliseconds to execute scripts, recalculate styles and layout if needed, and repaint the area being updated.
... layout: next, the browser uses the computed styles to figure out the position and geometry for the elements.
... this operation is labeled "layout" but is also sometimes called "reflow".
...And 6 more matches

Notes on HTML Reflow - Archive of obsolete content
overview reflow is the process by which the geometry of the layout engine's formatting objects are computed.
...html uses a flow based layout model, meaning that most of the time it is possible to compute the geometry in a single pass.
... elements later "in the flow" typically do not affect the geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document.
...And 5 more matches

-ms-block-progression - Archive of obsolete content
the -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.
...layout is horizontal.
...layout is vertical.
...And 5 more matches

The box model - Learn web development
previous overview: building blocks next everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
... note: to read more about the values of display, and how boxes work in block and inline layout, take a look at the mdn guide to block and inline layout.
...And 5 more matches

Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
... prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to explain how browsers layout web pages by default, before we begin to make changes.
... as detailed in the last lesson introducing layout, elements on a webpage lay out in the normal flow, if you have not applied any css to change the way they behave.
...And 5 more matches

HTML table basics - Learn web development
you can find more details and an example at page layouts in our accessibility learning module.
... this was commonly used because css support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.
... in short, using tables for layout rather than css layout techniques is a bad idea.
...And 5 more matches

Implementing feature detection - Learn web development
a classic example might be to test for flexbox support in a browser; for browsers that support the newest flexbox spec, we could use a flexible and robust flex layout.
... for browsers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking.
... start by making local copies of our css-feature-detect.html, flex-layout.css, float-layout.css, and basic-styling.css files.
...And 5 more matches

Mozilla Web Developer FAQ
gecko has two and a half layout modes: quirks, almost standards and standards.
...documents sent as xml always activate the standards layout mode.
... since also other contemporary browsers have a standards mode, activating the standards mode or the almost standards mode in other browsers as well (using the above-mentioned exact doctypes) is the best way to get consistent css layout results across different browsers.
...And 5 more matches

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
the presence of whitespace in the dom can cause layout problems and make manipulation of the content tree difficult in unexpected ways, depending on where it is located.
... </h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
... take the following document, for example: <!doctype html> <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p> paragraph </p> </body> </html> the dom tree for this looks like so: conserving whitespace characters in the dom is useful in many ways, but there are certain places where this makes certain layouts more difficult to implement, and causes problems for developers who want to iterate through nodes in the dom.
...And 5 more matches

Introduction to formatting contexts - CSS: Cascading Style Sheets
a block formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc.
... each formatting context has specific rules about how layout behaves when in that context.
... block formatting contexts the outermost element in a document that uses block layout rules establishes the first, or initial block formatting context.
...And 5 more matches

contain - CSS: Cascading Style Sheets
this allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the dom and not the entire page, leading to obvious performance benefits.
... syntax /* keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint; /* multiple keywords */ contain: size paint; contain: size layout paint; /* global values */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content keyword.
... using one or more of the size, layout, style, and paint keywords in any order.
...And 5 more matches

place-items - CSS: Cascading Style Sheets
the align-items and justify-items properties) in a relevant layout system such as grid or flexbox.
... normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start.
... in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
...And 5 more matches

SVG documentation index - SVG: Scalable Vector Graphics
80 font-size svg, svg attribute the font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment.
... 99 hanging deprecated, svg, svg attribute the hanging attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment for horizontally oriented glyph layouts.
... 106 ideographic deprecated, svg, svg attribute the ideographic attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for horizontally oriented glyph layouts.
...And 5 more matches

CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
... css multi-column layout module working draft adds support for easy multi-column layouts using the css columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside.
... css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap.
...And 4 more matches

display-inside - Archive of obsolete content
values auto if the element's computed <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout.
... if the element's computed <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> value.
... block the element lays out its contents using block layout.
...And 4 more matches

display-outside - Archive of obsolete content
contents the element lays out its contents using flex layout.
... table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption the element is an internal table element, and participates in a table layout context.
... table-cell and table-caption are layout-specific leaf types; the rest are layout-specific internal types.
...And 4 more matches

Handling different text directions - Learn web development
as you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them now.
...you don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.
... writing modes and block and inline layout we have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements.
...And 4 more matches

Eclipse CDT
window layout) via the menubar by selecting "window > open perspective > c/c++".
...lipseelement.cpp content/svg/content/src/nssvgpathgeometryelement.h content/svg/content/src/nssvggraphicelement.h content/svg/content/src/nssvgstylableelement.h content/svg/content/src/nssvgelement.h content/base/src/nsgenericelement.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entry_classinfo define is behind an |ifdef _impl_ns_layout|.
...however, if you right click on nsdomclassinfoid.h in the project explorer and select "index > create parser log file", the log shows "context" is set to "accessible/src/base/accevent.cpp", not "content/svg/content/src/nssvgellipseelement.cpp", and if you check the properties for accevent.cpp, indeed it is not built with the _impl_ns_layout define.
...And 4 more matches

Animating CSS properties - Firefox Developer Tools
layout: next, the browser uses the computed styles to figure out the position and geometry for the elements.
... this operation is labeled "layout" but is also sometimes called "reflow".
... css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint.
...And 4 more matches

Visual Viewport API - Web APIs
visual viewport concepts and usage the mobile web contains two viewports, the layout viewport and the visual viewport.
... the layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen.
... when the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged.
...And 4 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in the article covering the basic concepts of grid layout, we started to look at how to position items on a grid using line numbers.
... starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines.
...one of the very nice things about grid layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.
...And 4 more matches

A hybrid approach - Developer guides
the good responsive web design is great — right now it is the best technique available for making layouts look as good as possible in a variety of circumstances.
... if your mobile and desktop use cases are similar enough, this is definitely the preferred option for layout changes.
...this keeps the complexity of altering content on the server side, but still allows our layouts to benefit from the flexibility and future-readiness of responsive design.
...And 4 more matches

Browser detection using the user agent - HTTP
also, rethink your design: can you use progressive enhancement or fluid layouts to help remove the need to do this?
...using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself.
...the second method uses a column layout and resents all the dogs to the left and all the cats to the right.
...And 4 more matches

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout.
...to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0.
...And 4 more matches

Graphic design for responsive sites - Progressive web apps (PWAs)
textual content is not a problem, as text boxes are innately responsive, but the picture starts to get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays!
... this is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.) in addition, these days there are so many more technologies to choose from than your humble bmps, jpgs, gifs and pngs.
... serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context.
...And 4 more matches

Debugging CSS - Learn web development
for example in firefox there are some excellent tools for working visually with css layout, allowing you to inspect and edit grid layouts, flexbox, and shapes.
... you can use this to do an a/b comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.
... the layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out.
...And 3 more matches

Overflowing content - Learn web development
as you go further with css layout and writing css, you will encounter more overflow situations.
...this offers the advantage of keeping the layout consistent, instead of scrollbars appearing or disappearing, depending upon the amount of content in the container.
...the content of the box that you have changed the value of overflow for acquires a self-contained layout.
...And 3 more matches

Styling tables - Learn web development
link the css to the html by placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped!
... to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
...with table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate.
...And 3 more matches

Tips for authoring fast-loading HTML pages - Learn web development
use modern css and valid markup use of modern css reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-css.
... chunk your content tables for layouts are a legacy method that should not be used anymore.
... layouts utilizing floats, positioning, flexbox, or grids should be used instead.
...And 3 more matches

VisualViewport - Web APIs
note: only the top-level window has a visual viewport that's distinct from the layout viewport.
...for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like document.documentelement.clientwidth.
... visualviewport.offsetleft read only returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in css pixels.
...And 3 more matches

Recipe: Media objects - CSS: Cascading Style Sheets
the recipe download this example choices made i have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when i need to.
... another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image.
... by using grid-template-areas to achieve the layout, i can see the pattern in the css.
...And 3 more matches

margin-left - CSS: Cascading Style Sheets
auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
...And 3 more matches

margin-right - CSS: Cascading Style Sheets
auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
...And 3 more matches

position - CSS: Cascading Style Sheets
the offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
... absolute the element is removed from the normal document flow, and no space is created for the element in the page layout.
... fixed the element is removed from the normal document flow, and no space is created for the element in the page layout.
...And 3 more matches

CSS: Cascading Style Sheets
css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout.
... 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.
...And 3 more matches

HTML documentation index - HTML: Hypertext Markup Language
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.
... 93 <div>: the content division element content division, element, html, html grouping content, html:flow content, layout, reference, web, div the html content division element (<div>) is the generic container for flow content.
... it has no effect on the content or layout until styled using css.
...And 3 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
it is now preferable to use css for layout.
... fast forward to 2001, and the rise of standards-based browsers that lay out pages using html and css instead of their own private layout algorithms.
... thanks to an obscure corner of the css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...And 2 more matches

Index - Archive of obsolete content
sections in bold are to draw attention to pieces that are often overlooked for visual layouts.
...these applications are easily customized with alternative text, graphics, and layout so they can be readily branded or localized for various markets.
... 1015 box objects tutorials, xul, xul_tutorial this section describes the box object, which holds display and layout related information about a xul box as well as some details about xul layout.
...And 2 more matches

Introduction to XUL - Archive of obsolete content
window chrome is displayed and managed by the same layout engine that manages html content in the browser.
...we intend to provide a subset of cross-platform functionality suitable for building network applications like browsers, leveraging the cross-platform functionality already built into gecko, mozilla's html layout engine.
... "xul" already introduced, is an application of xml used to describe the layout of most windows in the mozilla browser, including and especially the main, browser window.
...And 2 more matches

Implementing controls using the Gamepad API - Game development
there's also a number of other devices with various different button layouts that more or less work across browser implementations.
...ser or due to inactivity.) in the demo, the gamepadapi object is used to store everything related to the api: var gamepadapi = { controller: {}, turbo: false, connect: function() {}, disconnect: function() {}, update: function() {}, buttonpressed: function() {}, buttons: [], buttonscache: [], buttonsstatus: [], axesstatus: [] }; the buttons array contains the xbox 360 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get.
... mapping: the layout type of the buttons; standard is the only available option for now.
...And 2 more matches

Mobile accessibility - Learn web development
responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
... responsive design responsive design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
... in particular, the most common problems that need to be addressed for mobile are: suitability of layouts for mobile devices.
...And 2 more matches

Images, media, and form elements - Learn web development
this means that css cannot affect the internal layout of these elements — only their position on the page amongst other elements.
... replaced elements in layout when using various css layout techniques on replaced elements, you may well find that they behave slightly differently to other elements.
... for example, in a flex or grid layout elements are stretched by default to fill the entire area.
...And 2 more matches

Test your skills: Flexbox - Learn web development
flex layout one these list items are the navigation for a site.
... flex layout two these list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item.
... flex layout three there are two elements in the html below, a div with a class of .parent which contains another div with a class of .child.
...And 2 more matches

Test your skills: Media Queries and Responsive Design - Learn web development
everything you need to know to complete this task was covered in the guide to media queries, and the other layout lessons in this section.
... your task is to create a desktop version of this layout which displays when there is enough screen width to accomodate it.
... you can see the layout you are aiming for in the screenshot below.
...And 2 more matches

nsIBidiKeyboard
a user is a bidirectional writer if they have keyboard layouts in both left-to-right and right-to-left directions (that is users who use arabic, iranian (persian), or israel (hebrew) keyboard layout, beside an us (english) layout.) inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) method overview boolean islangrtl(); void setlangfrombidilevel(in pruint8 alevel); attributes attribute type description havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direction (left-to-right and right-to-...
... remarks implementation windows this implementation uses win32 api to get the language of the keyboard layout, and the direction of those languages.
...in the gecko 1.8 branch, just islangrtl() had been implemented, and uses gdk's api to check the direction of keyboard layout, which has a problem with hebrew language.
...And 2 more matches

Mozilla
in the manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) gecko gecko is the name of the layout engine developed by the mozilla project.
... it was originally named nglayout.
... getting from content to layout gecko maintains two separate representations of a document in memory: the content tree and the frame tree.
...And 2 more matches

Waterfall - Firefox Developer Tools
it's based on the idea that the things a browser does when running a site can be divided into various types - running javascript, updating layout, and so on - and that at any given point in time, the browser is doing one of those things.
...the hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements.
... layout: next, the browser uses the computed styles to figure out the position and geometry for the elements.
...And 2 more matches

Cognitive accessibility - Accessibility
these problems include difficulty with understanding content, remembering how to complete tasks, and confusion caused by inconsistent or non-traditional web page layouts.
... providing accessible solutions for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; providing easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making website authentication as easy as possible without compromising security; and making forms easy to complete, such as with clear error messages and simple error recovery.
...for example, provide responsive layouts, with a single column mobile design.
...And 2 more matches

Using feature queries - CSS: Cascading Style Sheets
let's say we want to create a layout of three boxes in a row, and ideally we would like to use css grid layout.
... however, we would like to have a layout for older browsers using floats.
... we can start by creating that floated layout with the following code, which gives us three columns.
...And 2 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
the box alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in css grid layout.
... the inclusion of these properties in box alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in firefox 63 you will find the first browser implementation of the gap properties in flex layout.
... my suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in grid layout.
...And 2 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
... when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column.
... this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together.
...And 2 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
new layout methods such as flexbox and grid bring with them the possibility of controlling the order of content.
...the specification says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order.
...by changing which item has the class active assigned to it in the html, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.
...And 2 more matches

align-items - CSS: Cascading Style Sheets
in grid layout, it controls the alignment of items on the block axis within their grid area.
... the interactive example below demonstrates some of the values for align-items using grid layout.
...ack flex items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
...And 2 more matches

box-direction - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... notes the edge of the box designated the start for layout purposes depends on the box's orientation: horizontal left vertical top the edge opposite to the start is designated the end.
... formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard.
...And 2 more matches

justify-content - CSS: Cascading Style Sheets
the interactive example below demonstrates some of the values using grid layout.
... the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.
... this only applies to flex layout items.
...And 2 more matches

place-self - CSS: Cascading Style Sheets
the align-self and justify-self properties) in a relevant layout system such as grid or flexbox.
... normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... in static position of absolutely-positioned layouts, the keyword behaves as stretch.
...And 2 more matches

visibility - CSS: Cascading Style Sheets
the visibility css property shows or hides an element without changing the layout of a document.
... to both hide an element and remove it from the document layout, set the display property to none instead of using visibility.
... hidden the element box is invisible (not drawn), but still affects layout as normal.
...And 2 more matches

Source code directories overview - Archive of obsolete content
content was split off from layout and contains objects as they are exposed to the dom.
... layout contains the c interfaces and code for the layout engine.
... the layout engine decides how to divide up the "window real estate" among all the pieces of content.
...this code is also known by the names, "nglayout" and "gecko." lib contains c code used for reference by developers in programming the mac.

Documentation for BiDi Mozilla - Archive of obsolete content
ibmbidi), written by simon montagu and posted to the mozilla-layout mailing list.
... in some circumstances, even on a platform with bidi capability, the layout code has to reverse text fragments or to allow for the fact that they are displayed in reverse.
...the implementation is mostly in layout code, especially in nsselection.cpp and nscaret.cpp.
...bidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\public\nsiubidiutils.h intl\unicharutil\src\nsbidiutilsimp.cpp utilities for bidi processing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidiframes.cpp subclass of nsframe with additional method setoffsets, to adjust mcontentoffset and mcontentlength during bidi processing nsdirectionalframe layout/...

The life of an HTML HTTP request - Archive of obsolete content
now the channel knows the content type of the incoming data, so the documentloader can find an nsidocumentloaderfactory for the "text/html" content type (in this case an nslayoutdlf).
...the initial reflow is done by the nshtmlcontentsink::startlayout(), startlayout() calls presshell::initialreflow().
... startlayout is called quite early in the parsing process, for html it's called in nshtmlcontentsink::openbody() (among other places).
...when the presshell [note: not true, who really does the call?] has layouted (reflowed) the frames it calls nsiframe::paint() method of all frames.

Tuning Pageload - Archive of obsolete content
the data flows in gecko as follows: network -> necko -> parser -> content sink -> content model -> rendering model -> layout -> painting.
... nglayout.initialpaint.delay this is a preference that specifies a delay, in milliseconds, after the data from the server has started coming in.
... content.interrupt.parsing this preference, when true, means that the content sink can tell the parser to stop for now and return to the event loop, which allows layout and painting to happen.
...since layout and painting happen asynchronously, while the parser is working there is no layout or painting.

Box Model Details - Archive of obsolete content
more layout details the style properties such as min-width and max-height can be applied to any element.
...example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
...however, the layout will be partly controlled by the html element.
...layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels.

The Box Model - Archive of obsolete content
« previousnext » in this section, we'll look at how xul handles layout.
... introduction to boxes the main form of layout in xul is called the 'box model'.
...by combining a series of boxes, spacers and elements with flex and pack attributes, you can control the layout of a window.
... although a box is the fundamental part of xul element layout, it follows a few very simple rules.

Using Spacers - Archive of obsolete content
(java uses layout managers for example.) xul provides the capability for elements to position and resize automatically.
...xul uses a layout system called the 'box model'.
...before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer.
...as we'll see, you can use a series of spacers to create a number of layout effects.

Mozilla release FAQ - Archive of obsolete content
the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a release, and so netscape 6.0 was released.
... gemini was a previous rendering engine project, renamed nglayout aurora is the navigation center in mozilla and navigator5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup?
...re specific to the mozilla newsgroups: fe = front end -- the part of mozilla that handles the interface be = back end -- the part of mozilla that does all the behind-the-scenes stuff nspr = netscape portable runtime -- an abstraction layer over the local os gtk = a free gui toolkit native to unix qt = another gui toolkit xp = cross platform xpfe = cross-platform frontend based on nglayout m[number] = milestone release [number] (no longer used) i'm wondering how to do xxx with navigator 3.x...
...you could tackle: porting mozilla to the os you use work on moving #ifdef platform to #ifdef feature/bug if you're on unix, port mozilla to the toolkit you prefer modularize/clean up apis fix bugs work on the expermental features (mail/news, aurora, nglayout) add new things: make opendoc and ole nglayout controls write new skins (see themes.org) add preference interfaces for the hidden features there's plenty to do..

2006-09-29 - Archive of obsolete content
summary: mozilla.dev.tech.layout september 22-29, 2006 announcements no announcements for this week.
...details can be located at layout confusion refactoring the nshtmlreflowstate(computeblockboxdata, initconstraints) and nsimageframe::getdesiredsize which uses ns_inrinsicsize, into the following method: /** * compute the size that a frame will occupy.
... discussion on how to determine whether there is pending layout changes or reflows when using a popup.
... it was concluded that a frame model change is utilized within a popup, not a layout change.

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
flexbox is the commonly-used name for the css flexible box layout module, a layout model for displaying items in a single dimension — as a row or as a column.
... in the specification, flexbox is described as a layout model for user interface design.
... the key feature of flexbox is the fact that items in a flex layout can grow and shrink.
... learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering wrapping of flex items css flexbox guide: typical use cas...

CSS building blocks - Learn web development
the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout.
...the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.
...as you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.

Practical positioning examples - Learn web development
here we simply set a fixed height to make sure the panels fit snugly inside the info-box, position relative to set the <div> as the positioning context, so you can then place positioned child elements relative to it and not the <html> element, and finally we clear the float set in the css above so that it doesn't interfere with the remainder of the layout.
...the first rule we'll add will absolutely position the panels, and make them all sit flush to the top and left of their <div> container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another.
... a sliding hidden panel the final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...

Fundamental text and font styling - Learn web development
text layout styles: properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.
... text layout with basic font properties out the way, let's now have a look at properties we can use to affect text layout.
... text layout styles: text-indent: specify how much horizontal space should be left before the beginning of the first line of the text content.
... a full example would look like this: font: italic normal bold normal 3em/1.5 helvetica, arial, sans-serif; active learning: playing with styling text in this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce!

Document and website structure - Learn web development
a "typical website" could be structured something like this: html for structuring content the simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example.
...we aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound html structure, and then laying it out with css.
... we'll wait for this until you start to study css layout as part of the css topic.
... html layout elements in more detail it's good to understand the overall meaning of all the html sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development.

Structuring a page of content - Learn web development
previous overview: introduction to html structuring a page of content ready for laying it out using css is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
... objective: to test knowledge of web page structures, and how to represent a prospective layout design in markup.
... project brief for this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it.
... if you are getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.

The Firefox codebase: CSS Guidelines
for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right.
... testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1.
... 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css.
... layout & performance layout mixing xul flexbox and html flexbox can lead to undefined behaviour.

Mozilla Quirks Mode Behavior
miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 1049).
... block and inline layout [this quirk is present in almost standards mode.] line height (not line-height) calculations are different to fix bug 5821 and bug 24186 (some other issues are described in bug 22274).
... obsolete since gecko 1.9 (firefox 3) the basic table layout strategy ignores padding (on what) in quirks mode.
... obsolete since gecko 1.9 (firefox 3) the basic table layout strategy handles widths differently in some way.

about:memory
explicit ├───63.15 mb (32.91%) -- window-objects │ ├──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.75%) ++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├�...
... within each window's measurements are sub-trees for javascript ("js-compartment(...)" and "js-zone(...)"), layout, style-sheets, the dom, and other things.
...for example, in the "explicit" tree all dom and layout measurements are broken down by window by window, but in "other measurements" those measurements are aggregated into totals for the whole browser, as the following example shows.
... 26.77 mb (100.0%) -- window-objects ├──14.59 mb (54.52%) -- layout │ ├───6.22 mb (23.24%) ── style-sets │ ├───4.00 mb (14.95%) ── pres-shell │ ├───1.79 mb (06.68%) ── frames │ ├───0.89 mb (03.33%) ── style-contexts │ ├───0.62 mb (02.33%) ── rule-nodes │ ├───0.56 mb (02.10%) ── pres-contexts │ ├───0.47 mb (01.75%) ── line-boxes │ └───0.04 mb (00.14%) ── text-runs ├───6.53 mb (24.39%) ── style-sheets ├───5.59 mb (20.89%) -- dom │ ├──3.39 mb (12.66%) ── element-nodes │ ├──1.56 mb (05.84%) ── text-nodes │ ├──0.54 mb (02.03%) ── other │ └──0.10 mb (00.36%) ++ (4 tiny) └───0.06 mb (00.21%) ── ...

Property cache
shape native objects have a shape, a 24-bit unsigned integer such that: basic layout guarantee — if at time t0 the object x has shape s and at time t1 the object y has shape s, and no shape-regenerating gc occurred, then y at t1 has the same jsclass, jsobjectops, prototype, and property specs as x had at t0.
...(informally: objects with the same shape have the same prototype, class, and layout.) prototype chain shadowing guarantee — if at t0 the object x has shape s and a property x.p of x is found along the prototype chain on object x' of shape s', where x !== x', and the lookup called no resolve hooks or non-native lookup ops, and at t1 the object x has shape s, the object x' has shape s', and no shape-regenerating gc occurred, then at t1 the lookup for x.p still finds the same...
...(the existence of this property is guaranteed by the basic layout guarantee above.) (informally: two objects with the same shape have the same method properties.) branded object guarantee — if at time t0 the object x has shape s; and x is branded (x->branded()); and x has an own property p, which is a writable, function-valued data property with the stub getter and setter and a slot; and at time t1 an object y has shape s; and no shape-regenerating gc o...
...(the existence of this property is guaranteed by the basic layout guarantee above.) (informally: branded objects have unique shapes, and if x is branded, changing any of x's own methods will change its shape.) extensibility guarantee — if at time t0 an object x of shape s is extensible, and at time t1 an object y has shape s, and no shape-regenerating gc occurred, then at t1 y is extensible.

nsIAccessibleRetrieval
apresshell the presentation shell which contains layout info for the dom node.
... apresshell the presentation shell which contains layout info for the dom node.
... ashell the presentation shell which contains layout info for the dom node.
... ashell the presentation shell which contains layout info for the dom node.

nsIAccessibleTable
sarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsigned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray); note: renamed from getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long columnindex); boolean iscolumnselected(in long columnindex); boolean isprobablyforlayout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void unselectrow(in long rowindex); attributes attribute type description caption nsiaccessible the caption accessible for the table.
... isprobablyforlayout() use heuristics to determine if table is most likely used for layout.
... boolean isprobablyforlayout(); parameters none.
... return value true if the table is probably for layout, false if the table is probably not for layout.

nsISHEntry
components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
... layouthistorystate nsilayouthistorystate layouthistorystate for scroll position and form values.
... savelayoutstateflag boolean indicate whether layouthistorystate should be saved.
...void create( in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation ); parameters uri title inputstream layouthistorystate cachekey contenttype owner docshellid dynamiccreation violates the xpcom interface guidelines forgeteditordata() gets the owning pointer to the edi...

Index - Firefox Developer Tools
36 measure a portion of the page design, devtools, developer, firefox, layout, measure, measuring, measuring tool, tools using the measuring tool you can measure a specific area of a web page.
... 56 css flexbox inspector: examine flexbox layouts guide, inspector, tools, flexbox the flexbox inspector allows you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... 57 css grid inspector: examine grid layouts guide, inspector, tools the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... 82 performance developer tools, learn, performance, web performance the performance tool gives you insight into your site's general responsiveness, javascript and layout performance.

Keyboard - Web APIs
the keyboard interface of the the keyboard api provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
... methods keyboard.getlayoutmap() returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
... example the following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else.

KeyboardEvent.code - Web APIs
in other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.
... for example, the code returned is "keyq" for the q key on a qwerty layout keyboard, but the same code value also represents the ' key on dvorak keyboards and the a key on azerty keyboards.
... that makes it impossible to use the value of code to determine what the name of the key is to users if they're not using an anticipated keyboard layout.
... handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steering forward, left, backward, and right.

Key Values - Web APIs
[5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr.
...firefox and google chrome report the same, unless the japanese keyboard layout is in effect, in which case it generates "kanamode" instead.
...firefox reports the same, unless the japanese keyboard layout is in effect, in which case it generates "katakana" instead.
... [4] internet explorer (tested on release 9 and 11) reports "unidentified" for the zenkaku key; firefox 36 and earlier identify this key as "fullwidth" on japanese keyboard layouts and "unidentified" on all other keyboard layouts.

KeyboardEvent.key - Web APIs
the keyboardevent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as shift as well as the keyboard locale and layout.
... keyboardevent sequence example consider the event sequence generated when we interact with the shift and the 2 key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout.
... as we release the key 2, a keyup event is fired and the key property will maintain the string values @ and " for the different keyboard layouts respectively.
... as we finally release the key 2, a keyup event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer active.

WebGLRenderingContext.vertexAttribPointer() - Web APIs
the webglrenderingcontext.vertexattribpointer() method of the webgl api binds the buffer currently bound to gl.array_buffer to a generic vertex attribute of the current vertex buffer object and specifies its layout.
... usually, your 3d geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout.
...layout(location = 3) in vec4 position; would set the "position" attribute to index 3.
...t fetch('assets/geometry.bin'); const buffer = await response.arraybuffer(); consume array buffer with webgl first, we create a new vertex buffer object (vbo) and supply it with our array buffer: //bind array buffer to a vertex buffer object const vbo = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vbo); gl.bufferdata(gl.array_buffer, buffer, gl.static_draw); then, we specify the memory layout of the array buffer, either by setting the index ourselves: //describe the layout of the buffer: //1.

Basic concepts behind Web Audio API - Web APIs
several sources — with different types of channel layout — are supported even within a single context.
... each input or output is composed of one or more audio channels, which together represent a specific audio layout.
... output.l = input.l + 0.7071 * input.c output.r = input.r + 0.7071 * input.c output.sl = input.sl output.sr = input.sr other, non-standard layouts non-standard channel layouts are handled as if channelinterpretation is set to discrete.
... the specification explicitly allows the future definition of new speaker layouts.

@supports - CSS: Cascading Style Sheets
schrome full support 28edge full support 12firefox full support 22 full support 22 no support 17 — 22disabled disabled from version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true).
... full support ≤37chrome android full support 28firefox android full support 22 full support 22 no support 17 — 22disabled disabled from version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true).
... 1.5selector()chrome full support 83edge full support 83firefox full support 69 full support 69 full support 64disabled disabled from version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true).
... nonotes notes see bug 199237webview android full support 83chrome android full support 83firefox android full support 64disabled full support 64disabled disabled from version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true).

In Flow and Out of Flow - CSS: Cascading Style Sheets
in the previous guide i explained block and inline layout in normal flow.
...the list is displayed using flexbox to arrange the items into a row, however it too is participating in block and inline layout - the container has an outside display type of block.
... taking an item out of flow all elements are in-flow apart from: floated items items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow items create a new block formatting context (bfc) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page.
... see also learn layout: positioning ...

Subgrid - CSS: Cascading Style Sheets
level 2 of the css grid layout specification includes a subgrid value for grid-template-columns and grid-template-rows.
... subgrid for columns in the example below i have a grid layout with nine 1fr column tracks and four rows that are a minimum of 100px tall.
... specification specification status comment css grid layout module level 2 working draft initial definition of subgrids.
... see also on the mozilla developer youtube channel, see the videos laying out forms using subgrid and don't wait to use subgrid for better card layouts hello subgrid!

CSS Scrollbars - CSS: Cascading Style Sheets
ernetscrollbar-widthchrome no support noedge no support nofirefox full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
... android no support nochrome android no support nofirefox android full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
... full support 63disabled disabled from version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true).
... android no support nochrome android no support nofirefox android full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind the layout.css.scrollbar-color.enabled preference (needs to be set to true).

CSS Tutorials - CSS: Cascading Style Sheets
advanced-level css tutorials css also got new features allowing you to create complex layouts.
... though the simplest way to achieve such layout, they are more complex to use for people without too much experience.
... css multi-column layouts css3 introduces a new layout allowing you to easily define multiple columns in an element.
... css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be resized smoothly.

align-content - CSS: Cascading Style Sheets
the interactive example below use grid layout to demonstrate some of the values of this property.
... this only applies to flex layout items.
... this only applies to flex layout items.
... css flexible box layout modulethe definition of 'align-content' in that specification.

align-self - CSS: Cascading Style Sheets
normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... in static position of absolutely-positioned layouts, the keyword behaves as stretch.
...its behavior depends on the layout model, as described for justify-self.
... css flexible box layout modulethe definition of 'align-self' in that specification.

CSS Houdini
houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
...browsers parse the cssom — including layout, paint, and composite processes — before applying any style updates found in scripts.
... in addition, layout, paint, and composite processes are repeated for javascript style updates.
... css typed om reference css typed om guide css layout api designed to improve the extensibility of css, this api enables developers to write their own layout algorithms, like masonry or line snapping.

Tutorials
the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout.
... 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.
...we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.
... fluid grids design layouts that fluidly resize with the browser window, while still using a typographic grid.

Setting up an extension development environment - Archive of obsolete content
nglayout.debug.disable_xul_cache = true.
...to see them, prevent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true.
... warning: never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debugging.

Index of archived content - Archive of obsolete content
de embedding faq embedding mozilla in a java application using javaxpcom error console exception logging in javascript existing content extension frequently asked questions external cvs snapshots in mozilla-central fast graphics performance with html firefox block and line layout cheat sheet content states and the style system disabling interruptible reflow document loading - from load start to finding a handler documentation for bidi mozilla downloading nightly or trunk builds jss build instructions for osx 10.6 layout faq layout system overview multiple firefox pr...
...m standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing mode table cellmap table cellmap - border collapse table layout regression tests table layout strategy tamarin abcasm tamarin acceptance testing abc assembler tests actionscript acceptance tests tamarin acceptance test template actionscript perfo...
... 2006-12-01 mozilla-dev-tech-js-engine 2006-09-22 2006-09-29 2006-10-06 2006-10-13 2006-11-03 2006-11-10 2006-11-17 2006-11-24 2006-12-01 js-engine faq mozilla-dev-tech-layout 2006-09-29 2006-10-27 2006-11-03 2006-11-10 2006-11-17 2006-11-24 2006-12- 02 2006-12- 08 2006-12-24 mozilla-dev-tech-xpcom 2006-09-06 2006-09-22 2006-09-30 2006-10-13 ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
... html and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting dhtml, powerful programming languages like javascript, and additional media through embeddable third-party resources like flash, java, vrml, etc.
...data request \________ dynamically create a hidden iframe \_________ content is loaded -> call data binder data binder \_____ load xml||html data from iframe "container" \_____ send content to proper layout components the method presented here separates data request from data binding.

Space Manager Detailed Design - Archive of obsolete content
overview the space manager and related classes and structures are an important of the gecko layout system, specifically block layout.
...the class is only used in the layout module and cannot be exported outside of that module (nor does it need to be).
...it is meant to be called only when the layout module is being terminated.

Space Manager High Level Design - Archive of obsolete content
overview the space manager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them.
... when elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed.
...this information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.

Adding HTML Elements - Archive of obsolete content
(there are some reasons, and the main one concerns the control of the layout described later).
...you should always use xul features if they are available and you probably should not use tables for layout in xul.
... (there are xul elements for doing layout).

XUL Structure - Archive of obsolete content
for instance, you can use the xul layout types in other documents since they don't rely on the xul document type to function.
...to disable this mechanism, it is necessary to change the preference nglayout.debug.disable_xul_cache.
...or, just manually edit your user.js preferences file and add the following line: pref("nglayout.debug.disable_xul_cache", true); there are usually three different parts to a chrome package, although they are all optional.

XUL accessibility guidelines - Archive of obsolete content
<label control="login-username" value="username:"/> <textbox id="login-username"/> <label control="login-password">password:</label> <textbox id="login-password" type="password"/> larger forms can be difficult to layout and structure.
... flexible sizing one of the great things about xul is that visual layout is easy to control.
...verify that the layout and contrast is sufficient to distinguish interactive elements one from another and from static portions of the application.

nsIContentPolicy - Archive of obsolete content
shouldload() can be called while the dom and layout of the document involved is in an inconsistent state.
... query any dom properties that depend on layout (e.g., offset* properties).
... note: shouldprocess() can be called while the dom and layout of the document involved is in an inconsistent state.

reftest opportunities files - Archive of obsolete content
many of these were checked with the layout regression test tool, which has been described as difficult to use and it apparently reported a lot of regressions that were not errors.
...layout bugs that needs a reftest many of the bugzilla bugs in the core product, layout components with the in-testsuite?
...mlparser/tests/html/18308.html parser/htmlparser/tests/html/17003.html parser/htmlparser/tests/html/15204.html parser/htmlparser/tests/html/149877.html parser/htmlparser/tests/html/142965_1.html parser/htmlparser/tests/html/142965.html parser/htmlparser/tests/html/124788.html parser/htmlparser/tests/html/102370.html parser/htmlparser/tests/html/100466.html parser/htmlparser/tests/html/100397.html layout/mathml/tests/test.html layout/mathml/tests/symbol.html ...

Browser Feature Detection - Archive of obsolete content
ichness true false false right true true true size true false true speak true false true speakheader true false false speaknumeral true false false speakpunctuation true false false speechrate true false true stress true false false tablelayout true true true textshadow true false true top true true true unicodebidi true true true visibility true true true voicefamily true false true volume true false true widows true false true zindex true true true test code // document proper...
..., {name: 'richness', 'supported': false}, {name: 'right', 'supported': false}, {name: 'size', 'supported': false}, {name: 'speak', 'supported': false}, {name: 'speakheader', 'supported': false}, {name: 'speaknumeral', 'supported': false}, {name: 'speakpunctuation', 'supported': false}, {name: 'speechrate', 'supported': false}, {name: 'stress', 'supported': false}, {name: 'tablelayout', 'supported': false}, {name: 'textshadow', 'supported': false}, {name: 'top', 'supported': false}, {name: 'unicodebidi', 'supported': false}, {name: 'visibility', 'supported': false}, {name: 'voicefamily', 'supported': false}, {name: 'volume', 'supported': false}, {name: 'widows', 'supported': false}, {name: 'zindex', 'supported': false} ] }; function supports(object, featurese...
...eneratereport(document, 'domcore1', 'document'); generatereport(document, 'domcore2', 'document'); generatereport(document, 'domhtml', 'document'); generatereport(document.body.style, 'domcss1', 'document.body.style'); generatereport(document.body.style, 'domcss2', 'document.body.style'); window.onerror = oldonerror; see also browser detection and cross browser support comparison of layout engines web specifications supported in opera 9 what's new in internet explorer 7 (script) original document information author(s): (unknown) last updated date: updated march 16, 2003 copyright information: copyright © 2001-2003 netscape.

XForms Repeat Element - Archive of obsolete content
however, it can influence the layout of generated controls depending on its appearance attribute.
... default layout each generated control set is placed vertically.
... compact layout each generated control set is placed horizontally.

The Business Benefits of Web Standards - Archive of obsolete content
specifically, presentation is defined using layout-oriented css language.
...according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts.
...in some cases, where a significant portion of the audience is running netscape 4.x, use of simple tables for layout and css for font control may be a solution.

Desktop gamepad controls - Game development
here's the gamepadapi object, which contains useful variables and functions: var gamepadapi = { active: false, controller: {}, connect: function(event) {}, disconnect: function(event) {}, update: function() {}, buttons: { layout: [], cache: [], status: [], pressed: function(button, state) {} } axes: { status: [] } }; the controller variable stores the information about the connected gamepad, and there's an active boolean variable we can use to know if the controller is connected or not.
... the buttons variable contains the layout of a given controller (for example which buttons are where, because an xbox 360 layout may be different to a generic one), the cache containing the information about the buttons from the previous frame and the status containing the information from the current frame.
...tion() { gamepadapi.buttons.cache = []; for(var k=0; k<gamepadapi.buttons.status.length; k++) { gamepadapi.buttons.cache[k] = gamepadapi.buttons.status[k]; } gamepadapi.buttons.status = []; var c = gamepadapi.controller || {}; var pressed = []; if(c.buttons) { for(var b=0,t=c.buttons.length; b<t; b++) { if(c.buttons[b].pressed) { pressed.push(gamepadapi.buttons.layout[b]); } } } var axes = []; if(c.axes) { for(var a=0,x=c.axes.length; a<x; a++) { axes.push(c.axes[a].tofixed(2)); } } gamepadapi.axes.status = axes; gamepadapi.buttons.status = pressed; return pressed; }, the function above clears the buttons cache, and copies their status from the previous frame to the cache.

Flex - MDN Web Docs Glossary: Definitions of Web-related terms
the items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied.
... in addition <flex> can refer to a flexible length in css grid layout.
... learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering wrapping of flex items css flexbox guide: typical use cases of flexbox ...

Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
gecko is the layout engine developed by the mozilla project and used in many apps/devices, including firefox and firefox os.
... web browsers need software called a layout engine to interpret html, css, javascript, and embedded content (like images) and draw everything to your screen.
...this means that gecko includes, among other things, a networking stack, graphics stack, layout engine, a javascript virtual machine, and porting layers.

Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
css grid layout is a two-dimensional layout method enabling the laying out of content in rows and columns.
...these are our rows in css grid layout.
... learn more further reading css grid layout guide: basic concepts of grid layout css grid layout guide: box alignment in grid layout css grid layout guide: grids, logical values and writing modes ...

Grid Column - MDN Web Docs Glossary: Definitions of Web-related terms
a grid column is a vertical track in a css grid layout, and is the space between two vertical grid lines.
... when working with alignment in css grid layout, the axis down which columns run is known as the block, or column, axis.
... learn more property reference grid-template-columns grid-auto-columns grid grid-template further reading css grid layout guide: basic concepts of grid layout ...

Grid Row - MDN Web Docs Glossary: Definitions of Web-related terms
a grid row is a horizontal track in a css grid layout, that is the space between two horizontal grid lines.
... when working with alignment in css grid layout, the axis along which rows run is known as the inline, or row, axis.
... learn more property reference grid-template-rows grid-auto-rows grid grid-template further reading css grid layout guide: basic concepts of grid layout ...

Presto - MDN Web Docs Glossary: Definitions of Web-related terms
presto was the proprietary browser layout engine used to power the opera browser until version 15.
... since then, the opera browser is based on chromium, which uses the blink layout engine.
... learn more presto layout engine on wikipedia ...

Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
this can be smaller than the layout viewport, such as when the user has pinched-zoomed.
... the layout viewport remains the same, but the visual viewport became smaller.
... learn more general knowledge visual viewport api viewport on wikipedia a tale of two viewports (quirksmode) visual viewport in the mdn glossary layout viewport in the mdn glossary ...

Organizing your CSS - Learn web development
that might be things like the basic page layout, the header, navigation styling, and so on.
... to learn more about layout in css, see the learn css layout section.
...you can look up properties and values, explore our css cookbook for patterns to use, and read more in some of the specific guides such as our guide to css grid layout.

create fancy boxes - Learn web development
it's also a good idea, but not a prerequisite, to be familiar with some css layout basics.
...also, fancy boxes themselves are quite useless if they are not part of a larger layout.
... if you haven't checked this out yet, you should look at the basics of layout.

Learn to style HTML using CSS - Learn web development
the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout.
... 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.
...we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.

Common questions - Learn web development
what do common web layouts contain?
... when designing pages for your website, it's good to have an idea of the most common layouts.
... this article runs through some typical web layouts, looking at the parts that make up each one.

The web and web standards - Learn web development
responsive web design is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers.
... an obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers.
...there are technical considerations here (such as altering your layout so that it still works ok for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).

Introduction to the server side - Learn web development
this includes selecting and styling ui components, creating layouts, navigation, form validation, etc.
...client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g.
...note again how they have a common structure and layout, but the content for different products has been pulled from the database.

Introduction to automated testing - Learn web development
from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.
...within each device you can further adjust settings like monitor size, to get a good idea of how your site's layout works across different form factors.
... from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.

Gecko info for Windows accessibility vendors
contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based.
... windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use.
...contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based.

A bird's-eye view of the Mozilla framework
when an html, xml, svg or other type of document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the document pages.
... the nglayout engine also parses xul ui controls into a dom tree and handles rendering of the ui.
... core services modules such as the nglayout engine comprise the core application services available to other core modules, and xul packages core application modules are implemented as a set of one or more xpcom (cross-platform com) objects.

Creating reftest-based unit tests
to run: moz_layers_force_shmem_surfaces=1 make -c $(objdir) reftest-ipc note: right now, automation currently only runs layout/reftests/reftest-sanity/reftest.list!
... register them in the chrome package in layout/tools/reftest/jar.mn, and reference the chrome uris in the manifest file (see an example).
... references http://old.nabble.com/please-add-%22in-testsuite-%22-to-layout-bugs-when-resolving-them!-td7787412.html further documentation: layout/tools/reftest/readme.txt ...

Debugging Table Reflow
reflow the most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log.
... the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col wid...
...** colindex=2 isanonymous=0 constraint=3 widths=360 540 -1 -1 -1 -1 -1 -1 540 360 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=360 540 -1 -1 -1 -1 -1 -1 -1 360 **end col dump** ***end table dump*** the first column has already the minimum content width, the table column can't shrink below that, the desired content width of 540 twips, that's the space to layout cell 1 without wrapping the text and the 1230 which correspond to the style="width:80px" at the first cell.

How Mozilla's build system works
as an example, below is a portion of the makefile from layout/base/src: depth = ../../..
... topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = layout library_name = gkbase_s # requires and cppsrcs omitted here for brevity # # we don't want the shared lib, but we want to force the creation of a static lib.
... topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = layout library_name = gklayout export_library = 1 is_component = 1 module_name = nslayoutmodule cppsrcs = \ nslayoutmodule.cpp \ $(null) shared_library_libs = \ $(dist)/lib/$(lib_prefix)gkhtmlbase_s.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)gkhtmldoc_s.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)gk...

Gecko
gecko is the name of the layout engine developed by the mozilla project.
... it was originally named nglayout.
... introduction to layout in mozilla tech talk on layout.

Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images inside table cells.
... this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
... (see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.

Mozilla Style System Documentation
style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved back into the layout dll) represents the style data for a css formatting object.
... in the layout system, these formatting objects are described as frames (interface nsiframe), although a pair of frames represents table formatting objects.
...it should be consolidated so that the style system code can be moved back within the layout dll and nsistylecontext can be de-com-ified.

Profiling with the Firefox Profiler
synchronous re-flow can be caused by js that, for example, makes changes to the page content in a loop and queries about the layout of the page in that same loop.
... a presshell:flush means that we are either recomputing styles or recomputing layout.
...if you notice these things happening in a loop, that's a bug to be fixed, since we're likely "layout thrashing".

Migration to HG
each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ this migration has been used as an opportunity to change the layout of the source directories.
... besides the new layout, the build system hasn't changed.
...the first releases using the new code layout will be nspr 4.10 and nss 3.15 ...

JS_DumpHeap
when tracing a thing, the gc needs to know about the layout of the object it is looking at.
... there are a fixed number of different layouts that the gc knows about.
... the "trace kind" is a static map which tells which layout a gc thing has.

Index
116 making cross-thread calls using runnables guide, threads, xpcom in the mozilla platform, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread.
...this accessible get return the dom node and layout frame with the uniform attributes for this range of text.
... 1027 nsitreeboxobject interfaces, xpcom, xpcom interface reference the nsitreeboxobject interface contains information about the size and layout of a tree.

imgIContainer
nsiframe getrootlayoutframe(); violates the xpcom interface guidelines pruint16 gettype(); violates the xpcom interface guidelines void init(in print32 awidth, in print32 aheight, in imgicontainerobserver aobserver); obsolete since gecko 2.0 void lockimage(); void removeframe(in gfxiimageframe item); obsolete since gecko 1.9.2 void requestdecode(); void requestd...
...return value missing description exceptions thrown missing exception missing description violates the xpcom interface guidelines getrootlayoutframe() if this image is type_vector, that is really an embedded svg document, and this method returns a pointer to the root nsiframe of that document.
...nsiframe getrootlayoutframe(); parameters none.

nsIAccessibleEvent
event_asynch_show 0x0004 a hidden object is shown -- this is a layout occurrence and is thus asynchronous.
... event_asynch_hide 0x0005 an object is hidden -- this is a layout occurrence and is thus asynchronous.
... event_asynch_significant_change 0x0006 an object had a significant layout change which could affect the type of accessible object -- this is a layout occurrence and is thus asynchronous.

3D view - Firefox Developer Tools
makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d view can help find where you've gone wrong.
... often, layout problems are caused by improper nesting of content.
... you can get a look at how your page is structured to see if there may be ways to optimize your layout.

UI Tour - Firefox Developer Tools
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 ce...
... layout view the layout view displays the box model of the page.
... to learn more about the layout view, see examine and edit the box model.

Console messages - Firefox Developer Tools
a reflow is the name given to the operation in which the browser calculates the layout of all or part of the page.
... reflows occur when a change has happened to a page that the browser thinks affects the layout.
... synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is resized or some javascript modifies an element's css — the layout is not recalculated immediately.

Firefox Developer Tools
closes the developer tools page inspector view and edit page content and layout.
... visualise many aspects of the page including the box model, animations, and grid layouts.
... performance tools analyze your site's general responsiveness, javascript, and layout performance.

Background Tasks API - Web APIs
by the time your callback is run, the current frame has already finished drawing, and all layout updates and computations have been completed.
... if you make changes that affect layout, you may force a situation in which the browser has to stop and do recalculations that would otherwise be unnecessary.
...for example, anything which might affect layout should be avoided.

Gamepad.mapping - Web APIs
the gamepad.mapping property of the gamepad interface returns a string indicating whether the browser has remapped the controls on the device to a known layout.
... currently there is only one supported known layout–the standard gamepad.
... if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.

Using the Gamepad API - Web APIs
mapping: a string indicating whether the browser has remapped the controls on the device to a known layout.
... currently there is only one supported known layout — the standard gamepad.
... if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.

HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
...because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width information.
... example in this example, a blog-like layout is created, displaying some text and an image which for which three size points are specified, depending on the width of the window.

Using the MediaStream Recording API - Web APIs
why was css2 layout so awkward?" it allows you do a calculation to determine the computed value of a css unit, mixing different units in the process.
...flexbox could be the answer here, but it's a bit overkill for such a simple layout.
...font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, ...

Window.innerWidth - Web APIs
more precisely, innerwidth returns the width of the window's layout viewport.
... the interior height of the window—the height of the layout viewport—can be obtained from the innerheight property.
... syntax let intviewportwidth = window.innerwidth; value an integer value indicating the width of the window's layout viewport in pixels.

ARIA: grid role - Accessibility
uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids).
... even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design.
...dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.preventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.

update - CSS: Cascading Style Sheets
none once it has been rendered, the layout can no longer be updated.
... slow the layout may change dynamically according to the usual rules of css, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation.
... fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animations can be used.

Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
... key concepts and terminology multicol is unlike any of the other layout methods we have in css in that it fragments the content, including all descendent elements, into columns.
... .container { columns: 2 200px; } next steps in this guide we've learned the basic use of multiple-column layout.

Styling Columns - CSS: Cascading Style Sheets
this property was originally defined in the multi-column layout specification.
... however, it is now defined in box alignment in order to unify gaps between boxes in other specifications such as css grid layout.
...in other layout methods the initial value for column-gap is 0.

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
useful fallback techniques given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another.
... the specification defines what happens if you use other layout methods on an element which then becomes a flex item.
...if you decide the ie11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support.

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
i have a layout using css grid, the grid container has a width applied and i am using the align-self and justify-self properties to align the items.
...change writing-mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout.
...as we saw above, newer css layout methods such as flexbox and grid layout use the concepts of block and inline rather than right and left/top and bottom when aligning items.

Card - CSS: Cascading Style Sheets
recipe download this example choices made the card is laid out using css grid layout despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks.
... for the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above.
... see the columns recipe for demonstrations of each of these layout methods.

Sticky footers - CSS: Cascading Style Sheets
choices made in the above example we achieve the sticky footer using css grid layout.
...we then create a single column grid layout with three rows, one row for each part of our layout.
... alternate method if you need compatibility with browsers that do not support grid layout you can also use flexbox to create a sticky footer.

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
...rt only for mapped valuesfirefox partial support 71notes partial support 71notes notes firefox 71 adds internal support only for mapped values no support 69 — 71notes disabled notes firefox 69 adds internal support only for mapped valuesdisabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
...lchrome full support 79edge full support 79firefox full support 71 full support 71 no support 69 — 71disabled disabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and-height-map-to-aspect-ratio.enabled preference (needs to be set to true).

box-align - CSS: Cascading Style Sheets
warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction.
... /* keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical.

box-pack - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... the -moz-box-pack and -webkit-box-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout.
... /* keyword values */ box-pack: start; box-pack: center; box-pack: end; box-pack: justify; /* global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical.

<display-internal> - CSS: Cascading Style Sheets
some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill.
... this page defines those "internal" display values, which only have meaning within that particular layout mode.
... examples css tables example the following example demonstrates laying out a simple form using css table layout.

gap (grid-gap) - CSS: Cascading Style Sheets
css grid layout initially defined the grid-gap property.
... examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div><...
.../div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.

order - CSS: Cascading Style Sheets
ding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
... the flexible box layout module automatically creates blocks of equal vertical size and uses as much horizontal space as available.
.....</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; } result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification.

Guide to scroll anchoring - CSS: Cascading Style Sheets
you can check whether disabling scroll anchoring fixes the issue in firefox by changing layout.css.scroll-anchoring.enabled to false in about:config.
... if it does, you can check what node is firefox using as the anchor using the layout.css.scroll-anchoring.highlight switch.
... in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web developers on the chromium blog implement a pin-to-bottom scrolling element using scroll anchoring ...

place-content - CSS: Cascading Style Sheets
the align-content and justify-content properties) in a relevant layout system such as grid or flexbox.
... this only applies to flex layout items.
... this only applies to flex layout items.

HTML elements reference - HTML: Hypertext Markup Language
it has no effect on the content or layout until styled using css.
... <multicol> the html multi-column layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used.
...it was devised by netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to web pages without actually using an image.

Inline elements - HTML: Hypertext Markup Language
since this is a presentational characteristic it is nowadays specified by css in the flow layout.
...the <p> element totally changes the layout of the text, splitting it into three segments: the text before the <p>, then the <p>'s text, and finally the text following the <p>.
...frame> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr> see also block-level elements html element reference display content categories block and inline layout in normal flow ...

HTTP Index - HTTP
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol.
... 134 feature-policy: layout-animations directive, feature-policy, http, reference, layout-animations the http feature-policy header layout-animations directive controls whether the current document is allowed to show layout animations.
... 146 feature-policy: unsized-media directive, feature-policy, http, reference the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete.

Dialogs and Prompts - Archive of obsolete content
add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below).
... explicit if you are not satisfied with the layout of predefined buttons in dialog, you can put explicit button elements in your xul file and add a dlgtype attribute to them.

The Box Model - Archive of obsolete content
the xul box model is a significant improvement over the html layout model, which is mostly vertical.
...once you grasp this simple idea, you'll be able to use the dom inspector and css to mold xul elements and layouts with great precision and flexibility.

Mozilla Application Framework in Detail - Archive of obsolete content
gecko is the premier cross-platform, full-featured, mature and well-tested layout engine available, providing robust and high quality support for a massive array of standards.
...gecko consists roughly of an html parser and xml parser, a dom implementation, a css parser and style system, and the code for css-based and html-based layout and rendering.

Plugin Architecture - Archive of obsolete content
nsobjectframe the frame responsible for displaying plugins nsplugininstanceowner glue between plugin code (modules/plugin) and layout code (layout/generic).
...(the event is necessary because by the time hasnewframe is called, the frame isn't fully set up yet) in layout note: some of this should move to content an instance owner is created the window passed to the plugin is adjusted (the npwindow, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call back to the instance owner / the object frame in order to create a widget to draw to (if the plugin is not windowless) nsplugininstanceowner:...

Using cross commit - Archive of obsolete content
using the script quick overview there are a couple of common ways to use cross-commit: land something simultaneously on the trunk and mozilla_1_8_branch # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on trunk and branch at once # make sure to use -m "commit message" when doing so tools/cross-commit -m "fix some sort of security bug" layout/base/nscaret.h land something on two other branches that has already landed on the trunk # update to the first branch you want to land on cvs update -rmozilla_1_8_branch layout/base/nscaret.h # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on all the branches at once # make sure to use -m "commit message" when doing so tools/cross-commit --moz18 ...
...--branch mozilla_1_8_0_branch -m "fix some sort of security bug" layout/base/nscaret.h notes note that you must use a -m option with a cvs checkin message.

Elements - Archive of obsolete content
by setting this attribute, you can have an element have the layout and display characteristics of an existing element.
... note: prior to firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to get layout information from within the constructor could return out of date information.

Building accessible custom components in XUL - Archive of obsolete content
the flex attributes are simply for layout.
...the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, unrelated text labels.

XUL Events - Archive of obsolete content
attribute: oninput overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'.
...this applies to boxes and other layout elements with a css overflow property other than 'visible'.

The Joy of XUL - Archive of obsolete content
these applications are easily customized with alternative text, graphics, and layout so they can be readily branded or localized for various markets.
...the layout and appearance of xul applications can be altered independently of the application definition and logic.

Creating a Wizard - Archive of obsolete content
the exact layout will vary according to the os for the platform.
...a typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between.

grid - Archive of obsolete content
if you are looking for information on css grids, you should go to our css grid layout page instead.
... « xul reference home [ examples | attributes | properties | methods | related ] a grid is a layout type that arranges elements in rows and columns.

Custom app bundles for Mac OS X - Archive of obsolete content
application bundle layout application bundles are essentially just directory structures that conform to a standard layout and naming convention.
... example.manifest defaults/ preferences/ app-prefs.js (this provides some default values for preferences) application bundle contents in addition to the standard directory hierarchy that's required of all mac os x applications, as shown above in application bundle layout, there are some specific rules for what content goes where: the top-level directory is given a name that ends with .app which designates the whole package as an application bundle.

Deploying XULRunner - Archive of obsolete content
this should be fixed with xulrunner 11.0 with xulrunner 11.0 you may need to copy "gkmedias.dll" from the xulrunner directory to the root directory mac os x on mac os x, the exact layout of your application bundle depends on which version of xulrunner you're using.
...other executables and libraries the core changes to xul and gecko that require this new file layout were implemented in gecko 34, except that the xulrunner application was not updated to know about the change, so it will report an error: "unable to load xpcom." xulrunner was fixed in gecko 39.

2006-11-10 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 4 - november 10, 2006 announcements none this week.
... applying site- and page-specific settings during layout discussion on the best possible solution for integrating firefox 3 with the ability to apply site- and page-specific user settings during layout.

background-size - Archive of obsolete content
both layout engines are mentioned in the table.
...(sheppy 07 december 2009) we should encourage web developers to ask for layout engines, not for browsers.

Archive of obsolete content
on october 11, 2002, wired launched a brand-new site design that uses validating xhtml for its structure and a small collection of css files for its layout.
...it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

Efficient animation for web games - Game development
speaking of the assumptions that the browser can make, you should avoid causing it to have to re-layout during animations.
...something to be careful of is that overflow may end up causing re-layout, or other expensive calculations.

Blink - MDN Web Docs Glossary: Definitions of Web-related terms
blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
... specifically, blink began as a fork of the webcore library in webkit, which handles layout, rendering, and dom, but now stands on its own as a separate rendering engine.

Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
in a css grid layout, a grid cell is the smallest unit you can have on your css grid.
...ng: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns further reading css grid layout guide: basic concepts of grid layout definition of grid cells in the css grid layout specification ...

Grid container - MDN Web Docs Glossary: Definitions of Web-related terms
using the value grid or inline-grid on an element turns it into a grid container using css grid layout, and any direct children of this element become grid items.
... learn more property reference grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows grid grid-template further reading css grid layout guide: basic concepts of grid layout ...

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using css grid layout.
...id-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-column-start: col1-start; grid-column-end: col3-start; grid-row-start: row1-start; grid-row-end: rows-end; } learn more property reference grid-template-columns grid-template-rows grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row further reading css grid layout guide: basic concepts of grid layout css grid layout guide: line-based placement with css grid css grid layout guide: layout using named grid lines css grid layout guide: css grids, logical values and writing modes definition of grid lines in the css grid layout specification ...

Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties.
... learn more property reference grid-column-gap grid-row-gap grid-gap further reading css grid layout guide: basic concepts of grid layout definition of gutters in the css grid layout specification ...

Houdini - MDN Web Docs Glossary: Definitions of Web-related terms
houdini is a set of low level apis that give developers the power to extend css, providing the ability to hook into the styling and layout process of a browser’s rendering engine.
...browsers create the cssom — including layout, paint, and composite processes — before applying any style updates found in scripts: layout, paint, and composite processes are repeated for updated javascript styles to be implemented.

Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
also so that a user can browse features to translate or localize the application to access all the content without breaking the layout.
... internationalization includes support for multiple character sets (usually via unicode), units of measure (currency, °c/°f, km/miles, etc.), date and time formats, keyboard layouts, and layout and text directions.

Trident - MDN Web Docs Glossary: Definitions of Web-related terms
trident (or mshtml) was a layout engine that powered internet explorer.
... learn more trident layout engine on wikipedia ...

Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
this can be smaller than the layout viewport, such as when the user has pinched-zoomed.
... learn more general knowledge visual viewport api viewport on wikipedia a tale of two viewports (quirksmode) viewport in the mdn glossary layout viewport in the mdn glossary ...

What is accessibility? - Learn web development
these include difficulty with understanding content, remembering how to complete tasks, and confusion caused by inconsistent webpage layouts.
... a good foundation of accessibility for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; consistent webpage layout and navigation; familiar elements, such as underlined links blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; website authentication as easy as possible without compromising security; and making forms easy to complete, such as with clear error messages and simple error recovery.

Advanced styling effects - Learn web development
note: don't worry if you don't understand some of the layout properties above, like position, top, bottom, z-index, etc.
... we will cover these in detail in our css layout module.

Use CSS to solve common problems - Learn web development
ct elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inline-block?
... general how to calculate specificity of a css selector how to control inheritance in css advanced effects how to use filters in css how to use blend modes in css layout using css flexible boxes using css multi-column layouts using css generated content ...

Front-end web developer - Learn web development
modules introduction to html (15–20 hour read/exercises) multimedia and embedding (15–20 hour read/exercises) html tables (5–10 hour read/exercises) styling and layout with css time to complete: 90–120 hours prerequisites it is recommended that you have basic html knowledge before starting to learn css.
... modules css first steps (10–15 hour read/exercises) css building blocks (35–45 hour read/exercises) styling text (15–20 hour read/exercises) css layout (30–40 hour read/exercises) additional resources css layout cookbook interactivity with javascript time to complete: 135–185 hours prerequisites it is recommended that you have basic html knowledge before starting to learn javascript.

CSS basics - Learn web development
how do i make content display at a certain location in the (webpage) layout?
... css layout is mostly based on the box model.

Aprender y obtener ayuda - Learn web development
youtube is an obvious one, with channels such as mozilla layout land, mozilladeveloper, and google chromedevelopers providing many useful videos.
... for example, if you are looking at a task of "build a simple two-column website", you could break it down as follows: create the html structure work out basic site typography work out a basic color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer.

CSS performance optimization - Learn web development
browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees.
...this allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the dom and not the entire page.

Mozilla accessibility architecture
readers of this document should be familiar with interfaces, the w3c dom, xul and the concept of a layout object tree.
...why we need accessibility cache the accessibility cache has a number of purposes: stability: because the gecko dom and layout teams want to avoid memory bloat where necessary, we could not afford to use 4 bytes on dom or layout nodes to point back to accessible objects.

Accessible Toolkit Checklist
focusable to avoid extra work, utilize implementing an msaa server mnemonics ability to define in xml for any widget with a text label (via attribute or a preceding char in label) automatically define mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from ...
... msaa support, including the haspopup state default buttons ability to define in xml enter key fires it, but not when another widget has focus that needs the enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that h...

Adding a new CSS property
this will cause tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "./mach mochitest -f plain layout/style/".
... finishing up then you'll need to rebuild and run the mochitests in layout/style (./mach mochitest -f plain layout/style/).

What to do and what not to do in Bugzilla
a guide for confirming layout bugs (bugs in web page rendering) reporting new bugs you should report a bug in the new state after going through the triaging process as described in the two above-mentioned guides.
...bugs covered by this exception should not be invalidated by anyone other than the module owner or module peer; for bugs involving modules like layout or content, attach a test case to the bug and then cc one of the owners or peers.

Roll your own browser: An embedding how-to
activex control: an activex control allowing for embedding the gecko layout engine.obsolete since gecko 7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory.
... activex control: an activex control for mozilla using the gecko layout engine.

JNI.jsm
4); // 75 } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } casting this example shows how to cast, the casting happens at jni.classes.android.view.windowmanager.__cast__(wm) below: function main() { var my_jenv; try { my_jenv = jni.getforthread(); var sig = { windowmanager: 'landroid/view/windowmanager;', windowmanager_layoutparams: 'landroid/view/windowmanager$layoutparams;', viewgroup_layoutparams: 'landroid/view/viewgroup$layoutparams;', view: 'landroid/view/view;', void: 'v', context: 'landroid/content/context;', string: 'ljava/lang/string;', object: 'ljava/lang/object;', geckoappshell: 'lorg/mozilla/gecko/geckoappshell;' }...
...ng } // http://developer.android.com/reference/android/content/context.html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: 'addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removeview', sig: '(' + sig.view + ')' + sig.void }] }); var acontext = geckoappshell.getcontext(); var wm = acontext.getsystemservice(context.window_service); var wm_casted = jni.classes.android.view.windowmanager.__cast__(wm); } finally { if (my_je...

SVN for Localizers
here's the layout you will find within the projects/mozilla.com directory: navigating from the command-line with your svn client, you'll find three directories within projects/mozilla.com.
... working with svn now that you understand the mozilla svn repository layout (in particular the layout for mozilla.com), let's get some files into your hands to start localizing!

SpiderMonkey Internals
only jit code really depends on the layout--everything else in the engine interacts with values through functions like val.isdouble().
... most parts of the jit also avoid depending directly on the layout: the files punboxassembler.h and nunboxassembler.h are used to generate native code that depends on the value layout.

Web Replay
this non-determinism is prevented from spreading too far with the following techniques: different pointer values can affect the internal layout of hash tables.
... all code whose behavior is recorded is compiled into gecko (rather than being part of immutable, usually closed-source libraries) and can be lightly modified to deal with behaviors that function intercepting cannot handle, such as varying hash table layouts and the ordering of atomic accesses.

Building the WebLock UI
<separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul.
...the parent of the textbox that users enter an url into is something called an <hbox/>, which is a layout widget - often invisible - that controls the way its child elements are rendered.

nsIBoxObject
layout/xul/base/public/nsiboxobject.idlscriptable please add a summary to this article.
... layoutmanager nsiboxlayoutmanager obsolete since gecko 1.9 nextsibling nsidomelement the next sibling of the box, in box-ordinal-group order.

nsIDocShell
layouthistorystate nsilayouthistorystate loadedtransindex long keeps track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load.
... shouldsavelayoutstate boolean indicates whether the current page can be cached.

nsITreeBoxObject
the nsitreeboxobject interface contains information about the size and layout of a tree.
... /layout/xul/base/src/tree/public/nsitreeboxobject.idlscriptable please add a summary to this article.

XUL Overlays
inserting the following processing instruction before the doctype declaration in a base file tells the layout engine to load the named overlay file: <?xul-overlay href="chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g., chrome://navigator/content/navigatoroverlay.xul).
... the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided.

Index
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object model.
... 75 building a thunderbird extension 2: extension file layout extensions, thunderbird extensions are packaged and distributed in archive files (also known as bundles), with the xpi (pronounced “zippy”) file extension.

Migrating from Firebug - Firefox Developer Tools
inspect box model in firebug the box model can be inspected via the layout side panel.
...it also provides information about html parsing or layout.

Performance - Firefox Developer Tools
the performance tool gives you insight into your site's general responsiveness, javascript and layout performance.
... you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was performing, such as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording.

AudioNode.channelInterpretation - Web APIs
output.l = input.l + 0.7071 * input.c output.r = input.r + 0.7071 * input.c output.sl = input.sl output.sr = input.sr other, non-standard layouts non-standard channel layouts are handled as if channelinterpretation is set to discrete.
... the specification explicitly allows the future definition of new speaker layouts.

Managing screen orientation - Web APIs
this lets content adjust its layout using css, based on whether the browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width).
... adjusting layout based on the orientation one of the most common cases for orientation changes is when you want to revise the layout of your content based on the orientation of the device.

HTMLElement - Web APIs
htmlelement.offsetheight read only returns a double containing the height of an element, relative to the layout.
... htmlelement.offsetwidth read only returns a double containing the width of an element, relative to the layout.

HTMLImageElement - Web APIs
htmlimageelement.x read only an integer indicating the horizontal offset of the left border edge of the image's css layout box relative to the origin of the <html> element's containing block.
... htmlimageelement.y read only the integer vertical offset of the top border edge of the image's css layout box relative to the origin of the <html> element's containing block.

Timing element visibility with the Intersection Observer API - Web APIs
this avoids the risk of lengthy layout work being done when you update the ad, which could happen if you first delete the old element then insert a new one.
...��they're good for you!" }, { bgcolor: "aquamarine", title: "millionsoffreebooks.whatever", body: "read classic literature online free!" }, { bgcolor: "lightgrey", title: "3.14 shades of gray: a novel", body: "love really does make the world go round..." }, { bgcolor: "#fee", title: "flexbox florist", body: "when life's layout gets complicated, send flowers." } ]; let adbox, title, body, timerelem; let ad = ads[math.floor(math.random()*ads.length)]; if (replacebox) { adobserver.unobserve(replacebox); adbox = replacebox; title = replacebox.queryselector(".title"); body = replacebox.queryselector(".body"); timerelem = replacebox.queryselector(".timer"); } else { adbox = document.cr...

KeyboardEvent: code values - Web APIs
0x0067 "f16" "f20" 0x0068 "f17" "f21" 0x0069 "f18" "f22" 0x006a "f19" "f23" 0x006b "f20" "f24" 0x006c "f21" "" 0x006d "f22" "" 0x006e "f23" "" 0x006f "unidentified" "" 0x0070 "kanamode" "" 0x0071 (hanja key without korean keyboard layout) "lang2" "" 0x0072 (han/yeong key without korean keyboard layout) "lang1" "" 0x0073 "intlro" "" 0x0074, 0x0075 "unidentified" "" 0x0076 "f24" "" 0x0077, 0x0078 "unidentified" "" 0x0079 "convert" "" 0x007a "unidentified" "" 0x007b "nonconvert" "" ...
...rowserstop" "browserstop" 0xe069 "browserforward" "browserforward" 0xe06a "browserback" "browserback" 0xe06b "launchapp1" "" 0xe06c "launchmail" "" 0xe06d "launchmediaplayer" ("mediaselect" prior to firefox 49) "" 0xe06e ～ 0xe0f0 "unidentified" "" 0xe0f1 (hanja key with korean keyboard layout) "lang2" "" 0xe0f2 (han/yeong key with korean keyboard layout) "lang1" "" code values on mac on mac os x, it's hard to get scancode or something which can distinguish a physical key from a key event.

KeyboardEvent - Web APIs
warning: this ignores the user's keyboard layout, so that if the user presses the key at the "y" position in a qwerty keyboard layout (near the middle of the row above the home row), this will always return "keyy", even if the user has a qwertz keyboard (which would mean the user expects a "z" and all the other properties would indicate a "z") or a dvorak keyboard layout (where the user would expect an "f").
...a user may be using one keyboard layout while typing text in a different language.

Microsoft API extensions - Web APIs
touch apis element.mszoomto() mscontentzoom msmanipulationevent msmanipulationstatechanged msmanipulationviewsenabled mspointerhover media apis htmlvideoelement.msframestep() htmlvideoelement.mshorizontalmirror htmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplayback htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msinsertaudioeffect() mediaerror.msextendedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmedia...
...protectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...

MouseEvent.button - Web APIs
users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.
...ressed, usually the left button or the un-initialized state 1: auxiliary button pressed, usually the wheel button or the middle button (if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the browser back button 4: fifth button, typically the browser forward button as noted above, buttons may be configured differently to the standard "left to right" layout.

SVGTextContentElement - Web APIs
svgtextcontentelement.getstartpositionofchar() returns a dompoint representing the position of a typographic character after text layout has been performed.
... svgtextcontentelement.getendpositionofchar() returns a dompoint representing the trailing position of a typographic character after text layout has been performed.

Signaling and video calling - Web APIs
to hang up the call: <div class="flexchild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button" onclick="hangupcall();" disabled> hang up </button> </div> </div> the page structure defined here is using <div> elements, giving us full control over the page layout by enabling the use of css.
... we'll skip layout detail in this guide, but take a look at the css on github to see how we handled it.

Window.getComputedStyle() - Web APIs
originally, css 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but css 2.1 redefined them as pre-layout, and used values as post-layout.
...an example difference between pre- and post-layout values includes the resolution of percentages for width or height, as those will be replaced by their pixel equivalent only for used values.

Window.innerHeight - Web APIs
the value of innerheight is taken from the height of the window's layout viewport.
... syntax let intviewportheight = window.innerheight; value an integer value indicating the window's layout viewport height in pixels.

Worklet - Web APIs
compositor thread css animation worklet api layoutworklet for defining the positioning and dimensions of custom elements.
... css layout api for 3d rendering with webgl, you don't use worklets.

ARIA: Navigation Role - Accessibility
by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically.
...using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

ARIA: Region role - Accessibility
by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically.
...using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

Perceivable - Accessibility
the order should be made obvious by use of correct semantic elements (e.g., headings, paragraphs), with css being used to create any unusual layout styles, irrespective of the markup.
... 1.4.10 reflow (aa) added in 2.1 no horizontal scrolling for left-to-right languages (like english) or right-to-left languages (like arabic) no vertical scrolling for top-to-bottom languages (like japanese) except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table) understanding reflow 1.4.11 non-text contrast(aa) added in 2.1 minimum color contrast ratio of 3:1 for user interface components and graphical objects.

:scope - CSS: Cascading Style Sheets
no support 20 — 32disabled disabled from version 20 until version 32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true).
... full support 20disabled disabled from version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true).

:where() - CSS: Cascading Style Sheets
in other versions of firefox it is behind a pref — layout.css.is-where-selectors.enabled).
...es in chrome, visit chrome://flags.edge no support nofirefox full support 78 full support 78 full support 77notes disabled notes enabled by default in firefox nightly.disabled from version 77: this feature is behind the layout.css.is-where-selectors.enabled preference (needs to be set to enabled).

Box alignment in Flexbox - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox.
... as this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.

Handling content breaks in multicol - CSS: Cascading Style Sheets
content is broken between column boxes in multiple-column layout in the same way that it is broken between pages in paged media.
...in most cases, the fallback to breaks not being controlled is something you can live with, with suboptimal breaking being untidy rather than a disaster to your layout.

CSS Display - CSS: Cascading Style Sheets
reference css properties display css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout...
... methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specifications specification status comment css display module level 3the definition of 'display' in that specification.

Logical properties for floating and positioning - CSS: Cascading Style Sheets
the logical properties and values specification contains logical mappings for the physical values of float and clear, and also for the positioning properties used with positioned layout.
... example: inset properties for positioned layout positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow.

Center an element - CSS: Cascading Style Sheets
in the future we may be able to center elements without needing to turn the parent into a flex container, as the box alignment properties used here are specified to apply to block layout too.
... however, support is currently limited for box alignment properties on block layout, so currently centering using flexbox is the most robust way to achieve this.

Grid wrapper - CSS: Cascading Style Sheets
r supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.
... accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more details).

CSS reference - CSS: Cascading Style Sheets
lignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underli...
... concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.style htmlelement.style.csstext (just style) element.classname elem...

animation-delay - CSS: Cascading Style Sheets
full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).
... 16 full support 16 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).

animation-direction - CSS: Cascading Style Sheets
16 full support 16 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).
... 16 full support 16 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).

border-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <ca...
...ption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqu...

box-flex - CSS: Cascading Style Sheets
it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).
... the -moz-box-flex and -webkit-box-flex css properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

box-lines - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... multiple box elements layout in multiple rows or columns.

break-after - CSS: Cascading Style Sheets
css multi-column layout modulethe definition of 'break-after' in that specification.
... support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox no support noie full suppor...

break-before - CSS: Cascading Style Sheets
css multi-column layout modulethe definition of 'break-before' in that specification.
... support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full sup...

break-inside - CSS: Cascading Style Sheets
css multi-column layout modulethe definition of 'break-inside' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera full support 37 full support 37 ...

caption-side - CSS: Cascading Style Sheets
top-outside the caption box should be positioned above the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.
... bottom-outside the caption box should be positioned below the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.

column-rule-color - CSS: Cascading Style Sheets
the column-rule-color css property sets the color of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-color: blue; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-color' in that specification.

column-rule-style - CSS: Cascading Style Sheets
the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: dashed; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-style' in that specification.

column-rule-width - CSS: Cascading Style Sheets
the column-rule-width css property sets the width of the line drawn between columns in a multi-column layout.
... don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-width' in that specification.

column-rule - CSS: Cascading Style Sheets
the column-rule shorthand css property sets the width, style, and color of the line drawn between columns in a multi-column layout.
...</p> css .content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2px #33f; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule' in that specification.

column-width - CSS: Cascading Style Sheets
the column-width css property sets the ideal column width in a multi-column layout.
... css multi-column layout modulethe definition of 'column-width' in that specification.

<display-outside> - CSS: Cascading Style Sheets
the <display-outside> keywords specify the element’s outer display type, which is essentially its role in flow layout.
...this will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

flex-basis - CSS: Cascading Style Sheets
note: this value was not present in the initial release of flexible box layout, and thus some older implementations will not support it.
...ex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-basis' in that specification.

font-variant-caps - CSS: Cascading Style Sheets
schrome full support 52edge full support 79firefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... full support 52chrome android full support 52firefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).

font-variant-position - CSS: Cascading Style Sheets
itionchrome no support noedge no support nofirefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... no support nochrome android no support nofirefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).

font-variant - CSS: Cascading Style Sheets
dchrome full support 52edge full support 79firefox full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... full support 52chrome android full support 52firefox android full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).

grid-template-columns - CSS: Cascading Style Sheets
<length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
... candidate recommendation initial definition css grid layout module level 2the definition of 'subgrid' in that specification.

grid-template-rows - CSS: Cascading Style Sheets
> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
... candidate recommendation initial definition css grid layout module level 2the definition of 'subgrid' in that specification.

grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css gr...
...id layoutthe definition of 'grid' in that specification.

<length> - CSS: Cascading Style Sheets
note: these units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.
... absolute length units absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout.

margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .examp...
... initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...

row-gap (grid-row-gap) - CSS: Cascading Style Sheets
css grid layout initially defined the grid-row-gap property.
...-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div...

text-size-adjust - CSS: Cascading Style Sheets
to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.
...when an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout.

Used value - CSS: Cascading Style Sheets
for css properties that don't depend on layout (e.g., display, font-size, or line-height), the computed values and used values are the same.
... the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that specification.

HTML5 - Developer guides
this can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
... new presentational layouts in order to improve the flexibility of designs, two new layouts have been added: the css multi-column layouts and css flexible box layout.

Mobile-friendliness - Developer guides
needless to say, a fixed-width, three-column layout filled with complex javascript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor.
... a slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate.

Mobile Web Development - Developer guides
working with small screens responsive web design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes.
... it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

Printing - Developer guides
there are a number of possible scenarios: you wish to adjust layout to take advantage of the size and shape of the paper.
... <link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the magic happens, as usual, in the css, where we'll apply colors define the layout for the html above.
...unlike the more commonly used border, outline doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as border does.

<input type="password"> - HTML: Hypertext Markup Language
mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier.
... the inputmode is set to numeric to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry.

Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
there are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode.
... in quirks mode, layout emulates nonstandard behavior in navigator 4 and internet explorer 5.

Using Feature Policy - HTTP
these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe> ...

Feature-Policy: unsized-media - HTTP
the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete.
... this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading.

HTTP headers - HTTP
dpr a number that indicates the client’s current device pixel ratio (dpr), which is the ratio of physical pixels over css pixels (section 5.2 of [cssval]) of the layout viewport (section 9.1.1 of [css2]) on the device.
... viewport-width a number that indicates the layout viewport width in css pixels.

An overview of HTTP - HTTP
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.
...it then parses this file, making additional requests corresponding to execution scripts, layout information (css) to display, and sub-resources contained within the page (usually images and videos).

MathML attribute reference - MathML
displaystyle <mstyle>, <mtable> a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas.
... unimplemented location <mscarries> unimplemented longdivstyle <mlongdiv> controls the style of the long division layout.

Authoring MathML - MathML
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.
...one of the advantage of jqmath over the previous scripts is that it will automatically add some simple css rules to do the mathematical layout and make the formulas readable on browsers with limited mathml support.

<mstyle> - MathML
displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas.
... examples using displaystyle and mathcolor to effect style changes in the layout of the whole sum.

<semantics> - MathML
in mathml there are two ways to mark up mathematics: presentation mathml is used to control the layout of equations, whereas content mathml is designed to encode the semantic mathematical meaning and to make expressions understandable to computer algebra systems.
... the mathml elements <semantics>, <annotation> and <annotation-xml> are used to combine presentation and content markup and to provide both, layout information and semantic meaning of mathematical expressions.

MathML element reference - MathML
the term presentation markup is used to describe the layout structure of mathematical notation whereas content markup provides the underlying mathematical meaning and is not supposed to be rendered by the mathml parser (see bug 276028).
...r> (row in a table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math> token elements <mglyph> <mi> <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mpadded> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <munderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <mtable> <mtd> <mtr> elementary math <mlongdiv> <mscarries> <mscarry> <msgroup> <msline> <m...

Performance fundamentals - Web Performance
the html/css layout and graphics code in gecko reduces invalidation and repainting for common cases like scrolling; developers get this support "for free".
...many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox.

Progressive web apps (PWAs)
the building blocks of responsive design — learn the basics of responsive design, an essential topic for modern app layout.
... mobile first — often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.

alignment-baseline - SVG: Scalable Vector Graphics
specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification.
... candidate recommendation refers to the definition in css inline layout and notes the changes to auto, before-edge, after-edge, text-before-edge, and text-after-edge scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification.

baseline-shift - SVG: Scalable Vector Graphics
specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification.
... candidate recommendation refers to the definition in css inline layout and notes that vertical-align should be preferred.

spacing - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> usage notes value auto | exact default value exact animatable yes auto this value indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between typographic characters in order to achieve visually appealing results.
... exact this value indicates that the typographic characters should be rendered exactly according to the spacing rules as specified by the layout rules for text-on-a-path.

visibility - SVG: Scalable Vector Graphics
note: if the visibility attribute is set to hidden on a text element, then the text is invisible but still takes up space in text layout calculations.
...it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout.

SVG fonts - SVG: Scalable Vector Graphics
there are several accompanying attributes that help further define the basic glyph-box layout.
...all following attributes are rendering instructions for the font layout engine, for example, how much of the glyphs' overall heights are ascenders.

Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout.

Install Manifests - Archive of obsolete content
layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional.

Multiple item extension packaging - Archive of obsolete content
multiple item package file layout the multiple item package file layout is a simplified form of an installable bundle and requires a file extension of xpi.

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays.

Adding sidebars - Archive of obsolete content
it allows you to decompose complex ui into individual layers, broadening the layout possibilities.

Adding windows and dialogs - Archive of obsolete content
if you have a very complex layout, or need customized tabbing behavior, you can set the tabindex attribute in the controls.

In-Depth - Archive of obsolete content
the layout of files can and probably will change over time, but the basics should remain the same.

Style System Overview - Archive of obsolete content
style contexts each style context (nsstylecontext), which is the interface through which layout accesses the style data for a given element, points to one rule node.

jspage - Archive of obsolete content
a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};element.properties.opacity={set:function(a,b){if(!b){if(a==0){if(this.style.visibility!="hidden"){this.style.visibility="hidden"; }}else{if(this.style.visibility!="visible"){this.style.visibility="visible";}}}if(!this.currentstyle||!this.currentstyle.haslayout){this.style.zoom=1;}if(browser.engine.trident){this.style.filter=(a==1)?"":"alpha(opacity="+a*100+")"; }this.style.opacity=a;this.store("opacity",a);},get:function(){return this.retrieve("opacity",1);}};element.implement({setopacity:function(a){return this.set("opacity",a,true); },getopacity:function(){return this.get("opacity");},setstyle:function(b,a){switch(b){case"opacity":return this.set("op...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
t/xml mimetype or any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layout of small images in table cells.

New Skin Notes - Archive of obsolete content
the main content layout will not change.

Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
to run tests of the tests package you can, for example, run the reftests as follows: python reftest/runreftest.py --appname=firefox/firefox.exe --utility-path=bin --extra-profile-file=bin/plugins reftest/tests/layout/reftests/reftest.list ...

Table Cellmap - Archive of obsolete content
introduction the table layout use the cellmap for two purposes: quick lookup of table structural data store of the border collapse data the cellmap code is contained in nscellmap.cpp and nscellmap.h this document does currently describe only the quick lookup part of the game, border collapse is still far away cellmap data - overview the entries in the cellmap contain information about the table cell frame corresponding to a given row and column number (celldata.h).

Venkman Introduction - Archive of obsolete content
for more information about this counter and the data, see item 2.2 in the venkman faq.) when you first start venkman, the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the view customization section below.

When To Use ifdefs - Archive of obsolete content
for an example of feature ifdefs, see layout/makefile.in.

Example Sticky Notes - Archive of obsolete content
this way you protect yourselve from < and > signs breaking your xml layout.

XML in Mozilla - Archive of obsolete content
add this line: pref("layout.selectanchor", true); dom load and save methods document.load() is a part of an old version of the w3c dom level 3 load & save module.

Creating XPI Installer Modules - Archive of obsolete content
while you are developing these resources and before you have made them a package of their own, you can test the basic layout and functionality by opening barley.xul from within mozilla by using file -> open.

Using XPInstall to Install Plugins - Archive of obsolete content
in particular, this includes: recent netscape browsers such as netscape 6.2.x and netscape 7.0, which are both based on netscape gecko, which is at the core of the mozilla browser recent beta-only versions of the aol software based on netscape gecko, the layout engine of the mozilla project.

Extending Gecko with XBL and XTF - Archive of obsolete content
presentation view online download summary this session explored ways to extend mozilla/firefox to handle new xml tags and namespaces via drop-in extensions to the layout engine.

XTech 2005 Presentations - Archive of obsolete content
extending gecko with xbl and xtf - brian ryner this session explored ways to extend mozilla/firefox to handle new xml tags and namespaces via drop-in extensions to the layout engine.

XTech 2006 Presentations - Archive of obsolete content
layout algorithm improvements for web user interfaces (slides, slides as one page) - david baron a discussion of problems with existing standards and potential improvements in two areas: layout systems for user interfaces (rather than documents) and mechanisms for reordering content to allow the author to use good markup and appropriate layout.

Deprecated and defunct markup - Archive of obsolete content
) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin rapid application development with mozilla, by nigel mcfarlane ...

Other Resources - Archive of obsolete content
demostrates flexing, layouts, set up of trees and such.

XML Templates - Archive of obsolete content
be aware that when xml data is included inline as in this example, the content may be displayed and may affect the layout of other parts of the window.

Things I've tried to do with XUL - Archive of obsolete content
(to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox.

Complete - Archive of obsolete content
themes a theme changes the appearance of the user interface, affecting fonts, colours, graphics, and sometimes layout.

Tree Widget Changes - Archive of obsolete content
both the nsitreecolumn and nsitreecolumns interfaces can be found at layout/xul/base/src/tree/public/nsitreecolumns.idl.

Adding Style Sheets - Archive of obsolete content
an example would be when a script changes the style, or where a difference in layout might change the meaning of the element.

Element Positioning - Archive of obsolete content
the position of an element is determined by the layout style of its container.

Grids - Archive of obsolete content
xul tabular layout xul has a set of elements for doing layout of elements in a grid-like manner using the grid element.

Introduction - Archive of obsolete content
xul files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts.

Introduction to XBL - Archive of obsolete content
bindings you can use xul to define the layout of a user interface for an application.

More Tree Features - Archive of obsolete content
thus, once the user has decided on a column layout they like, it will automatically be saved for next time.

Tabboxes - Archive of obsolete content
remember that the tab elements are much like regular boxes in terms of layout.

XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document objec...

Using the Editor from XUL - Archive of obsolete content
nsautoplaceholderbatch is a utility class that wraps text insertion with calls to turn off selection and layout updating (to avoid flicker), and the maintenance of a placeholder transaction.

XUL Reference - Archive of obsolete content
eference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset tool...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
sections in bold are to draw attention to pieces that are often overlooked for visual layouts.

XML - Archive of obsolete content
it attempts to balance precise control of layout with flexibility and ease of use, and in this respect it does a great job.

XUL Coding Style Guidelines - Archive of obsolete content
widget resources content data style info layout geometry how to make them localizable?

Building XULRunner with Python - Archive of obsolete content
using python in xul applications add the following to yourprefs.js during development pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute.

Debugging a XULRunner Application - Archive of obsolete content
/* debugging prefs */ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability.

Getting started with XULRunner - Archive of obsolete content
*/ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); xulrunner specific preferences include: toolkit.defaultchromeuri specifies the default window to open when the application is launched.

XULRunner Hall of Fame - Archive of obsolete content
includes smil audio overlays and idpf fixed layout.

xulauncher - Archive of obsolete content
t $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* debugging prefs */ pref(\"browser.dom.window.dump.enabled\", true); pref(\"javascript.options.showinconsole\", true); pref(\"javascript.options.strict\", true); pref(\"nglayout.debug.disable_xul_cache\", true); pref(\"nglayout.debug.disable_xul_fastload\", true); ">$xulprefs # copy xul file to right location and run it ############################################################################## cp $xulfile $xuldir xulrunner $xulappini $@ ...

2006-10-26 - Archive of obsolete content
an inqury about inaccurate layout for firefox being a bug - shaver suggests its a bug with gecko instead.

2006-10-27 - Archive of obsolete content
an inqury about inaccurate layout for firefox being a bug - shaver suggests its a bug with gecko instead.

2006-10-27 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 21 - october 27, 2006 announcements none this week.

2006-11-03 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 28 - november 3, 2006 announcements new reflow branch off of trunk l.

2006-11-17 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 11 - november 17, 2006 announcements none this week.

2006-11-24 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 17 - november 24, 2006 announcements none this week.

2006-12-24 - Archive of obsolete content
summary: mozilla.dev.tech.layout november 24 -december 1, 2006 announcements none this week.

2006-12- 02 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 24 2006 - december 2, 2006 announcements none this week.

2006-12- 08 - Archive of obsolete content
summary: mozilla.dev.tech.layout - december 2, 2006 - december 8, 2006 announcements none this week.

2006-11-10 - Archive of obsolete content
calendar:improving the calendar views discussion about improving the layout of calendar.

2006-11-24 - Archive of obsolete content
treating calendars as tags discussions concerning about the layout of calendar list in lightning/sunbird.

Newsgroup summaries - Archive of obsolete content
illa.dev.apps.firefox-2006-10-06mozilla.dev.apps.calendarmozilla.dev.tech.js-enginemozilla-dev-accessibilitymozilla-dev-apps-calendarmozilla-dev-apps-firefoxmozilla-dev-apps-thunderbirdmozilla-dev-buildsmozilla-dev-embeddingmozilla-dev-extensionsmozilla-dev-i18nmozilla-dev-l10nmozilla-dev-planningmozilla-dev-platformmozilla-dev-qualitymozilla-dev-securitymozilla-dev-tech-js-enginemozilla-dev-tech-layoutmozilla-dev-tech-xpcommozilla-dev-tech-xul ...

Developing cross-browser and cross-platform pages - Archive of obsolete content
as a web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible.

Browser Detection and Cross Browser Support - Archive of obsolete content
for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.

-ms-filter - Archive of obsolete content
an object must have layout for the filter to render.

-ms-ime-align - Archive of obsolete content
after the ime should attempt to align the candidate window below the element (in left-to-right and right-to-left layouts).

-ms-overflow-style - Archive of obsolete content
accordingly, the dimensions of the layout area for the content are reduced by the width (for vertical scrollbars) or height (for horizontal scrollbars) of the scrollbar(s).

CSS - Archive of obsolete content
it only works on mac os x.-ms-acceleratorthe -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.

Standards-Compliant Authoring Tools - Archive of obsolete content
macromedia™ dreamweaver™ cs6 style master and layout master by western civilisation some caveats: it appears that tools currently available from namo generate ie-specific or netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers.

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
the layout wasn't bad if the fish weren't laid out next to each other, so i moved on.

XForms Alert Element - Archive of obsolete content
the alert element's message can also be displayed immediately after the containing form control element in the xforms document's layout.

Randomizing gameplay - Game development
grant extra bonus points if bricks are destroyed rapidly, several-in-a-row (or other bonuses of your choosing.) create levels with different brick layouts.

Alignment container - MDN Web Docs Glossary: Definitions of Web-related terms
this is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block.

Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
the definition of the alignment subject depends on the layout mode being used.

CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the cssom, together with the dom, to build the render tree, which is in turn used by the browser to layout and paint the web page.

Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
css can be used in a variety of contexts, including print media and some css, in particular, that used for layout behaves differently depending on the context it is in.

frame rate (FPS) - MDN Web Docs Glossary: Definitions of Web-related terms
a frame rate is the the speed at which the browser is able to recalculate, layout and paint content to the display.

Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms
a flexbox layout is defined using the flex or inline-flex values of the display property on the parent item.

Fragmentainer - MDN Web Docs Glossary: Definitions of Web-related terms
in multiple-column layout the fragmentainer is the column box created when columns are defined on a multicol container.

Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
chrome supports its own layout called blink.

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
polyfills can be used to build in missing features with javascript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour.

Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
e-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="wrapper"> <div class="item1">item</div> <div class="item2">item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading css grid layout guide: basic concepts of grid layout css grid layout guide: grid template areas definition of grid areas in the css grid layout specification ...

I18N - MDN Web Docs Glossary: Definitions of Web-related terms
(the w3c definition) among other things, i18n requires support for multiple character sets (usually via unicode) units of measure (currency, °c/°f, km/miles, etc.) time and date formats keyboard layouts text directions learn more general knowledge i18n on wikipedia technical reference i18n on w3c i18n on gala-global.org learn about it i18n material on i18nguy.com ...

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
view: handles layout and display.

Main thread - MDN Web Docs Glossary: Definitions of Web-related terms
by default, the browser uses a single thread to run all the javascript in your page, as well as to perform layout, reflows, and garbage collection.

Opera Browser - MDN Web Docs Glossary: Definitions of Web-related terms
opera uses blink as its layout engine since 2013 (before that, presto).

Parse - MDN Web Docs Glossary: Definitions of Web-related terms
when the browser encounters css styles, it parses the text into the css object model (or cssom), a data structure it then uses for styling layouts and painting.

Rendering engine - MDN Web Docs Glossary: Definitions of Web-related terms
examples of layout engines: blink, gecko, edgehtml, webkit.

Script-supporting element - MDN Web Docs Glossary: Definitions of Web-related terms
in an html document, script-supporting elements are those elements that don't directly contribute to the appearance or layout of the page; instead, they're either scripts or contain information that's only used by scripts.

Stylesheet - MDN Web Docs Glossary: Definitions of Web-related terms
a stylesheet is a set of css rules used to control the layout and design of a webpage or document.

First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms
first meaningful paint (fmp) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded.

MDN Web Docs Glossary: Definitions of Web-related terms
editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k key keyword l latency layout viewport lazy load lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to right) m main axis main thread markup mathml media media (audio-visual pre...

Sizing items in CSS - Learn web development
when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

Test your skills: backgrounds and borders - Learn web development
your post should include: a descriptive title such as "assessment wanted for flexbox layout 1 skill test".

CSS values and units - Learn web development
it's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or css layout.

Test your skills: Multicol - Learn web development
the aim of this task is to get you working with the css column-count, column-width, column-gap, column-span and column-rule properties and values covered in our lesson on multiple-column layout.

How CSS is structured - Learn web development
setting css properties to specific values is the primary way of defining layout and styling for a document.

What is CSS? - Learn web development
it can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information.

Styling links - Learn web development
note: you may have noticed that the list items in the html are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout.

Typesetting a community school homepage - Learn web development
project brief you have been provided with some 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.

Web fonts - Learn web development
in the web-font-start.css file, you'll find some minimal css to deal with the basic layout and typesetting of the example.

What text editors are available? - Learn web development
in particular (if possible in your editor), try to: change syntax highlighting settings and colors play with indentation width, setting it to an appropriate setting for your needs check autosave and session saving settings configure any available plugins and investigate how to get new ones change color schemes adjust view settings and see how you can change the layout of the views check what programming languages/technologies your editor supports while you're learning the default settings of most text editors should be fine to use, but it is important to become familiar with your chosen tools, so you can select the best one for your usage.

What are browser developer tools? - Learn web development
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.

Advanced form styling - Learn web development
checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the checkbox (or radio button) is in a checked state — the user has clicked/activated it.

Styling web forms - Learn web development
overall layout first, we prepare by defining our @font-face rules, and all the basic styles set on the <body> and <form> elements.

Test your skills: Styling basics - Learn web development
use some kind of layout technique to make the inputs and labels line up neatly.

Your first form - Learn web development
it also causes a more appropriate keyboard layout for entering email addresses (e.g.

Getting started with HTML - Learn web development
(for example, changing fonts or colors, or altering the page layout) html and css work well together, as you will soon discover.

Marking up a letter - Learn web development
the css you'll add later will cause these to be right aligned, as it should be in the case in a classic letter layout.

Responsive images - Learn web development
as a recap, there are two distinct problems we've been discussing here: art direction: the problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout.

HTML table advanced features and accessibility - Learn web development
they are however very useful for styling and layout — acting as useful hooks for adding css to your table.

Structuring the web with HTML - Learn web development
after learning html, you can then move on to learning about more advanced topics such as: css, and how to use it to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.) modules this topic contains the following modules, in a suggested or...

Multimedia: Images - Learn web development
for this reason, it's critical that you set width and height attributes so that the browser can reserve space for them in the layout.

Perceived performance - Learn web development
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.

Learning area release notes - Learn web development
you can see these on: css layout: flexbox css layout: grids css layout: floats december 2019 we are adding a new type of assessment article to the learning area — "test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on.

Ember app structure and componentization - Learn web development
planning out the layout of the todomvc app in the last article we set up a new ember project, then added and configured our css styles.

Vue conditional rendering: editing existing todos - Learn web development
group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="button" class="btn btn__danger" @click="deletetodo"> delete <span class="visually-hidden">{{label}}</span> </button> </div> </div> </template> we’ve added a wrapper <div> around the whole template for layout purposes.

Getting started with Vue - Learn web development
note: this is not the template for managing the layout of your application — this template is for managing static html that sits outside of your vue app.

Introduction to cross browser testing - Learn web development
you can set up your own testing automation system (selenium being the popular app of choice) that could for example load your site in a number of different browsers, and: see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.

Handling common JavaScript problems - Learn web development
these tend to be used as the basis of an entire site layout; it is often difficult to drop them in just for one ui feature.

Learn web development
css — styling the web css is the language that we can use to style and layout our web content, as well as adding behavior like animation.

Choosing the right memory allocator
these should only be used to allocate objects that are guaranteed to have a shorter lifetime than the presshell in question (typically layout data structures), because the presshell destructor will wipe out the arena, leaving any pointers to memory allocated from it dangling.

Chrome registration
example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application.

Command line options
-purgecaches gecko (layout engine) has a javascript cache, which is not reset on startup, this clears it.

Debugging Frame Reflow
the display of the following frames can be turned on by adding a line with the frame name and 1 or turned off by adding a line with the frame name and 0: short name layout tag area area block block br br bullet bullet button gfxbuttoncontrol hr hr framei htmlframeinner frameo htmlframeouter img image inline inline letter letter...

Debugging on Windows
this is particularly useful to avoid linking layout with debugging information.

Debugging
debugging frame reflow and debugging table reflow notes on debugging issues in gecko's layout engine.

Error codes returned by Mozilla APIs
or (0x80630001) ns_error_schemavalidator_no_schema_loaded (0x80640001) ns_error_schemavalidator_no_dom_node_specified (0x80640002) ns_error_schemavalidator_no_type_found (0x80640003) ns_error_schemavalidator_type_not_found (0x80640004) note: there are other errors in these files: gfx/public/nsidevicecontext.h base/public/nsneterror.h parser/htmlparser/public/nsiparser.h layout/base/nslayouterrors.h profile/public/nsiprofileinternal.idl security/manager/ssl/public/nsicmsmessageerrors.idl directory/xpcom/base/public/nsildaperrors.idl content/base/public/nscontenterrors.h see also mozilla error lookup lets you quickly look up the error name by its code in different formats.

Tracking Protection
if blocked content is part of the page layout, users may notice layout issues where firefox blocked these loads.

Embedding the editor
the box object is a layout structure that is owned by content nodes, and survives frame destruction/recreation.

Gecko SDK
you do have to get and distribute the newest gecko components (gklayout.dll etc.), though.

How to implement a custom autocomplete search component
in case you do not like the standard tree layout of the autocomplete popup, you can also trigger the use of a richlistbox by linking a panel with the type attribute set to "autocomplete-richlistbox" like this: <panel id="richpopup" type="autocomplete-richlistbox" /> <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletepopup="richpopup" autocompletesearchparam='[...

IME handling guide
this class observes selection changes (caret position changes), text changes of a focused editor and layout changes (by reflow or scroll) of everything in the document.

JavaScript-DOM Prototypes in Mozilla
here is a diagram that shows the prototype layout of a htmldivelement in mozilla: htmldivelement.prototype | |.__proto__ | htmlelement.prototype | |.__proto__ | element.prototype | |.__proto__ | node.prototype | |.__proto__ | object.prototype | ...

Localizing with Mozilla Translator
let's assume you have a firefox product in mt with the directory layout present in language packs, as you probably would need for a initial localization.

Localization sign-off reviews
access key changes we ensure that when access keys are changed that they are consistent with the keyboard layout for that particular locale and not blended between two or more distinct layouts.

Setting up the infrastructure
fix any layout issues.

MathML3Testsuite
characters blocks symbols variants entitynames numericrefs utf8 general clipboard genattribs math presentation css dynamicexpressions generallayout scriptsandlimits tablesandmatrices tokenelements topics accents bidi elementarymathexamples embellishedop largeop linebreak nesting stretchychars whitespace torturetests errorhandling original document information author(s): frédéric wang other contributors: last updated date: may 26, 2010 copyright information: portions of this content are © 2010 by individual mozilla.org con...

MathML Screenshots
this screen capture demonstrates advanced layout with mtable and stretchy operators.

MathML In Action
) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ w s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ α ϕ ∂ ξ α l s ( Ω g ) s ) 1 / s for more examples, refer to links on the mathml project page, and if you are building your own mozilla binary, see the directory mozilla/layout/mathml/tests.

Mozilla MathML Status
general layout schemata element notes mrow implemented.

Mozilla MathML Project
various mathml tests - these pages were imported from layout/mathml/tests/.

BloatView
nshashkey 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 19928 1696 1272 581728 72080 1272 424 -424 73352 the first set of columns, bytes allocated, shows the amount of memory allocated for the first log file (blank.txt), the difference between the first log file and the second (mozilla.

Leak-hunting strategies and tips
some places you can do this are: layout engine define debug_tracemalloc_framearena where it is commented out in layout/base/nspresshell.cpp glib set the environment variable g_slice=always-malloc other references performance tools leak debugging screencasts (dbaron) leakingpages - a list of pages known to leak mdc:performance - contains documentation for all of our memory profiling and leak detection tools ...

Power profiling overview
intel processor basics processor layout the following diagram (from the intel power governor documentation) shows how machines using recent intel processors are constructed.

TimerFirings logging
2088737280[7f606bf68140]: [30710] fn timer (one_shot 16 ms): [from dladdr] #0: ???[/home/njn/moz/mi1/o64/dist/bin/libxul.so +0x2144f94] 2088737280[7f606bf68140]: [30710] fn timer (one_shot 16 ms): [from dladdr] #0: mozilla::refreshdrivertimer::timertick(nsitimer*, void*) (/home/njn/moz/mi1/o64/layout/b third, on other platforms dladdr is not implemented or doesn't work well, and the output will look like the followin.

Preference reference
the old behavior can be restored by setting the preference mail.tabs.drawintitlebar to false.nglayout.debug.disable xul fastloadthe preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.nglayout.debug.disable_xul_cacheto improve performance, mozilla caches chrome xul documents the first time they load for faster loading later.

NSS 3.15 release notes
updated build instructions are available at migration to hg as part of this migration, the source code directory layout has been re-organized.

Python binding for NSS
change log general modifications: add binding for nss_nodb_init(), red hat bug #509002 move nss_init and nss_shutdown from ssl module to nss module release 0.3.0 release date 2009-06-04 scm tag source download change log general modifications: import to mozilla cvs, tweak directory layout release 0.2.0 release date 2009-05-21 scm tag source download change log general modifications: apply patch from red hat bug #472805, (miloslav trmač) don't allow closing a socket twice, that causes crashes.

JSObject
these are c/c++ hooks and metadata that govern various aspects of the object's behavior and describe its layout in memory.

JS_NewObject
the jsclass may be used to override low-level object behavior, including such details as the physical memory layout of the object and how property lookups are done.

Split object
circa firefox 1.5, the decision was made to cache layout information and javascript state across navigation.

Animated PNG graphics
the full layout of 'fdat' and 'fctl' chunks is described below.

Gecko object attributes
applied to: role_cell for the <xul:tree/> note: it's not exposed currently table related attributes layout-guess true when gecko's heuristic determines that it is a table that is probably used for layout, not for table.

Gecko events
is supported: yes event_asynch_show a hidden object is shown -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_active_decendent_changed th...

Gecko states
ger exists ext_state_selectable_text for text which is selectable, object must implement nsiaccessibletext ext_state_editable implements nsiaccessibleeditabletext ext_state_active this window is currently the active window ext_state_modal must do something with control before leaving it ext_state_multi_line edit control that can take multiple lines ext_state_horizontal uses horizontal layout ext_state_opaque indicates this object paints every pixel within its rectangular region ext_state_single_line this text object can only contain 1 line of text ext_state_transient ext_state_vertical especially used for sliders and scrollbars ext_state_stale object not dead, but not up-to-date either ext_state_enabled a widget that is not unavailable ext_state_sensitive same as enab...

Using the Places history service
currently, this is used to store whether there was a scrollbar, which allows more efficient layout if the page is revisited.

Component Internals
a set of default libraries stored in this components directory makes up a typical gecko installation, providing functionality that consists of networking, layout, composition, a cross-platform user interface, and others.

Finishing the Component
the only trouble occurs when the compiler itself changes its v-table layout, which can happen when the compiler changes its abi.

Setting up the Gecko SDK
when you extract the sdk, it should have the layout seen below: layout of the extracted sdk the directories represent different modules in the sdk.

Using XPCOM Utilities to Make Things Easier
they are fairly complex because they support the gecko layout engine and other subsystems that manage large chunks of data.

Making cross-thread calls using runnables
in the mozilla platform, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread.

XPCOM guide
the problem would not exist with java's interfaces).making cross-thread calls using runnablesin the mozilla platform, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread.

inIDOMUtils
layout/inspector/inidomutils.idlscriptable dom utility functions.

nsIAccessible
layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods getkeybindings provides array of localized string of global keyboard accelerator for th...

nsIAccessibleStates
ext_state_horizontal 0x00000080 uses horizontal layout.

nsIAccessibleText
this accessible get return the dom node and layout frame with the uniform attributes for this range of text.

nsIBrowserBoxObject
layout/xul/base/public/nsibrowserboxobject.idlscriptable please add a summary to this article.

nsIContainerBoxObject
layout/xul/base/public/nsicontainerboxobject.idlscriptable please add a summary to this article.

nsIDOMFontFace
layout/inspector/public/nsidomfontface.idlscriptable describes a single font face.

nsIDOMFontFaceList
layout/inspector/public/nsidomfontfacelist.idlscriptable a list of nsidomfontface objects, each representing a single font face.

nsIEditorBoxObject
layout/xul/base/public/nsieditorboxobject.idlscriptable please add a summary to this article.

nsIIFrameBoxObject
layout/xul/base/public/nsiiframeboxobject.idlscriptable please add a summary to this article.

nsIMarkupDocumentViewer
the default direction for the layout of bidirectional text.

nsIMenuBoxObject
layout/xul/base/public/nsimenuboxobject.idlscriptable represents the box object for a xul menu.

nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article.

nsIStyleSheetService
layout/base/nsistylesheetservice.idlscriptable please add a summary to this article.

nsITaskbarPreviewButton
if false, the button doesn't participate in the layout of buttons underneath the preview.

nsITextInputProcessor
but the computation doesn't emulate the mapping of native key event handling completely because it has some special cases depending on platform or selected keyboard layout.

nsITreeColumn
layout/xul/base/src/tree/public/nsitreecolumns.idlscriptable please add a summary to this article.

nsITreeColumns
layout/xul/base/src/tree/public/nsitreecolumns.idlscriptable please add a summary to this article.

nsITreeContentView
layout/xul/base/src/tree/public/nsitreecontentview.idlscriptable please add a summary to this article.

nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.idlscriptable this interface is used by the tree widget to get information about what is selected.

nsITreeView
layout/xul/base/src/tree/public/nsitreeview.idlscriptable this interface is used by the tree widget to get information about what and how to display a tree widget.

NS_StringContainerInit
remarks the nsstringcontainer structure has unspecified size and layout.

Using nsIDirectoryService
you may wish that you could have mozilla use these locations rather than requiring the same disk layout as seamonkey.

XPCOM tasks
p3 i/o functionality (except for the filespec facility) probably doesn't belong in xpcom; perhaps it should be moved to netwerk p3 the `twips' units routines (or perhaps all routines) in "nsunitconversion.h" probably belong in layout.

Xptcall Porting Status
from looking at the linux x86 code, i gather that the vtable layout is a little different for those compilers and the code will need minor modifications in order to work properly.

Building a Thunderbird extension 1: introduction
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object model.

Theme Packaging
theme file layout thunderbird themes are packaged in an xpi file with the following structure: theme.xpi: install.rdf preview.png icon.png chrome/ browser/files communicator/files global/files mozapps/files ...

Using Mozilla code in other projects
you can embed gecko, the layout engine used by firefox to process web pages, as a browser within your own application.

Zombie compartments
es [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-tables [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── sty...

DOM Inspector internals - Firefox Developer Tools
inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector window, leaving most of its contents to be added by the overlays.

Introduction to DOM Inspector - Firefox Developer Tools
this interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the dom as it is defined in the file on disk.

DevTools API - Firefox Developer Tools
for example, in the inspector, there are 3 tabs (computed view, rule view, layout view).

Examine and edit CSS - Firefox Developer Tools
see examine grid layouts for more on this.

Use the Inspector API - Firefox Developer Tools
layout-change "low-priority change event for things like paint and resize." ...

How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Page Inspector - Firefox Developer Tools
open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...

Intensive JavaScript - Firefox Developer Tools
by default the browser uses a single thread to run all the javascript in your page as well as to perform layout, reflows, and garbage collection.

UI Tour - Firefox Developer Tools
waterfall the waterfall presents a view of the work the browser is doing during the recording: executing javascript, updating the css, updating the page layout, and performing repaints.

Responsive Design Mode - Firefox Developer Tools
however, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads.

Settings - Firefox Developer Tools
enable layout panel enable the experimental layout panel.

Style Editor - Firefox Developer Tools
the media sidebar works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar.

Determining the dimensions of elements - Web APIs
in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height.

CanvasRenderingContext2D.drawWindow() - Web APIs
drawwindow_do_not_flush 0x02 do not flush pending layout notifications that could otherwise be batched up.

CanvasRenderingContext2D.fillText() - Web APIs
the text is rendered using the font and text layout configuration as defined by the font, textalign, textbaseline, and direction properties.

Basic usage of canvas - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.

CompositionEvent.locale - Web APIs
the locale read-only property of the compositionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).

CompositionEvent - Web APIs
compositionevent.locale read only returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).

Console.timeStamp() - Web APIs
this lets you correlate a point in your code with the other events recorded in the timeline, such as layout and paint events.

DOMParser - Web APIs
e you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an error document: <parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> (error description) <sourcetext>(a snippet of the source xml)</sourcetext> </parsererror> the parsing errors are also reported to the error console, with the document uri (see below) as the source of the error.

Document.fonts - Web APIs
schrome full support 60edge full support 79firefox full support 41 full support 41 no support 35 — 41disabled disabled from version 35 until version 41 (exclusive): this feature is behind the layout.css.font-loading-api.enabled preference (needs to be set to true).

Element.clientHeight - Web APIs
the element.clientheight read-only property is zero for elements with no css or inline layout boxes; otherwise, it's the inner height of an element in pixels.

Element.clientLeft - Web APIs
when layout.scrollbar.side preference is set to 1 or to 3 and when the text-direction is set to rtl, then the vertical scrollbar is positioned on the left and this impacts the way clientleft is computed.

Element.innerHTML - Web APIs
<div class="box"> <div><strong>log:</strong></div> <div class="log"></div> </div> the <div> with the class "box" is just a container for layout purposes, presenting the contents with a box around it.

Element.scrollIntoView() - Web APIs
example var element = document.getelementbyid("box"); element.scrollintoview(); element.scrollintoview(false); element.scrollintoview({block: "end"}); element.scrollintoview({behavior: "smooth", block: "end", inline: "nearest"}); notes the element may not be scrolled completely to the top or bottom depending on the layout of other elements.

Element.setCapture() - Web APIs
nnerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.

FontFaceSet - Web APIs
fontfaceset.ready read only promise which resolves once font loading and layout operations have completed.

Using the Frame Timing API - Web APIs
the profile includes a waterfall of the activity such as event handling, layout, painting, scripting, etc.

Gamepad - Web APIs
gamepad.mapping read only a string indicating whether the browser has remapped the controls on the device to a known layout.

GlobalEventHandlers.onanimationend - Web APIs
we set its size, position, color, and layout.

GlobalEventHandlers.onanimationiteration - Web APIs
we set its size, position, color, and layout.

GlobalEventHandlers.onanimationstart - Web APIs
we set its size, position, color, and layout.

HTMLAnchorElement - Web APIs
the htmlanchorelement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements.

HTMLAreaElement - Web APIs
the htmlareaelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements.

HTMLCanvasElement - Web APIs
the htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements.

HTMLElement.offsetWidth - Web APIs
the htmlelement.offsetwidth read-only property returns the layout width of an element as an integer.

HTMLFieldSetElement - Web APIs
the htmlfieldsetelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset> elements.

HTMLIFrameElement - Web APIs
the htmliframeelement interface provides special properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

HTMLImageElement.alt - Web APIs
ut nunc neque, porta eu auctor at, tempor et arcu.</p> </div> </div> css the css for this example simply sets up the styles for the layout as shown in the result below.

HTMLImageElement.loading - Web APIs
images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event.

HTMLInputElement - Web APIs
the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.

HTMLKeygenElement - Web APIs
the <keygen> elements expose the htmlkeygenelement interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of keygen elements.

HTMLMapElement - Web APIs
the htmlmapelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.

HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmeterelement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.

HTMLObjectElement - Web APIs
the htmlobjectelement interface provides special properties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources.

HTMLOptGroupElement - Web APIs
the htmloptgroupelement interface provides special properties and methods (beyond the regular htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup> elements.

HTMLOutputElement - Web APIs
the htmloutputelement interface provides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <output> elements.

HTMLProgressElement - Web APIs
the htmlprogresselement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements.

HTMLTableCellElement - Web APIs
the htmltablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document.

HTMLTableElement - Web APIs
the htmltableelement interface provides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document.

HTMLTableRowElement - Web APIs
the htmltablerowelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table.

HTMLTableSectionElement - Web APIs
the htmltablesectionelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table.

HTMLTextAreaElement - Web APIs
the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements.

HTMLVideoElement.msZoom - Web APIs
for instance, if the layout space for the video tag is a 4:3 aspect ratio, but the stream coming in is in 16:9 aspect ratio, the mszoom option can be used to render the 16:9 video in 4:3 aspect ratio.

HTMLVideoElement - Web APIs
htmlvideoelement.msislayoutoptimalforplayback read only indicates whether the video can be rendered more efficiently.