CSS Logical Properties

Andy Bell shares a tutorial on how to “create spacing that works regardless of the direction of your content or the environment of your users” with CSS logical properties.

See the Pen Logical Properties Demo by Andy Bell (@andybelldesign) on CodePen.

You might also like

CSS :is() pseudo class use cases

November 10, 2022

15

CSS :Is() Pseudo Class Example

November 10, 2022

13

Created on March 13, 2020 Updated on March 13, 2020. A Pen by Andy Bell on CodePen. License.

index.html

<button dir="ltr" class="button" type="button">
  <svg viewBox="0 0 24 24">
    <path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
  </svg>
  <span>A nice button</span>
</button>

script.js

const button = document.querySelector("button");

button.addEventListener("click", evt => {
  if (button.getAttribute("dir") === "ltr") {
    button.setAttribute("dir", "rtl");
  } else {
    button.setAttribute("dir", "ltr");
  }
});

style.css

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2rem;
  color: #ffffff;
  background: hsl(338, 81%, 41%);
  border: none;
  font-family: Courier New, monospace;
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: 0.03ch;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover:focus {
  outline: none;
}

.button svg {
  margin-inline-end: 0.5em;
  width: 1.4em;
  height: 1.4em;
  fill: currentcolor;
  transform: translateY(-1px); 
}

body {
  display: grid;
  place-items: center;
  background: hsl(39, 100%, 97%);
  color: hsl(222, 30%, 16%);
}

styles

<link href="https://unpkg.com/modern-css-reset/dist/reset.min.css" rel="stylesheet" />