CSS 102: Inline vs. Inline-Block, Block Formatting Context, Solving Browser-Specific Styling Issues
What’s the difference between inline and inline-block?
Inline does not add a page break after the element. In other words, elements can sit next to each other on the same line. Inline-block works similarly, but it also allows you to set a width and height. Inline-block is often used to display list items horizontally rather than vertically, e.g. a nav menu.
Ways to visually hide content — and how to make it available only for screen readers.
display:none; or visibility: hidden;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers.
width:0px, height:0px or other 0 pixel sizing techniques
As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All of these techniques may result in search engine penalties as they may interpreted to be malicious.
text-indent: -10000px;
This approach moves the content to the left 10000 pixels — thus off the visible screen. Screen readers will still read text with this style. However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or ‘marching ants’ that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left). This is not very pretty. This approach also causes issues in right-to-left languages. As such, this approach may be a viable option if the element does not contain navigable elements, though better techniques are available.
Absolutely positioning content off-screen
Using CSS to move hidden elements to a position off-screen is generally accepted as an accessible method of hiding content visually. Below are styles for visually hiding content that will be read by a screen reader.
.hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:
<div class="hidden">This text is hidden.</div>
Sighted users will not see the hidden content at all. It will be out of their viewing range — hidden well to the left of the visible browser window. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.
CSS clip
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
A fairly modern technique of using CSS to hide or clip content that does not fit into a 1 pixel visible area will essentially hide the content visibly, but still allow it to be read by modern screen readers.
Block Formatting Context (BFC)
A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.
A block formatting context contains everything inside of the element creating it, and is created by the usage of at least one of the following:
- The root element of the document (
<html>). - Floats (elements where
floatisn'tnone). - Absolutely positioned elements (elements where
positionisabsoluteorfixed). - Inline-blocks (elements with
display: inline-block). - Table cells (elements with
display: table-cell, which is the default for HTML table cells). - Table captions (elements with
display: table-caption, which is the default for HTML table captions). - Anonymous table cells implicitly created by the elements with
display: table,table-row,table-row-group,table-header-group,table-footer-group(which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), orinline-table. - Block elements where
overflowhas a value other thanvisible. display: flow-root.- Elements with
contain: layout,content, orpaint. - Flex items (direct children of the element with
display: flexorinline-flex). - Grid items (direct children of the element with
display: gridorinline-grid). - Multicolumn containers (elements where
column-countorcolumn-widthisn'tauto, including elements withcolumn-count: 1). column-span: allshould always create a new formatting context, even when thecolumn-span: allelement isn't contained by a multicol container (Spec change, Chrome bug).
Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats don't affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.
How to approach browser-specific styling issues
- Identify the issue and the offending browser. Then, use a separate style sheet that only loads when that specific browser is being used. (This technique requires server-side rendering.)
- Use libraries such as Bootstrap that handle styling issues, including browser- specific issues, for you.
- Use
autoprefixerto automatically add vendor prefixes to your code. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. - Use Reset CSS or Normalize.css. Resetting strips all default browser styling on elements. For e.g.
margin,padding,font-sizeof all elements are reset to be the same. You will have to redeclare styling for common typographic elements. Normalizing preserves useful default styles rather than “unstyling” everything. It also corrects bugs for common browser dependencies.
