📄 1/2 One-Liners Every Dev Needs to Know
#css
1. Prevent Text Selection
2. Responsive Text Size
3. Maintain Aspect Ratio
4. Automatic Smooth Scrolling
5. Scroll Snapping
6. Responsive Dark Mode
7. Full-width Responsive Images
8. Disable Pointer Interactions
9. Blurry Background or Elements
10. Dynamic Content from HTML Attributes
✅ Article link
#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
👍5
📄 Angular Declarative Control Flow & Deferrable Views
#angular #controlFlow #defer
🚩 > Angular 17
✅ Article link
#angular #controlFlow #defer
🚩 > Angular 17
✅ Article link
🔥3