<div class="toggles">
<button type="button" id="logical" aria-pressed="false" onclick="toggle(this.id);flipLogical();">
Logical
</button>
</div>
<div id="Wrapper" class="typical">
<div id="MinMax">
<div>
<div id="Position">
<div><span></span><span class="t">top</span><span class="l">inset-block-start</span></div>
<div><span></span><span class="t">left</span><span class="l">inset-inline-start</span></div>
<div id="Margin">
<div><span class="t">margin-top</span><span class="l">margin-block-start</span></div>
<div><span class="t">margin-left</span><span class="l">margin-inline-start</span></div>
<div id="Border">
<div><span class="t">border-top-left-radius</span><span class="l">border-start-start-radius</span></div>
<div><span class="t">border-top</span><span class="l">border-block-start</span></div>
<div><span class="t">border-top-right-radius</span><span class="l">border-start-end-radius</span></div>
<div><span class="t">border-left</span><span class="l">border-inline-start</span></div>
<div id="Padding">
<div><span class="t">padding-top</span><span class="l">padding-block-start</span></div>
<div><span class="t">padding-left</span><span class="l">padding-inline-start</span></div>
<div>
<div>text-align: <span class="t">left</span><span class="l">start</span></div>
<div>text-align: <span class="t">right</span><span class="l">end</span></div>
</div>
<div><span class="t">padding-right</span><span class="l">padding-inline-end</span></div>
<div><span class="t">padding-bottom</span><span class="l">padding-block-end</span></div>
</div>
<div><span class="t">border-right</span><span class="l">border-inline-end</span></div>
<div><span class="t">border-bottom-left-radius</span><span class="l">border-end-start-radius</span></div>
<div><span class="t">border-bottom</span><span class="l">border-block-end</span></div>
<div><span class="t">border-bottom-right-radius</span><span class="l">border-end-end-radius</span></div>
</div>
<div><span class="t">margin-right</span><span class="l">margin-inline-end</span></div>
<div><span class="t">margin-bottom</span><span class="l">margin-block-end</span></div>
</div>
<div><span class="t">right</span><span class="l">inset-inline-end</span><span></span></div>
<div><span class="t">bottom</span><span class="l">inset-block-end</span><span></span></div>
</div>
</div>
<div>
<div class="height min">
<div></div>
<div>
<span class="t">min-height</span><span class="l">min-block-size</span>
</div>
<div></div>
</div>
<div class="height max">
<div></div>
<div>
<span class="t">max-height</span><span class="l">max-block-size</span>
</div>
<div></div>
</div>
</div>
<div>
<div class="width min">
<div></div>
<div>
<span class="t">min-width</span><span class="l">min-inline-size</span>
</div>
<div></div>
</div>
<div class="width max">
<div></div>
<div>
<span class="t">max-width</span><span class="l">max-inline-size</span>
</div>
<div></div>
</div>
</div>
</div>
<p>
Used in the blog post <cite><a href="https://adrianroselli.com/2019/11/css-logical-properties.html" target="_blank" rel="noreferrer noopener">CSS Logical Properties</a></cite>.
</p>
body {
background-color: #fff;
color: #333;
margin: 5em 2em 1em 2em;
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1;
/* letter-spacing: 0.12em; */
/* word-spacing: 0.16em; */
/* font-size: 200%; */
}
/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #101010;
}
a:link, a:visited {
color: #0ff;
}
}
#Padding > *,
#Border > *:not(:nth-child(5)),
#Margin > *:not(:nth-child(3)),
#Position > *:not(:nth-child(3)) {
padding: .5em;
display: flex;
justify-content: center;
align-items: center;
}
#Padding, #Margin, #Position {
display: grid;
grid-template-columns: 1.75em auto 1.75em;
grid-template-rows: auto auto auto;
text-align: center;
background-color: #E3DCFF;
color: #000000;
}
#Position {
background-color: transparent;
color: inherit;
}
#Position > div:nth-child(1),
#Position > div:nth-child(5) {
padding: .2em;
}
#Position > div:nth-child(2),
#Position > div:nth-child(4) {
flex-wrap: wrap;
align-content: center;
padding: .2em;
}
#Position > div:nth-child(2) {
margin-left: -.6em;
}
#Position > div:nth-child(4) {
margin-right: -.6em;
}
#Position > div:nth-child(1) > span,
#Position > div:nth-child(5) > span {
padding: .5em;
width: 50%;
}
#Position > div:nth-child(2) > span,
#Position > div:nth-child(4) > span {
flex: 1 1 100%;
padding: .5em;
/* outline: 2px dotted #f00; */
min-height: 7em;
}
#Position > div:nth-child(1) > span {
text-align: left;
}
#Position > div:nth-child(5) > span,
#Position > div:nth-child(2) > span,
#Position > div:nth-child(4) > span {
text-align: right;
}
#Position > div:nth-child(1) > span.t,
#Position > div:nth-child(1) > span.l {
border-left-width: .1em;
border-left-style: solid;
}
#Position > div:nth-child(5) > span.t,
#Position > div:nth-child(5) > span.l {
border-right-width: .1em;
border-right-style: solid;
}
#Position > div:nth-child(2) > span.t,
#Position > div:nth-child(2) > span.l,
#Position > div:nth-child(4) > span.t,
#Position > div:nth-child(4) > span.l {
border-bottom-width: .1em;
border-bottom-style: solid;
}
#Position > div > span {
border-color: #737373;
}
#Margin {
background-color: #FDFFDF;
border: .1em dashed #D8E60A;
}
#Padding > *:nth-child(1),
#Padding > *:nth-child(5),
#Margin > *:nth-child(1),
#Margin > *:nth-child(5),
#Position > *:nth-child(1),
#Position > *:nth-child(5) {
grid-column: 2;
}
#Padding > *:nth-child(1),
#Margin > *:nth-child(1),
#Position > *:nth-child(1) {
grid-row: 1;
}
#Padding > *:nth-child(5),
#Margin > *:nth-child(5),
#Position > *:nth-child(5) {
grid-row: 3;
}
#Padding > *:nth-child(2),
#Padding > *:nth-child(4),
#Margin > *:nth-child(2),
#Margin > *:nth-child(4),
#Position > *:nth-child(2),
#Position > *:nth-child(4) {
grid-row: 1 / span 3;
}
#Padding > *:nth-child(3) {
background-color: #CFF0FB;
border: .1em dashed #54A9FF;
}
#Padding > *:nth-child(3) {
display: flex;
justify-content: space-between;
}
#Padding > *:nth-child(3) > div {
text-align: left;
}
#Padding > *:nth-child(3) > div:nth-child(2) {
text-align: right;
}
#Border {
display: grid;
grid-template-columns: 1.75em auto auto auto 1.75em;
grid-template-rows: auto auto auto;
text-align: center;
background-color: #737373;
color: #fff;
}
#Wrapper.typical .l {
display: none;
}
#Wrapper.logical .t {
display: none;
}
#Border > *:nth-child(1),
#Border > *:nth-child(7) {
grid-column: 1 / span 2;
justify-content: flex-start;
text-align: left;
}
#Border > *:nth-child(3),
#Border > *:nth-child(9) {
grid-column: 4 / span 2;
justify-content: flex-end;
text-align: right;
}
#Border > *:nth-child(5) {
grid-column: 2 / span 3;
}
#Padding > *:nth-child(2) span,
#Padding > *:nth-child(4) span,
#Border > *:nth-child(4) span,
#Border > *:nth-child(6) span,
#Margin > *:nth-child(2) span,
#Margin > *:nth-child(4) span,
#Position > *:nth-child(2) span,
#Position > *:nth-child(4) span {
writing-mode: vertical-rl;
text-orientation: sideways;
/* display: block; */
margin: auto;
white-space: nowrap;
}
#Padding > *:nth-child(2) span,
#Border > *:nth-child(4) span,
#Margin > *:nth-child(2) span,
#Position > *:nth-child(2) span {
transform: rotate(180deg);
}
#MinMax {
padding: 2px;
display: grid;
grid-template-columns: 20fr 1fr;
grid-template-rows: auto auto;
}
#MinMax > div:nth-child(2) {
grid-row: 1;
grid-column: 2;
display: flex;
}
.width, .height {
display: flex;
margin: 1em 1.75em;
}
.height {
flex-direction: column;
align-items: stretch;
align-content: stretch;
margin: 2.25em 0 2.25em 1.5em;
}
.height div:nth-child(2) {
writing-mode: vertical-rl;
text-orientation: sideways;
display: block;
margin: auto;
white-space: nowrap;
}
.width div, .height div {
flex: 1 1 auto;
min-width: 1em; /* weird Chrome/FF bug */
/* outline: 1px dotted #f00; */
}
.width div:nth-child(2), .height div:nth-child(2) {
flex: 0 1 auto;
text-align: center;
white-space: nowrap;
padding: 0 1em;
}
.height div:nth-child(2) {
padding: 1em 0;
}
.height div:not(:nth-child(2)) {
background: linear-gradient(90deg, transparent 0%, transparent 50%, #333 50%, transparent calc(50% + .1em), transparent 100%);
}
.width div:not(:nth-child(2)) {
background: linear-gradient(0deg, transparent 0%, transparent 50%, #333 50%, transparent calc(50% + .1em), transparent 100%);
}
.height.max div:nth-child(1),
.height.min div:nth-child(3) {
border-top: .1em solid #333;
}
.height.min div:nth-child(1),
.height.max div:nth-child(3) {
border-bottom: .1em solid #333;
}
.width.max div:nth-child(1),
.width.min div:nth-child(3) {
border-left: .1em solid #333;
}
.width.min div:nth-child(1),
.width.max div:nth-child(3) {
border-right: .1em solid #333;
}
/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
#Position > div > span {
border-color: #B1B1B3;
}
#Padding, #Margin {
color: #f9f9f9;
}
#Padding {
background-color: #6657A6;
}
#Margin {
background-color: #73764A;
border-color: #BDCA00;
}
#Border {
background-color: #38383D;
}
#Padding > *:nth-child(3) {
background-color: #407AA4;
border-color: #00B8FF;
}
.width.max div:nth-child(1),
.width.max div:nth-child(3),
.width.min div:nth-child(1),
.width.min div:nth-child(3),
.height.max div:nth-child(1),
.height.max div:nth-child(3),
.height.min div:nth-child(1),
.height.min div:nth-child(3) {
border-color: #B1B1B3;
}
.width div:not(:nth-child(2)) {
background: linear-gradient(0deg, transparent 0%, transparent 50%, #B1B1B3 50%, transparent calc(50% + .1em), transparent 100%);
}
.height div:not(:nth-child(2)) {
background: linear-gradient(90deg, transparent 0%, transparent 50%, #B1B1B3 50%, transparent calc(50% + .1em), transparent 100%);
}
}
/* Toggle */
/* https://adrianroselli.com/2019/08/under-engineered-toggles-too.html */
.toggles {
margin: 0;
padding: .5em 2em 1em 2em;
border-bottom: .1em solid #ccc;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
}
.toggles [aria-pressed] {
display: block;
box-sizing: border-box;
border: none;
color: inherit;
background: none;
font: inherit;
line-height: inherit;
text-align: left;
padding: .4em 0 .4em 4em;
position: relative;
}
.toggles [aria-pressed][disabled],
.toggles [aria-pressed][disabled]:hover {
color: #999;
}
.toggles [aria-pressed]:focus,
.toggles [aria-pressed]:hover {
color: #00f;
outline: none;
}
.toggles [aria-pressed]:focus::before,
.toggles [aria-pressed]:hover::before {
box-shadow: 0 0 0.5em #333;
}
.toggles [aria-pressed]:focus::after,
.toggles [aria-pressed]:hover::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E");
background-size: 30%;
background-repeat: no-repeat;
background-position: center center;
}
.toggles [aria-pressed]::before,
.toggles [aria-pressed]::after {
content: "";
position: absolute;
height: 1.5em;
transition: all 0.25s ease;
}
.toggles [aria-pressed]::before {
left: 0;
top: 0.2em;
width: 3em;
border: 0.2em solid #767676;
background: #767676;
border-radius: 1.1em;
}
.toggles [aria-pressed]::after {
left: 0;
top: 0.25em;
background-color: #fff;
background-position: center center;
border-radius: 50%;
width: 1.5em;
border: 0.15em solid #767676;
}
.toggles [aria-pressed=true]::after {
left: 1.6em;
border-color: #36a829;
color: #36a829;
}
.toggles [aria-pressed=true]::before {
background-color: #36a829;
border-color: #36a829;
}
.toggles [aria-pressed][disabled]::before {
background-color: transparent;
border-color: #ddd;
}
.toggles [aria-pressed][disabled]::after {
border-color: #ddd;
}
.toggles [aria-pressed][disabled]:hover {
color: #999; /* case for CSS custom property if not supporting IE/Edge */
}
.toggles [aria-pressed][disabled]:hover::before {
box-shadow: none;
}
.toggles [aria-pressed][disabled]:hover::after {
background-image: none;
}
/* Put toggles on the right like the iOS the kids like */
.toggles.flip [aria-pressed]::before,
.toggles.flip [aria-pressed]::after {
left: auto;
right: 0;
}
.toggles.flip [aria-pressed]::after {
left: auto;
right: 1.6em;
}
.toggles.flip [aria-pressed=true]::after {
right: 0;
}
.toggles.flip [aria-pressed] {
padding-left: 0;
padding-right: 4em;
}
/* Windows High Contrast Mode Support */
@media screen and (-ms-high-contrast: active) {
.toggles [aria-pressed]:focus::before,
.toggles [aria-pressed]:hover::before {
outline: 1px dotted windowText;
outline-offset: 0.25em;
}
.toggles [aria-pressed]::after {
background-color: windowText;
}
.toggles [aria-pressed][disabled]::after {
background-color: transparent;
}
}
/* Reduced motion */
@media screen and (prefers-reduced-motion: reduce) {
.toggles [aria-pressed]::before,
.toggles [aria-pressed]::after {
transition: none;
}
}
/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
.toggles {
color: #fff;
background-color: #101010;
border-color: #444;
}
fieldset.toggles {
border: 0.1em solid rgba(255, 255, 255, 0.15);
}
.toggles [aria-pressed]:focus,
.toggles [aria-pressed]:hover {
color: #99f;
}
.toggles [aria-pressed]::before {
border-color: #808080;
background: #808080;
}
.toggles [aria-pressed]::after {
background-color: #101010;
}
.toggles [aria-pressed]:focus::after,
.toggles [aria-pressed]:hover::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E");
}
.toggles [aria-pressed][disabled]::before,
.toggles [aria-pressed][disabled]::after {
border-color: #555;
}
}
/* RTL */
/* https://twitter.com/dror3go/status/1102946375396982784 */
*[dir="rtl"] .toggles [aria-pressed] {
padding-left: 0;
padding-right: 4em;
}
*[dir="rtl"] .toggles [aria-pressed]::before,
*[dir="rtl"] .toggles [aria-pressed]::after {
left: auto;
right: 0;
}
*[dir="rtl"] .toggles [aria-pressed]::after {
right: 0;
}
*[dir="rtl"] .toggles [aria-pressed=true]::after {
right: 1.6em;
}
/* Put toggles on the right like the iOS the kids like */
*[dir="rtl"] .toggles.flip [aria-pressed]::before,
*[dir="rtl"] .toggles.flip [aria-pressed]::after {
left: 0;
right: auto;
}
*[dir="rtl"] .toggles.flip [aria-pressed]::after {
right: auto;
left: 1.6em;
}
*[dir="rtl"] .toggles.flip [aria-pressed=true]::after {
left: 0;
}
*[dir="rtl"] .toggles.flip [aria-pressed] {
padding-right: 0;
padding-left: 4em;
}
function toggle(btnID) {
var theButton = document.getElementById(btnID);
if (theButton.getAttribute("aria-pressed") == "false") {
theButton.setAttribute("aria-pressed", "true");
} else {
theButton.setAttribute("aria-pressed", "false");
}
}
function flipLogical() {
var theWrapper = document.getElementById("Wrapper");
if (theWrapper.getAttribute("class") == "typical") {
theWrapper.setAttribute("class", "logical");
} else {
theWrapper.setAttribute("class", "typical");
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.