Using CSS Logical Properties TODAY

Intro

I read Elad Shechter’s article on the new CSS Logical Properties (LP) and found it useful and thought to start using them today.

I’ve checked which browser doesn’t support these new LP and found that IE and EDGE don’t support them.

I thought, what can I do to start using all of those new properties this today and came up with an idea in collaboration with Eli Philosoph to write a mixin to give the user the ability to use LP along with a fall back to old version and to avoid writing the entire property name every time (they are so long to write).

I set down and started to write the mixin, and found that there are some issues to write a single mixin for this purpose and two mixins ere needed.
One for border, margin, padding, height, width, float and text-align properties, and one for position properties.

In this post I will not write about the difference between each property. You can find this information on Elad’s article.

The writing mode (WM) property

I’ve added 1 value for writing mode and with this variable, we can change the direction of the element

The position mixin:

Let’s break it apart:
- We have 4 values
- Each value gets “null” as a default value
- Each value will set to the correct LP with the fall back

For all of these variables, I would have built a table more organized and prevents repetitions:

$b-start — Will set to top (fall back) and inset-block-start
$i-start — Will set to right (fall back) and inset-inline-start
$b-end — Will set to bottom (fall back) and inset-block-end
$i-end — Will set to left (fall back) and inset-inline-end

Calling the mixin as follows:

will result on the generated CSS file as:

Calling the mixin as follows:

will result on the generated CSS file as:

I’ve kept using the “old” box-model “compass” for easy use:

The second mixin — and the bigger one — is to support the border, margin, padding, height, width, float and text-align properties

These are the properties of the mixin:

  • $t- Type of the property we want to create - border, margin, padding, height, width, float and text-align
  • $values… - List of the values we want to give for each property

Margin and Padding properties

Margin and Padding properties getting the same properties so they are together on the mixin

Calling the mixin as follow:

will result on the generated CSS file as:

But if’ll pass the WM property and set it to “ver-l” as follow:

This will result on the generated CSS file as:

As you can see, the order of the properties changed and the padding-top getting the 4rem even it is the last one

Border property

For border property we can pass the WM property and each 1 to 4 borders properties

Calling the mixin as follow:

will result on the generated CSS file as:

But if we’ll change the WM variable to ‘ver-r’ the calling the mixin as follow:

will result on the generated CSS file as:

As you can see, the top and bottom border getting the 2px width and this is because of the of the WM from horizontal to vertical

Height, Width properties

First, we need to check the number of properties that passed and than we need to check the WM. If the WM is set to “vertical-lr” or “vertical-rl” then we set the values for each property.

Calling the mixin as follow:

will result on the generated CSS file as:

Same as for width

Calling the mixin as follow:

will result on the generated CSS file as:

Setting the WM property, will change the property from height to width and from block to inline (Block — top to bottom, Inline — left to right — read more on Elad’s article)

Float property

Float property will not get the WM property so we don’t need to check it (but we must pass an empty value), we are checking only the direction of floating

Calling the mixin as follow:

will result on the generated CSS file as:

Text align property

Text align property will not get the WM property like the float, so we don’t need to check it (but we must pass an empty value), we are checking only the direction of text-align

Calling the mixin as follow:

will result on the generated CSS file as:

Let’s see the entire mixin together

As you can see there are a lot of usage of @IF / @ELSE in the mixin, they are used to simplify / break apart the values and set them to their corresponding property of the new LP

Now that I’ve walked you through my created mixin, you can start using CSS logic properties on every browser and you can start today :-)

You can see all of the examples above in this codepen that I’ve created and you can download the mixin from github

Thanks to Oshrat Choen for her help with the writing of this article

CSS & HTML expert @ Amdocs