CSS Defensive Mindset
— @nirazanbasnet
Index
CSS Logical Properties
-
Properties that depend on the direction of the HTML document.
.avatar {
margin-right: 1rem;
}
html[dir="rtl"] .avatar {
margin-right: 0;
margin-left: 1rem;
}Normal Approach
-CSS Logical Properties
.avatar {
margin-inline-end: 1rem;
}With Logical Approach
-CSS Logical Properties
How it works?
-CSS Logical Properties
.card {
padding-inline-start: 2.5rem;
padding-inline-end: 1rem;
border-inline-start: 6px solid blue;
}
.card__icon {
margin-inline-end: 1rem;
}Example
-CSS Logical Properties
CSS Parent Selector (:has)
-CSS Logical Properties
/* HTML */
<section>
<div class="section-header">
<h2>Latest articles</h2>
<a href="/articles/">See all</a>
</div>
</section>/* CSS */
.section-header {
display: flex;
justify-content: space-between;
}
/* If there is a link, add the following */
.section-header:has(> a) {
align-items: center;
border-bottom: 1px solid;
padding-bottom: 0.5rem;
}CSS Parent Selector (:has)
-CSS Logical Properties
CSS pseudo-class (:is)
-CSS Logical Properties
ul li,
ol li {}
/* We could write */
:is(ul, ol) li {
/* */
}
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
/* ... which would be the equivalent of: */
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
div:is(.cool, .fun) {
color: red;
}
/*
<div class="cool">match</div>
<div class="fun">match</div>
<p class="fun">not match</p>
*/- selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
CSS pseudo-class (:where)
-CSS Logical Properties
/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
header p {
color: blue;
}
/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}- Selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.
Intrinsic Sizing
-
Two ways of sizing, intrinsic and extrinsic.
-
The sizing of an element depends on its content size.
-
Using fixed values for the width or height of an element.
-
Extrinsic Sizing
.div {
width: 100px;
}Min content
-Intrinsic Sizing
/* HTML */
<h2>A title for an awesome article</h2>
/* CSS */
h2 {
width: min-content;
}Max content
-Intrinsic Sizing
/* HTML */
<h2>A title for an awesome article</h2>
/* CSS */
h2 {
width: max-content;
}
Fit content
-Intrinsic Sizing
/* HTML */
<h2>A title for an awesome article</h2>
/* CSS */
h2 {
width: fit-content;
}It’s a combination of using min-content and max-content.
Defensive CSS
-
Avoid a certain CSS issue or behaviors from happening.
Spacing
-Defensive CSS
Spacing
-Defensive CSS
.title {
margin-right: 1rem;
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Lock Scrolling Chaining
-Defensive CSS
Lock Scrolling Chaining
-Defensive CSS
.modal-content {
overscroll-behavior-y: contain;
overflow-y: auto;
}
The Fixed Height
-Defensive CSS
.hero {
height: 350px;
}
The Fixed Height
-Defensive CSS
.hero {
min-height: 350px;
}
Vertical Media Queries
-Defensive CSS
Add position: sticky to the secondary navigation on sidebar
Vertical Media Queries
-Defensive CSS
However, if the browser height is smaller, things will break.
@media (min-height: 600px) {
.nav-secondary {
position: sticky;
bottom: 0;
}
}Using Justify-Content: Space-Between
-Defensive CSS
Using Justify-Content: Space-Between
-Defensive CSS
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}Text Over Images
-Defensive CSS
Text Over Images
-Defensive CSS
.card__img {
background-color: grey;
}Scrollbar Gutter
-Defensive CSS
.element {
scrollbar-gutter: stable;
}
Grouping Selectors
-Defensive CSS
input::-webkit-input-placeholder,
input:-moz-placeholder {
color: #222;
}It’s not recommended to group selectors that are meant to work with different browsers.
Bad practice
input::-webkit-input-placeholder {
color: #222;
}
input:-moz-placeholder {
color: #222;
}Instead do this
CSS Markers
-Defensive CSS
.list li::marker {
color: #fcf2db;
font-size: 1.2em;
}
CSS Clip path
-Defensive CSS
.card__clip {
background-color: #77cce9;
clip-path: circle(80px at 50% 50%);
}
It creates a clipping region where content within it is visible, and content outside it is invisible. Here is a basic example of a circle clip-path
CSS Clip path
-Defensive CSS
