Skip to main content

Geoff Graham

Read, write, coffee, web, repeat.

Article

What’s the deal with declaring font properties on @font-face?

I hope you read that title out loud in your best Seinfeld impression.

A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there?… Read article “What’s the deal with declaring font properties on @font-face?”

Article

The Current State of Telephone Links

Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.… Read article “The Current State of Telephone Links”

Article

I Heart CSS

I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:

  • #000000
  • #000
  • rgb(0, 0, 0)
  • hsla(360, 100%, 0%, 1)
  • black

In the spirit of Valentine’s Day, I thought it would be fun to push this concept a little further with the many ways … Read article “I Heart CSS”

Almanac

bleed

The bleed property in CSS is for specifying space outside of the page box boundary when determining the size of a printed page.

@page :left {
  bleed: 10pt;	
}

@page :top {
  bleed: 5cm;	
}

Note that bleed is part of the Paged Media Module Level 3 spec, which is currently a draft in progress. In fact, bleed is more accurately described as an at-rule descriptor rather than a property since it belongs to the @page at-rule.

Values
  • auto
Read article “bleed”
Almanac

stroke-dasharray

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.

.module {
  stroke-dasharray: 5;
}

Remember:

  • This will override a presentation attribute <path stroke-dasharray="5" ... />
  • This will not override an inline style e.g. <path style="stroke-dasharray: 5;" ... />
Values

The stroke-dasharray property can accept any length, including unitless values:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Unitless values are … Read article “stroke-dasharray”

Almanac

stroke-dashoffset

The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin.

.module {
  stroke-dashoffset: 100;
}

Remember:

  • This will override a presentation attribute <path stroke-dashoffset="100" ... />
  • This will not override an inline style e.g. <path style="stroke-dashoffset: 100;" ... />
Values

The stroke-dashoffset property can accept a percentage or a numeric value.

  • stroke-dashoffset: 100
  • stroke-dashoffset: 25%

Note that … Read article “stroke-dashoffset”

Almanac

stroke-linecap

The stroke-linecap property in CSS is for setting the starting and ending points of a border on SVG shapes.

.module {
  stroke-linecap: round;
}

Remember:

  • This will override a presentation attribute <path stroke-linecap="square" ... />
  • This will not override an inline style e.g. <path style="stroke-linecap: square;" ... />
Values

The stroke-linecap property can accept the following values:

  • butt (default): ends the stroke with a sharp 90-degree angle
  • square: similar to butt except that it extends the stroke beyond the
Read article “stroke-linecap”
Almanac

stroke-width

The stroke-width property in CSS is for setting the width of a border on SVG shapes.

.module {
  stroke-width: 2;
}

Remember:

  • This will override a presentation attribute <path stroke-width="2" ... />
  • This will not override an inline style e.g. <path style="stroke-width: 2;" ... />
Values

The stroke-width property can accept any number, including whole numbers, decimals, and percentages:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Note that a unit identifier (i.e. px and em) are … Read article “stroke-width”

Almanac

stroke

The stroke property in CSS is for adding a border to SVG shapes.

.module {
  stroke: black;
}

Remember:

  • This will override a presentation attribute <path stroke="#fff" ... />
  • This will not override an inline style e.g. <path style="stroke: #fff;" ... />
Values

The stroke property can accept any CSS color value.

  • Named colors — orange
  • Hex colors — #FF9E2C
  • RGB and RGBa colors — rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • HSL and HSLa colors — hsl(32, 100%,
Read article “stroke”
Almanac

fill

The fill property in CSS is for filling in the color of a SVG shape.

.eyeball {
  fill: red;
}

Remember:

  • This will override a presentation attribute <path fill="#fff" ... />
  • This will not override an inline style e.g. <path style="fill: #fff;" ... />
Values

The fill property can accept any CSS color value.

  • Named colors — orange
  • Hex colors — #FF9E2C
  • RGB and RGBa colors — rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • HSL and HSLa colors —
Read article “fill”