Supporting logical properties

I wrote recently about making the switch to logical properties over on The Session.

Initially I tried ripping the band-aid off and swapping out all the directional properties for logical properties. After all, support for logical properties is green across the board.

But then I got some reports of people seeing formating issues. These people were using Safari on devices that could no longer update their operating system. Because versions of Safari are tied to versions of the operating system, there was nothing they could do other than switch to using a different browser.

I’ve said it before and I’ll say it again, but as long as this situation continues, Safari is not an evergreen browser. (I also understand that problem lies with the OS architecture—it must be incredibly frustrating for the folks working on WebKit and/or Safari.)

So I needed to add fallbacks for older browsers that don’t support logical properties. Or, to put it another way, I needed to add logical properties as a progressive enhancement.

“No problem!” I thought. “The way that CSS works, I can just put the logical version right after the directional version.”

element {
  margin-left: 1em;
  margin-inline-start: 1em;

But that’s not true in this case. I’m not over-riding a value, I’m setting two different properties.

In a left-to-right language like English it’s true that margin-inline-start will over-ride margin-left. But in a right-to-left language, I’ve just set margin-left and margin-inline-start (which happens to be on the right).

This is a job for @supports!

element {
  margin-left: 1em;
@supports (margin-inline-start: 1em) {
  element {
    margin-left: unset;
    margin-inline-start: 1em;

I’m doing two things inside the @supports block. I’m applying the logical property I’ve just tested for. I’m also undoing the previously declared directional property.

A value of unset is perfect for this:

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.

Now I’ve got three CSS features working very nicely together:

  1. @supports (also known as feature queries),
  2. logical properties, and
  3. the unset keyword.

For anyone using an up-to-date browser, none of this will make any difference. But for anyone who can’t update their Safari browser because they can’t update their operating system, because they don’t want to throw out their perfectly functional Apple device, they’ll continue to get the older directional properties:

I discovered that my Mom’s iPad was a 1st generation iPad Air. Apple stopped supporting that device in iOS 12, which means it was stuck with whatever version of Safari last shipped with iOS 12.

Have you published a response to this? :


Chris Coyier

margin-left doesn’t override margin-inline-start, they are 2 different properties. If you can’t go all-in yet (because, say, old Safari), you have to use @​supports to check support, unset the non-logical property, then set the logical property.

Gerasimos Tsiamalos

“Because versions of Safari are tied to versions of the operating system, there was nothing they could do other than switch to using a different browser.” It is the new IE and we’ll have to deal with this bs for years to come.

Dana Byerly

A couple of weeks ago Jeremy Keith had a post on refactoring an existing site to use logical properties. Not entirely sure about logical properties? has a nice summation

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen.

Instead of using margin-top: 1rem; it would be margin-block-start: 1rem;, using a relative “start” instead of physical “top” to indicate direction. Using relative direction better supports language translation and multi-lingual sites. The post at has a good overview that includes examples. MDN also has a good overview that includes links to all the properties.

Jeremy’s refactor seemed to go well, including some interesting observations. He had a nice follow-up post on browser support and progressive enhancement using feature queries that should be noted, especially for the how-to on using @supports.

Around these parts I went (almost!) all in on logical properties for my new blog thingie, affectionately known as the Junk Drawer. Initially I wrote all the styles using logical properties, but after reading Jeremy’s posts I realized that the styles from my Eleventy starter needed to be converted. Feel free to take a peak at Github.

The one thing I didn’t convert were units, they were mentioned in the post but upon further investigation vi (view inline) and vb (view block) are not yet as widely supported as sizing, spacing and borders.

Overall it was easier than I thought to remap my mind to write logical properties, at least for spacing. No doubt using flexbox and grid made the mental leap easier. In the flurry of new CSS things to keep up with I missed sizing, borders and text-align start end.

Borders and text-align were easy enough to absorb, but something about sizing (width and height) didn’t easily fit in my head. It’s like when you meet someone and get their name slightly wrong, and then they’re always the wrong name to you. My mind wants to type max-size-inline or size-block instead of the correct max-inline-size or block-size. I regret even typing the incorrect examples! But I’m sure I can make them mental muscle memory in good time.

Another thing I noticed is that the shorthand for “start” and “end” can be used within the spacing logical shorthand. Let’s say your original padding is this…

/* shorthand order is top right bottom left */.my-class { padding: 1rem 2rem 3rem .5rem;}

According to the examples at MDN you can use the shorthand to include both the start and end values within the overall logical shorthand. Making your original example…

/* shorthand order is start end */.my-class { padding-block: 1rem 3rem; padding-inline: .5rem 2rem;}

I made a quick Pen to validate this example because I tripped up on the order for inline. I was looking at the physical example while typing and initially put the “end” value first, but the logical shorthand order is “start end”.

Back to Jeremy’s second post about browser support. The Junk Drawer is a very, very low traffic personal site, which makes for a great low stakes way to get used to using logical properties. I checked my stats to see if I’ve had any visitors using browsers that don’t support the logical properties I used, and I haven’t had any yet.

The current version of the new DuckDuckGo Mac browser doesn’t support yet them, and the only visitor I’ve had using it was me while doing my test. I sent feedback about it! None of the DuckDuckGo browsers are listed at Can I Use but my test of the iOS version shows support, at least for spacing, sizing and borders. Best guess is that the Android versions support it too?

At any rate, I found logical properties easy to use and am look forward to using them more in the future. And speaking of the future, Miriam Suzanne had a good reply post to Jeremy’s original post to discuss longer terms plans from the CSS and Internationalization working groups. If you have any opinions on the matter you should let them know.

# Posted by Dana Byerly on Sunday, October 2nd, 2022 at 12:00am

1 Like

# Liked by Marty McGuire on Friday, September 30th, 2022 at 3:42pm

Previously on this day

1 year ago I wrote Twenty years of writing on my website

This online journal is two decades old.

6 years ago I wrote Someday

Changing defaults in browsers …someday.

11 years ago I wrote Ten

Happy birthday to this.

13 years ago I wrote Culchavulching

In Brighton, no-one can hear you geek out.

13 years ago I wrote Full Frontal

Be in Brighton on November 20th.

14 years ago I wrote Reading immaterial

Something for your digital bookshelf.

14 years ago I wrote Automata

Carla Diana talks about robots at Flash on the Beach in Brighton.

15 years ago I wrote Kung Shui

Ajax and accessibility; a presentation transcribed.

16 years ago I wrote Sydney to Melbourne

It’s time for me to expand my Australian horizons.

16 years ago I wrote Wrapping up Web Directions South

Two thumbs up from me.

17 years ago I wrote He comes from a land down under

The podcasts and the photos have started coming in from Web Essentials in Syndey. Oh, how I wish I could be there!

19 years ago I wrote WiFi Regained

Remember how I was saying that the wireless reception in my iBook went all screwy a while back? Well, I sent the iBook off to Apple so that they could have a look at it.

20 years ago I wrote Anniversary

I have been blogging now for exactly one year.

20 years ago I wrote dooce

Rejoice! For Heather Hamilton is back.

20 years ago I wrote JCPenney

Jessica refuses to believe that JCPenney are actually selling the "Forward Command Post" model in their catalogue:

21 years ago I wrote Welcome to my world

This is my first entry in my first online journal.