📄 CSS variables in Angular: ng-deep is no longer needed

#angular #css #ngDeep

✅ Article link: https://medium.com/@maks-dolgikh/css-variables-in-angular-ng-deep-is-no-longer-needed-part-2-3ac60f8a4abc

📄 Defining Animation Keyframes with @keyframes

#css #keyframes

The modern CSS standard offers two solutions for creating smooth animations for DOM elements:

1. Switching CSS property values smoothly based on user interactions with the transition property.
2. Implementing keyframes-based advanced animations using the animation property.

The second approach requires defining keyframes, so the @keyframes at-rule. Look at the following example:

<div class="board">CSS</div>

@keyframes board-anim {
  0%, 85%, 100% {
    filter: blur(0px);
  }
  90% {
    filter: blur(5px) contrast(200%);
  }
}

.board {
  padding: 12px 50px;
  font-size: 24px;
  font-weight: bold;
  background-color: #ff9d00;
  color: #222;
  display: inline-block;
  animation: board-anim 3s infinite linear;
}

📄 Modifying Printed Page Layouts with @page

#css #page

Sometimes, users need to print web pages on physical papers for offline use. Also, some users print web pages as PDF documents to save for future use. Some web apps offer server-based features to generate paper-friendly PDF documents, but you can also print any web page using the browser’s native printing feature.

The `page` CSS at-rule offers a way to customize page dimensions, orientation, and margins of printed pages without affecting the visible browser viewport. For example, the following CSS snippet sets a 1-inch margin and A4 landscape size for printed pages:

@page {
  size: A4 landscape;
  margin: 1in;
}

This at-rule comes with `:first`, `:blank`, `:left`, and `:right` pseudo-classes to select specific pages of the printed document. Browse the official MDN documentation to learn more details about `page`.

📄 Adding Initial DOM Rendering Transitions with @starting-style

#css #startingStyle

When a DOM element gets rendered from an HTML document or JavaScript code snippet, it gets rendered without any initial transition animation. In the past, we typically implemented these initial animations with dynamically switched CSS classes via JavaScript. Nowadays, we can use CSS animations for these situations, but the initial animation concept undoubtedly belongs to the CSS transitions feature. The `starting-style` at-rule lets you set initial styles for a CSS selector, so you can build up a transition animation for the initial rendering step:

button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #bbb;
  opacity: 1;
  transform: scale(1);
  transition: all 1s linear;
  
  @starting-style {
    opacity: 0;
    transform: scale(0.5);
  }
}

The above code snippet plays a transition animation when a button element gets rendered on the viewport. This transition works even though you dynamically create a new element with JavaScript.

📄Defining Scoped CSS with @scope

#css #scope

By default, the traditional CSS implementation styles web pages with a global scoping concept. Moreover, in the past, no CSS scoping feature was present with the style tag, every style tag was feasible for styling any HTML node, including the root regardless of the style tag position in the DOM tree. The HTML standard tried to support scoping with the scoped attribute, but it was deprecated before becoming a web standard. Now, the modern CSS specification introduced the `scope` at-rule for defining scoped CSS.

For example, you can create a scoped style tag for styling an HTML segment as follows:

<div>
  <style>
  @scope {
    :scope {
      background-color: #ddd;
      padding: 12px;
    }
    h3 {
      padding: 0 0 6px 0;
      margin: 0;
      border-bottom: solid 2px #eb7e3b;
    }
  }
  </style>
  <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

The above style tag defines a scoped CSS content for the parent div element with @scope. Here, we targeted the scoped element using the :scope pseudo-class.

📄Modern Component-Oriented Responsive Design with @container

#css #container

The modern CSS specification offers container queries via the @container at-rule for this requirement.

Look at the following sample:

<div class="alert">
  <h3>Lorem ipsum dolor sit amet</h3>
  <button>Lorem ipsum</button>
  <button>Lorem ipsum</button>
</div>

.alert {
  background-color: #ddd;
  padding: 12px;
  resize: horizontal;
  overflow: hidden;
  container-type: inline-size;
}

.alert h3 {
  padding: 0 0 6px 0;
  margin: 0 0 12px 0;
  border-bottom: solid 2px #eb7e3b;
}

.alert button {
  padding: 12px;
  border: none;
  margin-right: 6px;
}

@container (width < 400px) {
  .alert button {
    width: 100%;
    box-sizing: border-box;
  }
  
  .alert button:not(:last-child) {
    margin-bottom: 10px;
  }
}

📄 1/2 One-Liners Every Dev Needs to Know

#css

1. Prevent Text Selection

.no-select { user-select: none }

2. Responsive Text Size

Enter the magic of clamp(): this CSS function dynamically adjusts the font size based on the viewport width, ensuring your text is always just right.

.responsive-text { font-size: clamp(1rem, 2.5vw, 2rem) }

3. Maintain Aspect Ratio

Perfect for responsive design, setting an element’s aspect ratio will scale it beautifully while keeping its width and height in a specified ratio.

.aspect-ratio { aspect-ratio: 16 / 9 }

4. Automatic Smooth Scrolling

Simply applying scroll-behavior: smooth to the <html> element makes any anchor link or navigation jumps glide gently instead of the default abrupt jump

html { scroll-behavior: smooth }

5. Scroll Snapping

This forces scrollable content to lock to a certain element, making it perfect for image galleries or a horizontally scrolling menu

.scroll-snap { scroll-snap-type: x mandatory }

6. Responsive Dark Mode

Automatically switch your website’s theme to dark mode based on the user’s system preferences with this CSS media query (the one-liner here is the media query).

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

7. Full-width Responsive Images

This piece of CSS makes images fully adaptable to various screen sizes.

.cover-img { object-fit: cover }

8. Disable Pointer Interactions

Use this to make an element ignore pointer events like mouse clicks, which is particularly useful for overlays or disabled buttons.

.cover-img { object-fit: cover }

9. Blurry Background or Elements

This CSS declaration adds a blur effect to any element, great for creating focus on modal windows or for artistic background effects.

.blur { filter: blur(20px) }

10. Dynamic Content from HTML Attributes

Dynamically insert content before (or after) an element based on its class name.

.dynamic-content::before { content: attr(class) }

✅ Article link

📄 2/2 One-Liners Every Dev Needs to Know

#css

11. Automatic PDF Indicator

Automatically appends “(PDF)” after links that point to PDF files, making it clear to users what type of file they’re about to download.

a[href$=".pdf"][download]::after { content: " (PDF)" }

12. Counting with CSS

The below piece of code creates a custom counter for list items, transforming them into a uniquely styled numbered list. This snippet uses the CSS counters to increment the list item number and display it before the item content:

.list { counter-reset: list-counter }
.item { counter-increment: list-counter }
.item::before { content: counter(list-counter) ". " }

13. Grayscale Image Hover

This piece of CSS applies a grayscale filter to images on hover, creating an elegant visual effect that reverts to full colour when the mouse is moved away.

img:hover { filter: grayscale(100%) }

14. Perfect Circles

With this one-liner, you can easily transform any element into a perfect circle.

.circle { clip-path: circle(50%) }

15. Blend Backgrounds

Mix the element’s background image with its background colour using the multiply blend mode, creating a rich, layered visual effect.

.blend-background { background-blend-mode: multiply }

16. Gradient Text

-webkit-background-clip: text leverages the power of CSS gradients and clips it to the text itself, making the text transparent and letting the gradient show through as its color.

.gradient-text {
  background: linear-gradient(to top, red 0%, blue 100%);
  color: transparent;
  -webkit-background-clip: text;
}

17. First Line Emphasis

The ::first-line pseudo-element makes the first line of your paragraph stand out by making it bold and changing its colour.

p::first-line {
  font-weight: bold;
  color: #333;
}

18. Dynamic Sibling Influence

This CSS one-liner changes the style of a target element when you hover over its sibling.

.sibling:hover ~ .target { color: #007bff }
.sibling:hover + .target { color: #007bff }

19. Empty Element

This CSS trick automatically hides any element that has no content.

.element:empty { display: none }

20. Responsive Styling based on Orientation

It’s perfect for ensuring your design looks great in both portrait and landscape modes, especially on mobile devices where users might frequently change orientation.

@media (orientation: landscape) {
  body {
    background-color: #333
  }
}

✅ Article link