Articles by
Marie Mosley

Writer, Almanac Adjuster, Chief of the Comma Police

Obviously Just Use This Crazy Sexy Simple and Easy Content Tester

Actually, don't use most of those words.

Mapbox has open-sourced the content testing tool they use to automatically review all of their documentation, retext-mapbox-standard.

Think of it as a pedantic robot that makes sure we write simple English, use consistent terminology, and avoid insensitive language.

This "auto-nitpicker" uses rules for writing clearly and sensitively, gathered from sources like The National Center on Disability and Journalism, plainlanguage.gov, and our own list of words to avoid in educational writing.

The Image Replacement Museum

CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1></h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.

Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques are falling out of use. But, we feel it's worth preserving them in this museum to celebrate the ingenuity that went into their creation, and to remind ourselves of a bygone era in web design.

These demos will take you through a comprehensive history of image replacement on the web, stretching back to 2003. Each demo is presented with its source link, if available—some are lost to the ages now.

(more…)

Learning Fluency

Sara Simon's recent Burlington Ruby Conf talk, repurposed as an essay. It's about exploring different approaches to becoming fluent in a programming language. But, it's also about:

[W]hat we can learn about software development when we step away from our computers and into kitchens. When we step away from our computers and into newsrooms. When we step into chess tournaments. When we step into foreign languages classes. When we step onstage.

It's a long, deep read that rewards rereading.

Native CSS Scroll Snap Points

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior... Can you imagine how easy would be creating such effects using CSS only?

The full specification is worth a review.

Using Pinterest Data Attributes and Meta Tags

Pinterest is kind of a big deal. In the blog and e-commerce world, it's threatening to edge out Google as the most important search engine. That's the world I come from, so I've had lots of opportunity to work with Pinterest's data attributes and meta tags. These bits of markup give site owners control over how their images and site are presented on Pinterest, and what can and can't be “pinned”.

Before we get into the tag and attribute details, let me give you an overview of how Pinterest users create pins, and what types of images work for Pinterest.

(more…)

box-decoration-break

The box-decoration-break property lets you control how box decorations are drawn across the fragments of a "broken" element. An element can break into fragments at the end of a line, over columns, or at page breaks.

.module {
  box-decoration-break: clone;
}

The box decoration properties controlled by box-decoration-break are: background (and its sub-properties), border, border-radius, border-image, box-shadow, margin, and padding.

Values

  • slice: the initial value. Box decorations apply to the element as a whole and break at the edges of the element fragments.
  • clone: decorations apply to each fragment of the element as if the fragments were unbroken, individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment.

Usage

box-decoration-break can help maintain a consistent design among the fragments of a broken element.

In this example image, a paragraph with an orange border and a 1em top margin is broken across two columns. The top paragraph has the initial box-decoration-break value of slice. The bottom paragraph has the clone value.

In the top paragraph, the border is sliced at the column break, and the top margin applies to the first fragment only. On the bottom paragraph, the border is drawn around all four edges of both fragments of the paragraph. The margin is also applied to each fragment.

Another common case is inline text that breaks into multiple lines. Styles applied to those can look weird/bad unless you clone the styles:

Article and demo of that.

Demo

The box-decoration-break property has limited browser support. This demo works best in Firefox 37+, where box-decoration-break is fully supported.

See the Pen 1074b03653ffb32b88a6f88823c3de34 by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

At the time of this writing only Firefox fully supports box-decoration-break. Webkit browsers and Opera partially support box-decoration-break on inline elements across line breaks, but not across column or page breaks.

Chrome Safari Firefox Opera IE Android iOS
31* 7* 37 29* None 4.4* 7.1*

* partial support with -webkit prefix.

all

The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction.

.module {
  all: unset;
}

The point of it is allowing for component-level resetting of styles. Sometimes it's far easier to start from scratch with styling rather than fight against everything that is already there.

Values

  • initial: resets all of the selected element's properties to their initial values as defined in the CSS spec.
  • inherit: the selected element inherits all of its parent element's styling, including styles that are not normally inheritable.
  • unset: the selected element inherits any inheritable values passed down from the parent element. If no inheritable value is available, the initial value from the CSS spec is used for each property.

A few properties do not have an initial value explicitly defined in the spec and instead allow the user agent to set the initial value — color and font-family are two examples. If all: initial; or all: unset; is applied, the user agent default value is used as the initial value for these properties.

all is considered a "shorthand" property because it allows us to control the values of every CSS property at once with a single declaration. However, unlike most shorthand properties, there is no practical "longhand" version and it has no sub-properties.

Demo

See the CSS tab for comments that indicate which properties are inheritable. Notice that when the inherit value is used, the div inherits every property from its parent, including it's width, padding, and border, which are not normally inherited.

See the Pen all property demo by CSS-Tricks (@css-tricks) on CodePen.

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
37 None 27 24 11 None None

Iconifying Content

Will Boyd with a clever tutorial on using CSS transforms to turn page elements into thumbnail-sized previews of themselves.

text-decoration-line

The text-decoration-line property decorates text with an underline, overline, line-through, or a combination of those lines.

p {
  text-decoration-line: underline;
}

Values

  • none: no line is added, and any existing lines are removed — for example none removes the default underline on links.
  • underline: adds a 1px underline below the text.
  • overline: adds a 1px overline above the text.
  • line-through: adds a 1px line through the text.
  • inherit: inherits the decoration of the parent.

The value blink is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.

Combining Values

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:

p {
  text-decoration-line: overline underline line-through;
}

Usage

The text-decoration-line property is practically identical to the original text-decoration property. If all you want to do is add a line or lines to your text, text-decoration is a better choice because it it supported by every browser, even very old ones. Generally, using a text-decoration-line declaration only makes sense when you're writing a longhand style rule that includes text-decoration-style or a text-decoration-color declaration. If you want to use all three together, you can use the shorthand text-decoration property.

Shorthand

text-decoration-line can be used in combination with text-decoration-style and text-decoration-color in the shorthand CSS3 text-decoration property (currently only Firefox fully supports this):

.underlined {
  text-decoration: underline dotted red;
}

Demo

This demo will work in Safari, Firefox, and Chrome with experimental web platform features enabled. The blink value is not included.

See the Pen text-decoration-line by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
31 * † 7.1 * 6 ‡ None None None 8 *

* with -webkit prefix
† with experimental Web Platform features flag enabled
‡ 6 - 35 with -moz prefix, unprefixed as of 36.

text-underline-position

The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied.

a {
  text-underline-position: under;
}

Values

These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation:

  • auto: the default. The browser will decide between placing the underline at the text's baseline or under it.
  • inherit: inherits the underline position of the parent.
  • under: places the underline under the text with extra space to prevent crossing descenders.
  • left: for vertical writing modes. This places the line to the left of the text.
  • right: for vertical writing modes. This places the line to the right of the text.

Microsoft uses a different set of values for Internet Explorer:

  • auto: the default. Places the underline below the text for all languages except Japanese (see the MSDN link in the "More Information" section below for details).
  • above: positions the underline above the text. Visually identical to text-decoration: overline;
  • below: positions the underline below the text. Note that this is different from under — it will not clear descenders.
  • auto-pos works the same as the MS implementation of auto.

Demo

At the time of this writing, text-underline-position is only partially supported by Chrome (33+ with experimental flags enabled) and Internet Explorer 6+. Chrome supports the auto, inherit, and under values from the W3C candidate recommendation, while IE supports its own alternate values.

This demo shows the under and below values in the browsers that support them.

See the Pen text-underline-position by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
33 * None None None 6 † None None

* with -webkit prefix and experimental flags enabled in chrome://flags. left and right values not supported.
† with -ms prefix and IE-specific values.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag