Drawing and Event Handling - Plugins
the plug-in prints the part of the page it occupies, and the browser handles the rest of the printing process, including displaying print dialog boxes, getting the printer device context, and, of course, printing the rest of the page.
...the browser displays the necessary print dialog boxes and calls npp_print again.
... a full-page plug-in handles the print dialog boxes and printing process as it sees fit.
...And 6 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
a set of system messages that confer accessibility-related events such as focus changes, changes to document content and state changes in ui objects like checkboxes.
...epending on project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn...
...unfortunately, some products can get confused by the vertical lines on other objects, such as list boxes, even though those lines are not blinking.
...And 6 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical.
...out"/> <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 boxes 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.
... all on-screen widgets are laid out using these boxes, making complex interface designs possible.
...And 5 more matches

Index - Archive of obsolete content
1010 adding more elements tutorials, xul, xul_tutorial we will conclude the discussion of boxes by adding some boxes to the find files dialog.
... 1031 groupboxes tutorials, xul, xul_tutorial this section describes a way to include elements into groups 1032 input controls tutorials, xul, xul_tutorial xul has elements that are similar to the html form controls.
... 1038 list controls tutorials, xul, xul_tutorial xul has a number of types of elements for creating list boxes.
...And 5 more matches

Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
... most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed.
... in autocomplete text fields, make sure that the left or right arrow closes the popup and starts moving through the text letter by letter msaa support, including accessible value that holds text, protected for password fields and readonly for read-only fields checkboxes space bar to toggle msaa support, including checkbox state and statechange event sliders keyboard support for moving slider: arrow keys, home, end, pgup, pgdn msaa support including role_slider, accessible value, value change events progress bars msaa support including accessible name, value, name and value change events gr...
...And 5 more matches

Input Controls - Archive of obsolete content
textboxes accept many of the same attributes as html input controls.
... the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text.
... checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons.
...And 4 more matches

UI pseudo-classes - Learn web development
:checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... radio and checkbox states — checked, default, indeterminate as we've seen in earlier articles in the module, radio buttons and checkboxes can be checked or unchecked.
... but there are a couple of other states to consider too: :default: matches radios/checkboxes that are checked by default, on page load (i.e.
...And 4 more matches

Browser detection using the user agent - HTTP
this effect can be easily achieved using css flexboxes, sometimes with floats as a partial fallback.
...let us imagine a page composed of boxes of information; each box is about a different feline breed or canine breed.
...for the purposes of grouping the content meaningfully, all the cat boxes are separated from all the dog boxes such that the cat and dog boxes are not intermixed together.
...And 4 more matches

User Notifications and Alerts - Archive of obsolete content
they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons.
... notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulsch...
... notification boxes are designed to be easily dismissed.
...And 3 more matches

Box Model Details - Archive of obsolete content
we've added them to buttons and textboxes, but we can also add them to spacers or boxes.
...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.
...the following is an outline of both types of boxes: horizontal boxes lay out their elements next to each other horizontally.
...And 3 more matches

Focus and Selection - Archive of obsolete content
if there are three textboxes on a window, the one that has the focus is the one that the user can currently enter text into.
...this is because xul text boxes are implemented using the html input widget, so the focus event is received for that element instead.
...for textboxes, a special attribute, focused is added whenever the element has the focus.
...And 3 more matches

List Controls - Archive of obsolete content
« previousnext » xul has a number of types of elements for creating list boxes.
... list boxes a list box is used to display a number of items in a list.
...xul provides two types of elements to create lists, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes.
...And 3 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
in the example below i have created two boxes and added different sized margins to each edge.
...try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.
... in the example below i have two boxes, one of which is using physical padding properties and the other logical padding properties.
...And 3 more matches

align-self - CSS: Cascading Style Sheets
the property doesn't apply to block-level boxes, or to table cells.
... 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.
... for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
...And 3 more matches

Modules - Archive of obsolete content
this is made possible by the use of sandboxes.
...we will show how sandboxes and compartments can be used to improve security in our module system.
... exports: {} }; loader.loadsubscript(url, global); return global.exports; } among other things, this allows us to import loadscript to scripts being loaded, allowing them to load further scripts: // index.js: loadscript("www.foo.com/a.js", { loadscript: loadscript }).foo; => 5 // a.js: exports.foo = imports.loadscript("www.foo.com/b.js").bar; // b.js: exports.bar = 5; sandboxes and compartments the loadscript function as defined in the previous section still has some serious shortcomings.
...And 2 more matches

The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
... boxes a xul box is very similar to an html div.
...however, one of the fundamental differences between xul and html has been the fact that xul boxes can be oriented vertically or horizontally (this behavior is being introduced into html standards).
...And 2 more matches

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.
... is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
... so, as soon as you add a label or some other element inside, there will be a different amount of "empty space" to allocate in different boxes.
...And 2 more matches

XUL element attributes - Archive of obsolete content
for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
... baseline this value applies to horizontally oriented boxes only.
...And 2 more matches

CSS values and units - Learn web development
ems and rems em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text.
... in the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names.
... the difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide.
...And 2 more matches

Flexbox - Learn web development
specifying what elements to lay out as flexible boxes to start with, we need to select which elements are to be laid out as flexible boxes.
... the items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).
...for example, you could make the "blush" button appear at the start of the main axis using the following rule: button:last-child { order: -1; } nested flex boxes it is possible to create some pretty complex layouts with flexbox.
...And 2 more matches

Legacy layout methods - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in browsers.
... on the top line we get twelve neat boxes on the grid and they grow and shrink equally as we change the viewport width.
...you can see how the boxes now never become wider than 960 pixels.
...And 2 more matches

Basic native form controls - Learn web development
it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color pickers, and buttons.
... checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels.
...the associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>.
...And 2 more matches

Capabilities, constraints, and settings - Web APIs
edit the constraint sets for the video and audio tracks in the edit boxes on the left, then click the "apply constraints" button to try them out.
... the actual settings the browser selected and is using are shown in the boxes on the right.
...this display is updated by the function getcurrentsettings(), which gets the current settings for the audio and video tracks and inserts the corresponding code into the tracks' settings display boxes by setting their value.
...And 2 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.
... baseline alignment the baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects.
...the alignment subjects are baseline aligned against each other by adding padding inside the boxes.
...And 2 more matches

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.
... there are various places we might want to control our breaks: breaks inside boxes, for example inside a figure element.
... breaks before and after boxes, which would include our heading example above.
...And 2 more matches

Styling Columns - CSS: Cascading Style Sheets
as column boxes created inside multicol containers are anonymous boxes, there is little we can do to style them.
... can i style the column boxes?
...the anonymous boxes that make up your columns can’t be targeted in any way, meaning it isn’t possible to change a box's background color or have one column larger than the others.
...And 2 more matches

place-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.
... for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... the property doesn't apply to block-level boxes, and to table cells.
...And 2 more matches

Content Processes - Archive of obsolete content
sandboxes were explained this article.
...since both add-on modules and content scripts are currently loaded in sandboxes rather than separate processes, and sandboxes can communicate with each other directly (using imports/exports), you might be wondering why we have to go through all the trouble of passing messages between add-on and content scripts.
... when two sandboxes have the same privileges, a wrapper in one sandbox provides transparent access to an object in the other sandbox.
... when the two sandboxes have different privileges, things become more complicated, however.

textbox (Toolkit autocomplete) - Archive of obsolete content
timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions.
...for search textboxes, the number of milliseconds before the timer fires a command event.
...for timed textboxes, the number of milliseconds before the timer fires a command event.
...for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.

Textbox (XPFE autocomplete) - Archive of obsolete content
timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions.
...for search textboxes, the number of milliseconds before the timer fires a command event.
...for timed textboxes, the number of milliseconds before the timer fires a command event.
...for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog.
...me"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...this is because they are inside horizontal boxes.
...this is easy to do by adding a spacer in between the two horizontal boxes.

Grids - Archive of obsolete content
you could add additional nested boxes or even another grid inside a single cell.
... if you resize the window of the last example, you will see that the textboxes resize, but no other elements do.
... this is because of the flex attributes added to the textboxes and the second column.
... flexibility of grids one advantage that grids have over a set of nested boxes is that you can create cells that are flexible both horizontally and vertically.

Using Spacers - Archive of obsolete content
we'll talk more about this in the next section but it essentially allows you to divide a window into a series of boxes that hold elements.
... the boxes will be positioned and resized based on specifications that you can define.
...before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer.
...we'll look at boxes in the next section.

3D collision detection - Game development
axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not.
... this consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3d coordinate space to see if they are overlapping.
...the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate.
...we just need to do one test per axis, using the boxes' boundaries.

Handling different text directions - Learn web development
in this next example i have two boxes that contain a heading and a paragraph.
... let's take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl.
... i have given both of these boxes a width.
... if you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

Overflowing content - Learn web development
you can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size).
...in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content.
...in the past, some sites were built with fixed-height containers to align bottoms of boxes.
... these boxes may otherwise have no relationship to each other.

Use CSS to solve common problems - Learn web development
ow to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inline-block?
... how to create fancy boxes (also see the styling boxes module, generally).
... how to change the box model completely using box-sizing how to control backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques css allows some advanced design techniques.
... general how to calculate specificity of a css selector how to control inheritance in css advanced effects how to use filters in css how to use blend modes in css layout using css flexible boxes using css multi-column layouts using css generated content ...

Components.utils.Sandbox
addons creating sandboxes whose expected lifetime is tied to that of a content window object will want to use samezoneas instead.
...this helps to improve memory usage by allowing sandboxes to be discarded when that zone goes away.
... the exception is "-promise": the promise constructor is available by default for sandboxes, and you use this option to remove it from the sandbox.
...however, sandboxes are often used when chrome wants to run script as another origin, possibly to interact with the page.

nsIMsgHeaderParser
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheaderaddressmailboxes(in string line); void extractheaderaddressname(in string line, out string name); void extractheaderaddressnames(in string line, out string usernames); astring makefulladdress(in astring aname, in astring aaddress); string makefulladdressstring(in string aname, in string aaddress); wstring makefulladdresswstring(in wstring name, in wstring addr); obsol...
... wstring reformatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseoraddr(in string line, in boolean preserveintegrity); wstring unquotephraseoraddrwstring(in wstring line, in boolean preserveintegrity); methods extractheaderaddressmailboxes() given a string which contains a list of header addresses, returns a comma-separated list of just the 'mailbox' portions.
... autf8string extractheaderaddressmailboxes( in string line ); parameters line the header line to parse.
... exceptions thrown missing exception missing description native code only!parseheaderaddresses given a string which contains a list of header addresses, parses it into their component names and mailboxes.

ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
...if list items are checkable, space can be used to toggle checkboxes.
... type-ahead is recommended for all listboxes, especially those with more than seven options: type a character: focus moves to the next item with a name that starts with the typed character.
... example listboxes with rearrangeable options: examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.

align-items - CSS: Cascading Style Sheets
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.
... for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... the property doesn't apply to block-level boxes, and to table cells.
... center the flex items' margin boxes are centered within the line on the cross-axis.

<color> - CSS: Cascading Style Sheets
-moz-combobox background color for combo-boxes.
... -moz-comboboxtext text color for combo-boxes.
... -moz-dialog background color for dialog boxes.
... -moz-dialogtext text color for dialog boxes.

display - CSS: Cascading Style Sheets
inline the element generates one or more inline element boxes that do not generate line breaks before or after themselves.
... ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes.
... box <display-box> these values define whether an element generates display boxes at all.
...they are replaced by their pseudo-box and their child boxes.

justify-self - CSS: Cascading Style Sheets
in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
... formal definition initial valueautoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
(only the htmlinputelement’s checked idl attribute is updated.) note: unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked.
...the default value for checkboxes and radio buttons is on.
...(disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.) there are two special cases: _charset_ : if used as the name of an <input> element of type hidden, the input's value is automatically set by the user agent to the character encoding being used to submit the form.
...this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny.

core/namespace - Archive of obsolete content
let sandboxes = ns(); function widget(options) { let { element, contentscript } = options; let widget = object.create(widget.prototype); view.call(widget, options.element); sandboxes(widget).sandbox = cu.sandbox(element.ownerdocument.defaultview); // ...
... } widget.prototype = object.create(view.prototype); widget.prototype.postmessage = function postmessage(message) { let { sandbox } = sandboxes(this); sandbox.postmessage(json.stringify(json.parse(message))); ...
... delete sandboxes(this).sandbox; }; exports.widget = widget; in addition access to the namespace can be shared with other code by just handing them a namespace accessor function.

Appendix D: Loading Scripts - Archive of obsolete content
under ordinary circumstances, native objects passed out of sandboxes are wrapped in xraywrapper objects, which means that only native properties of these objects are directly exposed to privileged code.
... disadvantages performance: there are several significant performance disadvantages inherent in this method: there is currently no way to load code into sandboxes from a cache.
...chromebug supports firebug based sandboxes.

align - Archive of obsolete content
for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
... baseline this value applies to horizontally oriented boxes only.

timeout - Archive of obsolete content
« xul reference home timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions.
...for search textboxes, the number of milliseconds before the timer fires a command event.
...for timed textboxes, the number of milliseconds before the timer fires a command event.

Introduction to XBL - Archive of obsolete content
the basic appearance of all elements, such as scroll bars and check boxes may be modified by adjusting the style or by setting attributes on the element.
...by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class.
...the style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the xbl file.

Stacks and Decks - Archive of obsolete content
there are a number of elements that are specialized types of boxes, such as toolbars and tabbed panels.
...however, the specialized types of boxes work just like regular boxes in the way they orient the elements inside them, but they have additional features.
...they are all special types of boxes and allow all of the attributes of boxes on them.

Trees - Archive of obsolete content
however, listboxes may contain any type of content, whereas trees may only contain text and images.
... (using advanced features, progress meters or checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body.
...as with listboxes, a header row will appear with column labels.

XUL accessibility guidelines - Archive of obsolete content
for example, under the privacy section of preferences there are three groupboxes captioned: history, cookies, and private data.
... groupboxes are essential for radiogroups or groups of checkboxes with a similar theme (e.g.
...if you find nested groupboxes visually unappealing, use css to hide the border of the inner groupbox so that it can remain in the code to benefit users of assistive technologies.

XUL controls - Archive of obsolete content
<colorpicker type="button" color="#cc0080"/> colorpicker reference <datepicker> a set of textboxes which may be used to allow the entry of a date.
... <datepicker type="grid" value="2007/02/20"/> datepicker reference <datepicker type="popup" > a datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.
... <textbox type="timed"/> textbox reference <timepicker> a timepicker displays a set of textboxes for entering a time.

attribute.align - Archive of obsolete content
for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it is used to specify how its children are algined horizontally.
... baseline this value applies to horizontally oriented boxes only.

richlistbox - Archive of obsolete content
note: in versions of firefox prior to firefox 3, rich list boxes support only single selection.
... firefox 3 introduced multiple selection to rich list boxes.
...this method does nothing for single-selection list boxes.

Bounding volume collision detection with THREE.js - Game development
this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
... instantiating boxes to create a box3 instance, we need to provide the lower and upper boundaries of the box.
...box and sphere using boxhelper as an alternative to using raw box3 and sphere objects, three.js has a useful object to make handling bounding boxes easier: boxhelper (previously boundingboxhelper, which has been deprecated).

Backgrounds and borders - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes.
...in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star.
...in the two boxes respectively, we have a linear gradient that is stretched over the whole box, and a radial gradient with a set size, which therefore repeats.

Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
... in the example below we have two boxes, both 200 pixels in size: one contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it.
... styling text input elements elements that allow for text input, such as <input type="text">, specific types such as <input type="email">, and the <textarea> element are quite easy to style and tend to behave just like other boxes on your page.

Floats - Learn web development
this is because a floated element is taken out of normal flow, and the boxes of the following items actually run behind the float.
...ent montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } the line boxes of our following element have been shortened so the text runs around the float, but due to the float being removed from normal flow the box around the paragraph still remains full width.
... clearing boxes wrapped around a float you now know how to clear something following a floated element, but let's see what happens if you have a tall float and a short paragraph, with a box wrapped around both elements.

Introduction to CSS layout - Learn web development
the methods that can change how elements are laid out in css are as follows: the display property — standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see types of css boxes for more information).
... the position property — allows you to precisely control the placement of boxes inside other boxes.
...this is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.

Multiple-column layout - Learn web development
in this case the content breaks when the spanning element is introduced and continues below creating a new set of column boxes.
...in the live example below, i have used multicol to lay out a series of boxes, each of which have a heading and some text inside.
... .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 0 0 1em 0; } reload the page and your boxes should stay in one piece.

Supporting older browsers - Learn web development
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.
...any browser that does not support css grid layout will see the row of boxes as a floated layout.
...importantly, the anonymous boxes created to fix up the table structure are not created.

CSS layout - Learn web development
at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.
... understand how to style boxes.

CSS property compatibility table for form controls - Learn web development
border-radius no no box-shadow no no check boxes and radio buttons see the checkbox and radio input types.
... border and background background no no border-radius no no box-shadow no no select boxes (single line) see the <select>, <optgroup> and <option> elements.
... select boxes (multiline) see the <select>, <optgroup> and <option> elements and the size attribute.

Experimental features in Firefox
html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog boxes.
... nightly 78 yes developer edition 78 yes beta 78 yes release 78 no preference name network.preload css display stray control characters in css as hex boxes this feature renders control characters (unicode category cc) other than tab (u+0009), line feed (u+000a), form feed (u+000c), and carriage return (u+000d) as a hexbox when they are not expected.
... nightly 31 yes developer edition 31 no beta 31 no release 31 no preference name layout.css.getboxquads.enabled geometryutils method: getboxquads() the geometryutils method getboxquads() returns the css boxes for a node relative to any other node or viewport.

Limitations of chrome scripts
sandboxes you can create sandboxes in the chrome or the content process.
... sandboxes are often used as a safe way to manipulate web content, and if that's your goal, create the sandbox in the content process.
... there is a shim for sandboxes: if you make a sandbox in the chrome process and give it content principals (by passing a cpow as the first argument to components.utils.sandbox) then we'll actually make it in the content process.

mozIRegistry
some are for illustrative purposes (the lighter-colored boxes near the top of the picture).
...i'll talk about them to provide examples of how you should use the other boxes.
... these components (indicated by the darker-colored boxes) are the services you'll be using.

Settings - Firefox Developer Tools
to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
... available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar.
... enable browser chrome and add-on debugging toolboxes enable you to use developer tools in the context of the browser itself, and not only web content.

Element.getBoundingClientRect() - Web APIs
syntax domrect = element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element.
... empty border-boxes are completely ignored.
... if all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first css box (in content order) for the element.

Intersection Observer API - Web APIs
it uses a vendor-provided library to manage the advertisements placed periodically throughout the page, has animated graphics here and there, and uses a custom library that draws notification boxes and the like.
...; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let observers = []; startup = () => { let wrapper = document.queryselector(".wrapper"); // options for the observers let observeroptions = { root: null, rootmargin: "0px", threshold: [] }; // an array of threshold sets for each of the boxes.
... the target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling getboundingclientrect() on the target.

ARIA Test Cases - Accessibility
the state of tristate checkboxes is not announced when initially focusing.
...role may or may not be spoken, screen reader should use same handling as for regular group boxes.
...if it also contains content, an indication should be given as for regular textboxes.

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.
...the columns are anonymous boxes and described as column boxes in the specification.
...therefore, the column width should be seen as a minimum width, as column boxes are likely to be wider due to the additional space.

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there purely to fix up the tree.
... if you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.
... “note: some values of display normally trigger the creation of anonymous boxes around the original box.

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this example i have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0.
... so where flex-grow deals with adding available space, flex-shrink manages taking away space to make boxes fit into their container without overflowing.
...you don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
this means i don’t get a final margin on the last row of boxes.
... if you are using display: table for your legacy layout, an item set to display: table-cell generates anonymous boxes.
...this means you can overwrite display: table based layouts, without having additional anonymous boxes.

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
in this first example, i am using flexbox to lay out a set of boxes.
...the contents value of the display property is a new value that is described in the display specification as follows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal.
... for the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.” if you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level.

Understanding CSS z-index - CSS: Cascading Style Sheets
in addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other.
... z-axis positions are particularly relevant when boxes overlap visually.
... (from css 2.1 section 9.9.1 - layered presentation) this means that css style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0).

Basic Shapes - CSS: Cascading Style Sheets
the floated element has 20 pixels of padding, border and margin applied, and the shapes inspector highlights these reference boxes.
... for an excellent description of references boxes as they apply to css shapes see understanding reference boxes for css shapes.
... the shape will be clipped by the margin box when describing reference boxes i explained that the margin-box will clip the shape.

box-lines - CSS: Cascading Style Sheets
the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
...the later lines are placed below the earlier lines in normal direction boxes and above in reverse direction boxes.
...later lines in normal direction boxes are placed to the right of earlier lines and to the left in reverse direction boxes.

justify-items - CSS: Cascading Style Sheets
in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

max-block-size - CSS: Cascading Style Sheets
everything else about the two boxes is identical, including the values used for max-block-size.
...both boxes share the standard-box class, which simply establishes coloring, padding, and their respective values of max-block-size.
...the first, standard-box, is applied to both boxes, as seen above.

place-items - CSS: Cascading Style Sheets
in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

white-space - CSS: Cascading Style Sheets
lines are broken as necessary to fill line boxes.
...lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
...lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
boxes every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.
... our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: .box { width: 290px; height: 100px; margin: 0; padding: 4px 6px; font: 28px "marker felt", "zapfino", cursive; display: flex; justify-content: center; align-items: center; } in brief, .box establishes the size of each box, as well as the configuration of the font use...
...then we can create a class for each of the two boxes that defines the properties that differ between the two.

<input type="radio"> - HTML: Hypertext Markup Language
note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off.
... where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
...by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls.

Examples and demos from articles - Archive of obsolete content
.[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
...[article] pure-css editable (pseudo)<select> [html] this example shows how it's possible to simulate an editable <select> through a fieldset of radioboxes and textboxes.

Code snippets - Archive of obsolete content
xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background oper...
... autocomplete code used to enable form autocomplete in a browser boxes tips and tricks when using boxes as containers tabbox removing and manipulating tabs in a tabbox windows-specific finding window handles (hwnd) (firefox) how to use windows api calls to find various kinds of mozilla window handles.

Adding windows and dialogs - Archive of obsolete content
the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-type dialogs.
... groupboxes the groupbox element should be easy to understand: it groups a series of xul controls together.

pack - Archive of obsolete content
for boxes with horizontal orientation, it is used to indicate the position of children horizontally.
... for boxes with vertical orientation, it is used to indicate the position of children vertically.

treecol.type - Archive of obsolete content
checkbox the content of the columns are checkboxes.
...here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.

Box Objects - Archive of obsolete content
recall that all xul elements are types of boxes, that is the box is the base of all displayed xul elements.
...this attribute was explained earlier in the section on boxes.

Keyboard Shortcuts - Archive of obsolete content
note that textboxes have the clipboard shortcuts built-in so you don't have to implement them yourself.
...typically, this will include textboxes, buttons, checkboxes and so forth.

Manipulating Lists - Archive of obsolete content
although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible.
...').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface.

Modifying a XUL Interface - Archive of obsolete content
manipulating basic elements the main xul elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties.
...you can also retrieve the current label or value using these properties, as in the following example: example 5 : source view <button label="hello" oncommand="alert(this.label);"/> toggling a checkbox checkboxes have a checked property which may be used to check or uncheck the checkbox.

Numeric Controls - Archive of obsolete content
as with other textboxes, the default value can be specified with the value attribute.
...when used, they display a set of numeric textboxes to enter each of the components of the date or time.

Stack Positioning - Archive of obsolete content
they may be any element, including boxes and other stacks.
... the next section describes tabboxes which are like decks but provide their own navigation.

XUL Structure - Archive of obsolete content
you will commonly use this feature in more complex xul applications since you wouldn't want the browser ui to exist around your dialog boxes.
...it also defines the default appearance and functionality of the various common xul widgets such as textboxes and buttons.

arrowscrollbox - Archive of obsolete content
currently, smooth scrolling supports horizontal arrowscrollboxes only.
...currently, smooth scrolling supports horizontal arrowscrollboxes only.

scale - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
...the default value is 100 for scales and infinity for number boxes.

titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it.
...buttons inside it can't be clicked and textboxes can't be focused with the mouse.

2006-10-20 - Archive of obsolete content
comet and btek are currently the fastest-cycling tinderboxes available therefore they are quite fast to detect general fires on the mozilla tree.
...boris zbarsky's said: the reason why gtk1 builds are still being performed is because: when requests are made to change build boxes to newer versions the people responsible for making the change reply with "that would require an os upgrade".

2006-11-03 - Archive of obsolete content
paul reed announced that: that he is taking down old tinderboxes and making a few changes to existing tinderboxes.
... on october 30th boris zbarsky boris expresses his opinion about paul taking down one of the two build boxes that produces nightly builds for linux.

2006-10-20 - Archive of obsolete content
discussions sparky and comet going away on friday preed wants to get rid of sparky and comet (both older desktop class linux boxes).
... robert kaiser gave some background on the boxes.

Theme changes in Firefox 3.5 - Archive of obsolete content
global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x.
... if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls.

display-outside - Archive of obsolete content
none the element generates no boxes, and does not participate in any formatting context.
...for example, a table-row box requires its parent to be a table row group box and its children to be table-cell boxes.

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} by making the content of each card 45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent.
...i did it that way because it's a lot less likely to trigger a situation where rounding errors force the two floats to total more than 100% the width of the parent, as could happen if the floats' element boxes were made to total 50%.

Index - Game development
13 3d collision detection 3d, games, javascript, bounding boxes, collision detection this article provides an introduction to the different bounding volume techniques used to implement collision detection in 3d environments.
... 14 bounding volume collision detection with three.js 3d, games, javascript, webgl, bounding boxes, collision detection, three.js this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.

Debugging CSS - Learn web development
you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear.
... compare the two boxes with classes box1 and box2.

Sizing items in CSS - Learn web development
in the example below you can see two boxes, both with a defined height of 150 pixels.
...you can use these units to size boxes, but also text.

Test your skills: sizing - Learn web development
task one in this task, you have two boxes.
... task three this task has two images in boxes.

CSS building blocks - Learn web development
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.
...images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.

Grids - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid.
...by default these display in normal flow so the boxes display one below the other.

Positioning - Learn web development
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?
... for example, popup information boxes and control menus; rollover panels; ui features that can be dragged and dropped anywhere on the page; and so on...

Learn to style HTML using CSS - Learn web development
css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.

How to structure a web form - Learn web development
this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
...lists are recommended for structuring multiple checkboxes or radio buttons.

Test your skills: Basic controls - Learn web development
basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.
... turn the second <fieldset>'s content into a set of checkboxes.

CSS basics - Learn web development
your work-in-progress should look similar to this: css: all about boxes something you'll notice about writing css: a lot of it is about boxes.
...most html elements on your page can be thought of as boxes sitting on top of other boxes.

Componentizing our React app - Learn web development
once you’re done, the todo component's <input /> element will read like this: <input id="todo-0" type="checkbox" defaultchecked={props.completed} /> and your browser should update to show only eat being checked: if you change each <todo /> component’s completed prop, your browser will check or uncheck the equivalent rendered checkboxes accordingly.
...we’re missing our html structure — the <li> and its checkboxes and buttons!

Componentizing our Svelte app - Learn web development
some people prefer an intuitive approach and start looking at the markup and drawing boxes around every component and subcomponent that seems to have its own logic.
... update the {#each} block inside todos.svelte like so: <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} <li class="todo"> <todo {todo} /> </li> {:else} <li>nothing to do here!</li> {/each} </ul> the list of todos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed" status heading will no longer update accordingly.

Creating our first Vue component - Learn web development
however, we're currently not doing anything with the "done" prop — we can check the checkboxes in the ui, but nowhere in the app are we recording whether a todo item is actually done.
...this would result in errors with assistive technology since the id is needed to correctly map labels to their checkboxes.

Strategies for carrying out testing - Learn web development
follow the instructions and fill in the following dialog boxes as appropriate.
... you'll: provide a name for the new virtual machine choose which operating system and version you are installing on it set how much ram should be allocated (we'd recommend something like 2048mb, or 2gb) create a virtual hard disk (choose the default options across the three dialog boxes containing create a virtual hard disk now, vdi (virtual disk image), and dynamically allocated).

Mozilla’s UAAG evaluation report
(p1) c status line and alert boxes used to convey messages and alerts guideline 2.
...(p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions.

The Firefox codebase: CSS Guidelines
in general, the following colors are used: -moz-field: textbox or field background colors, also used as the background color of listboxes or trees.
... -moz-fieldtext: textbox or field text colors, also used as the text color of listboxes or trees.

Embedding Tips
normally it provide some functionality that is required from lots of places such as looking up preference settings, creating new windows, locating files, displaying prompt or password dialog boxes and so on.
... how do i display my own message, alert and prompt boxes?

Script security
normal content windows are globals, of course, but so are chrome windows, sandboxes, workers, the contentframemessagemanager in a frame script, and so on.
...the add-on sdk runs content scripts in sandboxes, which are initialized with an expanded principal, giving them elevated privileges with respect to the web content they operate on, but reduced privileges with respect to chrome.

Gecko's "Almost Standards" Mode
"almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.
...(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 diff...

NSPR release process
make sure the nss tinderboxes (which also build and test nspr) are all green.
... the build+test cycles of the nss tinderboxes are very long, so you usually need to wait half a day for them to cycle through.

Index
174 iaccessiblevalue interfaces, xpcom, xpcom interface reference the iaccessiblevalue interface represents a single numerical value and should be implemented by any class that supports numerical value like progress bars and spin boxes.
... 1227 nsxpidlcstring class declaration 1228 nsxpidlstring class declaration 1229 xpcom primitive xpcom, xpcom api reference an xpcom primitive is an xpcom object that "boxes" a value of a primitive type.

nsIAccessibleProvider
xformsselectfull 0x00002011 used for xforms full select/select1 elements that may be represented by group of checkboxes and radiogroup.
... xformsitemcheckgroup 0x00002012 used for xforms item element that is used inside xforms select elements represented by group of checkboxes.

XUL Overlays
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.
...toolbars, submenus, boxes, and any other subtrees that appear in multiple places can be defined in overlays files in this way and referenced for reuse wherever necessary.

Main Windows
msghdrviewoverlay.xul shown in blue above (where?), this overlay consists of three boxes.
... msghdrviewoverlay.xul shown in blue above, this overlay consists of three boxes.

Tutorial: Set a breakpoint - Firefox Developer Tools
to do this, open the firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...if that item doesn’t appear in the “web developer” menu, make sure you checked both boxes to enable the browser content toolbox as explained in step 1.

DevTools API - Firefox Developer Tools
api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and windows.
... unregistertool(tool) unregisters the given tool and removes it from all toolboxes.

Element.getClientRects() - Web APIs
rectangles are returned even for css boxes that have empty border-boxes.
...note that the p has onlyone border box, while the span has multiple border boxes.</p> <div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> exam...

ResizeObserverEntry.borderBoxSize - Web APIs
for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width.
...for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.

ResizeObserverEntry.contentBoxSize - Web APIs
for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width.
...for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.

Storage API - Web APIs
"persistent" the user agent will retain the data as long as possible, clearing all "best-effort" boxes before considering clearing a box marked "persistent".
... if it becomes necessary to consider clearing persistent boxes, the user agent will notify the user and provide a way to clear one or more persistent boxes as needed.

Window.confirm() - Web APIs
example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
...regardless, there are good reasons to avoid using dialog boxes for confirmation.

-moz-image-rect - CSS: Cascading Style Sheets
css the css defines one container style, then the styles for the four boxes that comprise the complete image.
... the container looks like this: #container { width:267px; height:272px; top:100px; left:100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined.

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
css determines the size, position, and properties (color, background, border size, etc.) of these boxes.
...when margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

Handling Overflow in Multicol - CSS: Cascading Style Sheets
in this guide we look at how multicol deals with overflow, both inside the column boxes and in situations where there is more content than will fit into the container.
... overflow inside column boxes an overflow situation happens when an item's size is larger than the column box.

Spanning and Balancing Columns - CSS: Cascading Style Sheets
when a spanner is introduced, it breaks the flow of columns and columns restart after the spanner, effectively creating a new set of column boxes.
...this means that on the last page the final set of column boxes will be balanced.

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode.
... boxes with a different writing mode to their parent when a nested box is assigned a different writing mode to its parent, then an inline level box will display as if it has display: inline-block.

In Flow and Out of Flow - CSS: Cascading Style Sheets
you can see the background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float.
...this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it.

Overview of CSS Shapes - CSS: Cascading Style Sheets
the specification defines four <basic-shape> values, which are: inset() circle() ellipse() polygon() using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.
...this will further shorten the line boxes of any content wrapping the shape, pushing it away from the shape itself.

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.

CSS Tutorials - CSS: Cascading Style Sheets
understanding z-index controlling superposition of boxes is a basic feature that is very quickly needed by web developers.
... css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be resized smoothly.

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
it behaves as block-level things do in relationship to other boxes in the layout.
...in addition to indicating whether something is block-level or inline-level in relationship to other boxes on the page, it now also indicates the formatting context inside the box it is applied to.

<display-box> - CSS: Cascading Style Sheets
these keywords define whether an element generates display boxes at all.
...they are replaced by their pseudo-box and their child boxes.

justify-content - CSS: Cascading Style Sheets
baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
... note: stretch is not supported by flexible boxes (flexbox).

margin-trim - CSS: Cascading Style Sheets
in-flow for in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero.
... all trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge.

mask-origin - CSS: Cascading Style Sheets
for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area.
...for single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.

scrollbar-width - CSS: Cascading Style Sheets
initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword.
... mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

CSS: Cascading Style Sheets
css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... now it's time to look at how to place your boxes in the right place concerning the viewport, and one another.

HTML attribute: readonly - HTML: Hypertext Markup Language
note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
...bel> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input t...

Tutorials
intermediate level css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.

Guides - Archive of obsolete content
modules learn about the module system used by the sdk (which is based on the commonjs specification), how sandboxes and compartments can be used to improve security, and about the built-in sdk module loader, known as cuddlefish.

/loader - Archive of obsolete content
load() the load() function takes loader and loads the given module into it: let loader = loader(options); let module = module('foo/bar', 'resource:///modules/foo/bar.js'); load(loader, module); sandbox() the sandbox() function is a utility function for creating js sandboxes.

core/promise - Archive of obsolete content
instead of structuring our programs into logical black boxes: function blackbox(a, b) { var c = assemble(a); return combine(b, c); } we're forced into continuation passing style, involving lots of machinery: function sphagetti(a, b, callback) { assemble(a, function continuewith(error, c) { if (error) callback(error); else combine(b, c, callback); }); } this style also makes doing things in sequence hard: widget.on('click', function onclick() { promptuserfortwitterhandle(function continuewith(error, handle) { if (error) return ui.displayerro...

loader/sandbox - Archive of obsolete content
experimental create javascript sandboxes and execute scripts in them.

Low-Level APIs - Archive of obsolete content
loader/sandbox create javascript sandboxes and execute scripts in them.

Dialogs and Prompts - Archive of obsolete content
this page has some code snippets used to display and process dialog boxes.

Forms related code snippets - Archive of obsolete content
if you want to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure css, without javascript), please see this example.

Extension Etiquette - Archive of obsolete content
scripts can be loaded into their own globals, such as commonjs modules, javascript modules, or sandboxes, to avoid most global variable and prototype conflicts.

Adding Events and Commands - Archive of obsolete content
it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes.

Adding sidebars - Archive of obsolete content
the tabs are styled to match the operating system you're using, so you should avoid changing the css in tab boxes.

Custom XUL Elements with XBL - Archive of obsolete content
as explained earlier, xul is really just boxes, text and images.

Handling Preferences - Archive of obsolete content
finally, groupboxes are a good idea to organize the contents of the window and preference panes.

Security best practices in extensions - Archive of obsolete content
give the element a type="content" attribute, which essentially sandboxes the code there and blocks callback rights into chrome.

Using the Stylesheet Service - Archive of obsolete content
in particular, they can apply styles to native anonymous elements and to css anonymous boxes.

Index of archived content - Archive of obsolete content
open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets h...

Notes on HTML Reflow - Archive of obsolete content
the target frame recovers its bookkeeping information (e.g., the block frame iterates through the dirty lineboxes), and reflows the dirty child frames.

Source code directories overview - Archive of obsolete content
widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes.

Getting Started - Archive of obsolete content
if you want to modify how checkboxes, radio buttons, and scrollbars appear, this is the place.

In-Depth - Archive of obsolete content
example: -moz-image-region: rect(168px 69px 189px 46px); -moz-opacity makes boxes semi-transparent.

Drag and Drop Example - Archive of obsolete content
it will contain three buttons, one to create new buttons, one to create check boxes and the other to create textboxes.

Repackaging Firefox - Archive of obsolete content
check the boxes next to each one you want to generate.

Extenders - Archive of obsolete content
manifest chief mechanism for allowing advanced api use within your jetpack superpowers similar to libraries, superpowers are for adding deeper platform coupling for your jetpack sandboxes safely abstracts library interoperability issues so you don't have to worry about them future api interface method for including not yet finalized functionality in your jetpack ...

Menu - Archive of obsolete content
no menuitem constructor is exposed, because jetpack automatically boxes simple javascript objects into menuitem objects.

Mozilla Application Framework in Detail - Archive of obsolete content
open source and freely available, gecko is small in size and modular and achieves rendering speed superior to all other browser engines - which makes it perfect for embedding into both desktop applications such as browsers and new devices such as browsing appliances and set top boxes.

New Skin Notes - Archive of obsolete content
--dria css classes for feature and subfeature boxes, including required graphics.

Using XPInstall to Install Plugins - Archive of obsolete content
the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" width="50" height="50" pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine.

confirm - Archive of obsolete content
notes the preferred method for detecting support for custom dialog boxes is querying the existence of the button constants.

A XUL Bestiary - Archive of obsolete content
menus, toolbars, buttons, and scrollbars are widgets, and so are such general purpose pieces as boxes and springs.

searchbutton - Archive of obsolete content
this attribute only applies to textboxes with the type search.

cols - Archive of obsolete content
« xul reference home cols type: integer for multiline textboxes, the number of columns to display.

increment - Archive of obsolete content
« xul reference home increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).

max - Archive of obsolete content
the default value is 100 for scales and infinity for number boxes.

smoothscroll - Archive of obsolete content
currently, smooth scrolling supports horizontal arrowscrollboxes only.

textbox.type - Archive of obsolete content
for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.

textbox.value - Archive of obsolete content
for number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher.

Deprecated and defunct markup - Archive of obsolete content
ld/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) 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 ...

XUL Events - Archive of obsolete content
this applies to boxes and other layout elements with a css overflow property other than 'visible'.

Introduction to XUL - Archive of obsolete content
widgets widgets are generally objects like form controls: buttons, text boxes, tree controls and the like.

selectItemRange - Archive of obsolete content
this method does nothing for single-selection list boxes.

Namespaces - Archive of obsolete content
the xul and foobar namespaces must be defined at the top of the xml document in which they are used, like so: <foobar:some-element xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:foobar="the-foobar-namespace"> <xul:textbox id="foo" value="bar"/> <foobar:textbox favorite-food="pancakes"/> </foobar:some-element> notice i've mixed two <textboxes/> in the same document.

ContextMenus - Archive of obsolete content
as textboxes have a context menu built in, the event will fire before an attempt to open the context menu.

boxObject - Archive of obsolete content
« xul reference boxobject type: nsiboxobject this property is available for elements that are derived from boxes, which is most displayable xul elements.

smoothScroll - Archive of obsolete content
currently, smooth scrolling supports horizontal arrowscrollboxes only.

toolboxid - Archive of obsolete content
this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar.

The Joy of XUL - Archive of obsolete content
it uses simple xul components like boxes, grids, and stacks to compose views for the weeks, days, and months.

Broadcasters and Observers - Archive of obsolete content
if you tried duplicating the code for the first button several times, you would end up with a series of alert boxes appearing, one for each button.

Commands - Archive of obsolete content
by default, only textboxes have a controller that does anything.

Creating a Skin - Archive of obsolete content
for example, having different images for the check boxes in the find files dialog as other windows looks a little odd.

Document Object Model - Archive of obsolete content
we could add additional code to get the selections from the drop-down boxes too.

Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.

Introduction to RDF - Archive of obsolete content
rdf can also populate other xul elements as well such as listboxes and menus.

Scroll Bars - Archive of obsolete content
some elements, such as text boxes, will also add scroll bars as necessary when the content inside is too large.

The Chrome URL - Archive of obsolete content
some dialog boxes may not work right, however, as they may be expecting arguments to be supplied from the window that opened them.

Toolbars - Archive of obsolete content
actually, because toolbars are just boxes they can actually go anywhere you want, even in the middle of a window.

Tree Box Objects - Archive of obsolete content
ee.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); scrolling the tree you can also scroll the tree using four different methods, similar to those available for listboxes.

XBL Inheritance - Archive of obsolete content
autocompleting textboxes the example above is similar to how the url autocomplete feature works in mozilla.

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 doc...

dialog - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element should be used in place of the window element for dialog boxes.

label - Archive of obsolete content
the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons, checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <checkbox label="a decision" value="1"/> wrapping by default, label text does not wrap.

listbox - Archive of obsolete content
this method does nothing for single-selection list boxes.

scrollbar - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).

scrollbox - Archive of obsolete content
note: avoid nested scroll boxes; it's maddening for the experienced user and confusing for the less experienced user.

toolbar - Archive of obsolete content
this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar.

treecol - Archive of obsolete content
checkbox the content of the columns are checkboxes.

XULRunner Hall of Fame - Archive of obsolete content
30b a xulrunner-based wrapper for 30boxes.com xul explorer "a lightweight xul ide...

2006-11-17 - Archive of obsolete content
he also warns that there will be another outage which will cause the servers in his office as well as all tinderboxes to go down.

Extentsions FAQ - Archive of obsolete content
asking for help in knowing the data that is typed into text boxes.

2006-11-03 - Archive of obsolete content
more tbox changes on the way, most hitting on friday preed discusses killing more tboxes.

2006-11-10 - Archive of obsolete content
configurable start/end hours, optimal size of grid boxes in 24 hours view.

NPAPI plugin developer guide - Archive of obsolete content
-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream ...

Monitoring plugins - Archive of obsolete content
serve: function(subject, topic, data) { if (topic == "experimental-notify-plugin-call" ) { if (data > 0.500) { alert("runtime is: " + data); } } } note: this is just a simplified example and the use of alert() is discouraged as the component can send hundreds of notifications each second and could potentially cause your browser to crash if an excessive number of alert boxes are displayed.

NPP_Print - Archive of obsolete content
an embedded plug-in shares printing with the browser; the plug-in prints the part of the page it occupies, and the browser handles everything else, including displaying print dialog boxes, getting the printer device context, and any other tasks involved in printing, as well as printing the rest of the page.

Common Firefox theme issues and solutions - Archive of obsolete content
z-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.

-moz-border-bottom-colors - Archive of obsolete content
this eliminates the need for nested boxes.

-moz-border-left-colors - Archive of obsolete content
this eliminates the need for nested boxes.

-moz-border-right-colors - Archive of obsolete content
this eliminates the need for nested boxes.

-moz-border-top-colors - Archive of obsolete content
this eliminates the need for nested boxes.

-ms-wrap-through - Archive of obsolete content
the wrapping context of a box is a collection of exclusion areas contributed by its associated exclusion boxes.

::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.

CSS - Archive of obsolete content
elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.

XForms Select Element - Archive of obsolete content
loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul).

Game monetization - Game development
even though the digital market is key and you don't need to print covers and put your game in a physical store in boxes, to earn decent money on selling your games for a fixed price you have to invest your time and money in marketing.

Building up a basic demo with A-Frame - Game development
a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc.

Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
think checked/unchecked for checkboxes, or collapsed/expanded for the <summary> element.

Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
multicol containers the column boxes, with any spacing inserted between column boxes added to the relevant column gaps.

Alpha (alpha channel) - MDN Web Docs Glossary: Definitions of Web-related terms
the two boxes are drawn on top of a paragraph of text.

caret - MDN Web Docs Glossary: Definitions of Web-related terms
html elements that may present a caret these elements provide text entry fields or boxes and therefore make use of the caret.

A cool-looking box - Learn web development
in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.

Test your skills: The Box Model - Learn web development
the box model one with the two boxes below, one is using the standard box model, the other the alternate box model.

Pseudo-classes and pseudo-elements - Learn web development
:indeterminate matches ui elements whose value is in an indeterminate state, usually checkboxes.

Test your skills: floats - Learn web development
the text should then appear between the two boxes as in the image below.

Normal Flow - Learn web development
first of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.

Practical positioning examples - Learn web development
this includes information-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole ui.

Responsive design - Learn web development
on narrow screens the layout displays the boxes stacked on top of one another: on wider screens they move to two columns: note: you can find the live example and source code for this example on github.

Getting started with CSS - Learn web development
if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.

Styling links - Learn web development
<li> elements are normally block by default (see types of css boxes for a refresher), meaning that they will sit on their own lines.

What are browser developer tools? - Learn web development
click the checkboxes next to each declaration to see what would happen if you removed the declaration.

The HTML5 input types - Learn web development
search field search fields are intended to be used to create search boxes on pages and apps.

Other form controls - Learn web development
<select id="multi" name="multi" multiple size="2"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a list, with the optional size attribute determining the height of the widget.

Styling web forms - Learn web development
multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.

Your first form - Learn web development
the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.

Getting started with HTML - Learn web development
note: the terms block and inline, as used in this article, should not be confused with the types of css boxes that have the same names.

Storing the information you need — Variables - Learn web development
you can think of them being like little cardboard boxes that you can store things in.

What is JavaScript? - Learn web development
a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.

JavaScript — Dynamic client-side scripting - Learn web development
every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved.

Dynamic behavior in Svelte: working with variables and props - Learn web development
in addition, we can now check the checkboxes, and the completed status of the relevant todos will now update in the todos array.

Vue conditional rendering: editing existing todos - Learn web development
try doing this: check (or uncheck) one of the todo checkboxes.

Adding a new todo form: Vue events, methods, and models - Learn web development
v-model works across all the various input types, including check boxes, radios, and select inputs.

Rendering a list of Vue components - Learn web development
instead of generating the id for the checkboxes inside your todoitem component, we can turn the id into a prop.

Styling Vue components with CSS - Learn web development
the updated template is below: the app should now have custom checkboxes.

Handling common accessibility problems - Learn web development
up cursor and down cursor (when inside form) change form input values (in the case of things like select boxes).

Accessibility API cross-reference
busy busy busy aria-busy indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Mozilla accessibility architecture
for example, tables support nsiaccessibletable, text supports nsiaccessibletext and edit boxes support nsieditabletext., although this code has been moved into the atk specific directories because it is not currently used in windows.

Accessibility information for UI designers and developers
this includes form elements like inputs and select boxes, but also buttons.

Embedding API for Accessibility
this is a much better alternative than having the user go through a long series of confirm boxes for each new page, for each type of content.

Gecko info for Windows accessibility vendors
event_focus is fired for focus changes on any kind of focusable object event_statechange is used in check boxes, radio buttons, text fields, combo boxes and list boxes.

ZoomText
comboboxes report incorrect bounds, causing zoomtext tracking to move to the wrong area of the screen.

A bird's-eye view of the Mozilla framework
the various x toolkit implementations provide a set of widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars.

Debugging
note that these are replaced frequently by our tinderboxes.

Performance
yedframescript("resources://my-addon/framescript.js"); services.ppmm.removedelayedprocessscript("resources://my-addon/processcript.js"); services.mm.broadcastasyncmessage("my-addon:unload"); services.ppmm.broadcastasyncmessage("my-addon:unload"); } in the frame/process scripts: remove all kinds of listeners remove observer notifications remove custom categories and services nuke sandboxes unload jsms restore content dom states where necessary, e.g.

Introduction to Layout in Mozilla
(tables, blocks, xul boxes) reflow “global” reflows initial, resize, style-change processed immediately via presshell method incremental reflows targeted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands...

CustomizableUI.jsm
if you don't pass awindow, all toolboxes will be notified.

MathML Demo: <mtable> - tables and matrices
here 'a' and 'b' can be other combinations of possibly irregular boxes.

Mozilla Web Developer FAQ
in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers.

about:memory
s ├──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-tables some of the trees ...

NSS API Guidelines
the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11.

JSAPI User Guide
there is no way to fix it except to destroy both sandboxes and start over.

Gecko object attributes
note some widgets which appear to be checkboxes might in fact be cyclers (see "cycles" below).

XForms Accessibility
it can have the following representations: listbox checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the docs).

Building the WebLock UI
at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>.

Preface
lines of code are placed in separate boxes.

Components.utils.createObjectIn
this function is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.

Components.utils.evalInWindow
this function is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.

Components.utils.exportFunction
exportfunction() is made available as a global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.

Components.utils.importGlobalProperties
this function is not intended for sandboxes but for system-privileged scopes.

Folders
folders have a number of interesting attributes: parent subfolder server uri flags and methods getdatabase ( how to get a database of the messages in the folder.) updatefolder (gets new messages for that folder, if applicable, e.g., pop3 inboxes, imap folders, news folders, rss folders) ...

IAccessibleText
the same functionality could be achieved by using the bounding boxes for each character as returned by characterextents().

IAccessibleValue
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) the iaccessiblevalue interface represents a single numerical value and should be implemented by any class that supports numerical value like progress bars and spin boxes.

nsIDOMWindowUtils
this number also counts restyling of pseudo-elements and anonymous boxes.

nsIXPConnect
used to separate code from the same principal into different compartments, as for sandboxes.

XPCOM primitive
an xpcom primitive is an xpcom object that "boxes" a value of a primitive type.

XPCOM reference
(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.)xpcom primitivean xpcom primitive is an xpcom object that "boxes" a value of a primitive type.

Xray vision
as well as these two levels of privilege, chrome code can create sandboxes.

Thunderbird Binaries
they are built every 24 hours by the tinderboxes from the very latest source code.

WebIDL bindings
xpconnect sandboxes doesn't see [securecontext] apis, but this may change in bug 1273687.

Zombie compartments
│ │ │ │ ├──0.04 mb (00.01%) ── style-contexts │ │ │ │ ├──0.03 mb (00.01%) -- frames │ │ │ │ │ ├──0.02 mb (00.00%) ── sundries │ │ │ │ │ └──0.01 mb (00.00%) ── nsblockframe │ │ │ │ ├──0.01 mb (00.00%) ── pres-contexts │ │ │ │ ├──0.01 mb (00.00%) ── line-boxes │ │ │ │ └──0.00 mb (00.00%) ── text-runs │ │ │ ├──3.78 mb (00.76%) ++ js-compartment(https://www.google.de/?gws_rd=ssl) │ │ │ ├──0.51 mb (00.10%) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── elem...

Mozilla
gecko's "almost standards" mode "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.

Gecko Plugin API Reference - Plugins
-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream ...

Browser Console - Firefox Developer Tools
to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.

Browser Toolbox - Firefox Developer Tools
to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging".

Breaking on exceptions - Firefox Developer Tools
to instruct the debugger to pause on an exception, tick these checkboxes in the breakpoints list: pause on exceptions pause on caught exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.

Set event listener breakpoints - Firefox Developer Tools
to break when event listeners are hit, check the boxes next the events you are interested in.

Edit Shape Paths in CSS - Firefox Developer Tools
to understand the margin box, and other boxes used by css shapes see our guide to shapes from box values.

Examine and edit CSS - Firefox Developer Tools
der :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the html view.

Examine and edit the box model - Firefox Developer Tools
viewing the box model with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element: the box model view when an element's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the box ...

Debugging Firefox Desktop - Firefox Developer Tools
enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the developer tools settings.

about:debugging (before Firefox 68) - Firefox Developer Tools
you can also modify the preferences directly in about:config, or by checking "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" in the developer tools settings.

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.

FormData() - Web APIs
those with a name, not disabled and checked (radio buttons and checkboxes) or selected (one or more options within a select).

HTMLElement.hidden - Web APIs
html the html for the two boxes are shown here.

HTMLInputElement - Web APIs
for checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked).

Recommended Drag Types - Web APIs
for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the browser, so you do not need to handle it yourself.

Index - Web APIs
1103 element.clientheight api, cssom view, needsmarkupwork, property, reference 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.

Timing element visibility with the Intersection Observer API - Web APIs
articles each article is contained in an <article> element, styled like this: article { background-color: white; padding: 6px; } article:not(:last-child) { margin-bottom: 8px; } article h2 { margin-top: 0; } this creates article boxes with a white background which float atop the blue background, with a small margin around the article.

MouseEvent.relatedTarget - Web APIs
example try moving your mouse cursor into and out of the red and blue boxes.

Node - Web APIs
node.getboxquads() returns a list of the node's css boxes relative to another node.

WebGL model view projection - Web APIs
box.draw({ top : 1, // x bottom : -1, // x left : -1, // y right : 1, // y depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the results view on jsfiddle exercise a helpful exercise at this point is to move the boxes around the clip space by varying the code to get a feel for how points get clipped and moved around in clip space.

Window.alert() - Web APIs
the following text is shared between this article, dom:window.prompt and dom:window.confirm dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.

Window.devicePixelRatio - Web APIs
html the html creates the boxes containing the instructions and the pixel-ratio box that will display the current pixel ratio information.

window.dump() - Web APIs
it is also explicitly made available in sandboxes.

Window.prompt() - Web APIs
the following text is shared between this article, dom:window.confirm and dom:window.alert dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed.

Using the alert role - Accessibility
the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.

Using the alertdialog role - Accessibility
additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes.

ARIA: Complementary role - Accessibility
these sections are frequently presented as sidebars or call-out boxes.

ARIA: grid role - Accessibility
if the grid includes a column with checkboxes to select rows, this key combination can be used to check that box even if the focus is not on the checkbox.

ARIA: button role - Accessibility
a third mixed state is available for toggle buttons that control other elements, such as other toggle buttons or checkboxes, which do not all share the same value.

WAI-ARIA Roles - Accessibility
these sections are frequently presented as sidebars or call-out boxes.

Architecture - Accessibility
examples of objects not embedded in text are the child options in list boxes and combo boxes.

Accessibility documentation index - Accessibility
these sections are frequently presented as sidebars or call-out boxes.

Mobile accessibility checklist - Accessibility
handling state standard controls such as radio buttons and checkboxes are handled by the operating system.

-moz-user-input - CSS: Cascading Style Sheets
for textboxes, this is the default behavior.

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.

::cue-region - CSS: Cascading Style Sheets
the only exception is that background and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

::cue - CSS: Cascading Style Sheets
the only exception is that background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

:checked - CSS: Cascading Style Sheets
note: for an analogous effect, but based on the :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover reference page.

:hover - CSS: Cascading Style Sheets
note: for an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page.

:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.

Coordinate systems - CSS: Cascading Style Sheets
this simple example creates a set of nested boxes.

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
(additionally, element boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border...

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis.

Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
using a value of justify-content other than normal or stretch will cause column boxes to display at the column-width specified on the multicol container, and the remaining space distributed according to the value of justify-content.

CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

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.

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
flexbox and display: contents the contents value of the display property is a new value that is described in the spec as follows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal.

Flow Layout and Overflow - CSS: Cascading Style Sheets
this is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text.

Introduction to formatting contexts - CSS: Cascading Style Sheets
vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.

CSS Flow Layout - CSS: Cascading Style Sheets
basic example the following example demonstrates block and inline level boxes.

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
in this example i have used grid to lay out a set of boxes that contain links.

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
i can then tidy up the internals of the boxes using a little touch of flexbox.

Consistent list indentation - CSS: Cascading Style Sheets
according to the css box model, the list items' boxes must be displayed within the parent element's content area.

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
therefore we describe boxes as having a width and height, position items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc.

Logical properties for floating and positioning - CSS: Cascading Style Sheets
in the example below i have two boxes — the first has the box floated with float: left, the second with float: inline-start.

CSS Shapes - CSS: Cascading Style Sheets
this changes the length of the wrapping text's line boxes.

Column layouts - CSS: Cascading Style Sheets
you do not need to target individual column boxes for styling.

align-content - CSS: Cascading Style Sheets
baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
uto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } see also this jsfiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes.

box-ordinal-group - CSS: Cascading Style Sheets
when the computed box-direction is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container.

box-sizing - CSS: Cascading Style Sheets
for example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.

column-count - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property.

column-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

columns - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritednocomputed valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split...

<display-internal> - CSS: Cascading Style Sheets
ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes.

<display-outside> - CSS: Cascading Style Sheets
inline the element generates one or more inline element boxes that do not generate line breaks before or after themselves.

flex-wrap - CSS: Cascading Style Sheets
see using css flexible boxes for more properties and information.

font - CSS: Cascading Style Sheets
message-box the system font used in dialog boxes.

grid-area - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-column-start: autogrid-row-end: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-column-start: as specifiedgrid-row-end: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-column-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-column-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-column - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-column-start: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-row-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-row-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

grid-row - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-row-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?

line-height - CSS: Cascading Style Sheets
on block-level elements, it specifies the minimum height of line boxes within the element.

margin-left - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse.

margin-right - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse.

offset-path - CSS: Cascading Style Sheets
yntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles incre...

overscroll-behavior-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.

overscroll-behavior-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.

overscroll-behavior-x - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.

place-content - CSS: Cascading Style Sheets
baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

position - CSS: Cascading Style Sheets
the margins of absolutely positioned boxes do not collapse with other margins.

scroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> c...

scrollbar-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?

shape-outside - CSS: Cascading Style Sheets
by default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

text-decoration-skip - CSS: Cascading Style Sheets
thus, text decoration is drawn for all text content and across atomic inline-level boxes.

text-indent - CSS: Cascading Style Sheets
recommendation the behavior with display: inline-block and anonymous block boxes is explicitly defined.

translateZ() - CSS: Cascading Style Sheets
10000100001t0001 examples in this example, two boxes are created.

transform - CSS: Cascading Style Sheets
that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

user-select - CSS: Cascading Style Sheets
this doesn't have any effect on content loaded as chrome, except in textboxes.

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.

Challenge solutions - Developer guides
solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea.

disabled - HTML: Hypertext Markup Language
<fieldset> <legend>checkboxes</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="rad...

HTML attribute: required - HTML: Hypertext Markup Language
in the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.

Block-level elements - HTML: Hypertext Markup Language
you can visualize them as a stack of boxes.

<aside>: The Aside element - HTML: Hypertext Markup Language
asides are frequently presented as sidebars or call-out boxes.

<input type="password"> - HTML: Hypertext Markup Language
using password inputs password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.

<input type="search"> - HTML: Hypertext Markup Language
it is less likely that you'd want to use validation features in general for search boxes.

<menuitem> - HTML: Hypertext Markup Language
(menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none.

HTML documentation index - HTML: Hypertext Markup Language
120 <input type="checkbox"> element, html, html forms, input, input types, reference, checkbox, form <input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.

CSS and JavaScript animation performance - Web Performance
now you will be able to see three little purple boxes at the upper left corner of the firefox window.

Populating the page: how browsers work - Web Performance
in this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen.

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!

dominant-baseline - SVG: Scalable Vector Graphics
it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.

SVG documentation index - SVG: Scalable Vector Graphics
it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.

onunload - XUL
this code is used by some programmers to annoyingly pop up alert boxes preventing the users from leaving the page.