CSS Weekly (@cssweekly)

Native Input Toggle Switch #css #html A quick tip showing how to create a native toggle switch by adding a single attribute to a checkbox input element. — #cssweekly #css #webdeveloper #webdevelopment #webdevelopers #webdev #csstricks #htmlcss #learncss #csstips #csstutorial #htmltutorial…

A quick tip showing you how to use format specifiers (%c) to style console.log() messages in DevTools. -- #css #cssweekly #webdev #webdeveloper #webdevelopment #webdevelopers #csstips #csstricks #devtoolstips #chromedevtools #developertools

A brief guide on how to use CSS text-indent keywords, each-line and hanging to improve your typography. 🎨 Demo: https://codepen.io/ZoranJambor/pen/yyayYoK?editors=0100&layout=left — #css #cssweekly #csstips #csstricks #webdeveloper

How to use Touch ID for sudo on MacOS A hands-on guide to setting up macOS to use Touch ID for sudo—so you don't have to type your password every time manually. Template file: "/etc/pam.d/sudo_local.template" — #terminal #macos #webdeveloper #cssweekly #touchid

[Chrome DevTools Quick Tip 🔥](#) Did you know that, apart from the currently selected element ($0), you can easily target the history of selected elements from the Element Panel in the Console? 🚀 — #chromedevelopertools #chromedevtools #devtools #css #cssweekly

Learn how to restore deleted files in Visual Studio Code using local file history, and how to restore different versions of files outside of version control. — #webdeveloper #cssweekly #webdevelopment ##webdev #vscode #vscodetips #visualstudiocode

A quick tip showing how to set up a simple local testing environment for simple web apps, static files, and more using the NPM package Serve. Serve: https://www.npmjs.com/package/serve CSS Stickers: https://stickers.css-weekly.com — #webdeveloper #css #cssweekly #html #javascript #webserver…

Do you often feel overwhelmed by the number of JavaScript frameworks, or am I the only one? Yes, sometimes it happens even when I'm sledding with my daughter. 🛷 — #cssweekly #css #jsframeworks #reactjs #vuejs

Find out how to easily create auto-expanding input and textarea form fields using the field-sizing CSS property. — #css #cssweekly #css2025 #csstricks #csstips #webdeveloper #webdev #cssinformation #htmlcss #cssform2025

Happy 2025, friends! Here's to another year of stunning new CSS features and a ton of captivating content around them! 🚀 -- #cssweekly #css #css2025 #csstricks #csstips #webdeveloper #webdev

A brief visual guide explaining why you should use CSS Logical Properties & Values, and how they work. — # css #cssinformation #csstricks #cssweekly ##csstips #css2024 #csslogicalproperties #webdeveloper #webdesigner #webdev #webdevelopers

How to prevent layout shifts when scrollbars are hidden/shown using the scrollbar-gutter CSS property. — #css #csstricks #csstips #htmlcss #webdeveloper #webdev #cssoverflow #csslayout #cssweekly #scrollbar

CSS Tips - Animate to “height: auto;” Find out how to easily animate from “height: 0;” to “height: auto;” using newly available calc-size() function. — #css #csstips #css2024 #webdeveloper #websevelopment #csstricks #cssweekly #csstransition

Tailwind CSS is amazingly popular, and incredibly useful. However, it comes with one major downside that I tried to funily demonstrate in this video. -- #css #cssweekly #programminghumor #programmingjokes #codinghumor #codingjokes #tailwindcss #webdevelopers #webdevelopment #webdeveloper #webdev…

Find out how you can easily view and revert all CSS changes you've made in Chrome DevTools Styles Pane using the "Changes" drawer. — #css #cssweekly #webdevelopers #webdevelopment #webdeveloper #webdev #csstricks #csstips #csstutorial #devtoolstips #devtools #chromedevtools

🌈 CSS Quick Tip 🌈 Learn how to easily create gradient text styles and gradient text outlines with a few lines of CSS. — #css #cssweekly #html #webdevelopers #webdevelopment #webdeveloper #webdev #htmlcss #csstricks #csstips #csstutorial

A quick tip showing how to fix 'broken' block comments behavior in Visual Studio Code by utilizing the built-in Emmet toolkit. — #cssweekly #css #html #vscode #vscodetips #visualstudiocode #devtoolstips #webdevelopers #webdevelopment #webdeveloper #webdev #htmlcss

A quick tip outlining how to easily center any content vertically (including block-level elements) in CSS using the align-content property. — #css #cssweekly #webdeveloper #webdevelopment #webdev #csstricks #htmlcss #learncss #csstips #csstutorial

Where is CSS4? A short look at the current state of CSS4 with explanation why CSS4 is happening after all, and which CSS features it might include: CSS Grid, Flexbox, Viewport Units, and more. — #css #css4 #webdeveloper #webdevelopment #webdevelopers #cssweekly #webdev #csstricks #htmlcss…

A hands-on tip on how to get the most out of the outline view in Visual Studio Code. -- #vscode #vscodetips #visualstudiocode #webdeveloper #webdevelopment #webdevelopers #cssweekly #css #webdev

VS Code Tips — Custom Folding Ranges A short guide on creating Manual Folding Ranges in Visual Studio Code that allow you to collapse and expand (fold and unfold) any part of your code. — #vscode #vscodetips #visualstudiocode #devtools #devtoolstips #webdeveloper #webdevelopment #webdevelopers…

5 Incredible Pure CSS Games Using modern CSS, you can create absolutely anything. In this video, you’ll find pure CSS games, including puzzles, 3d-shooters, point-and-click adventures, and more. 👾 The games Pure CSS/SVG Tic Tac Toe — https://codepen.io/jh3y/pen/KKNwpzN You Must Build a Lighthouse…

Inspecting Chrome DevTools?!? A quick tip showing how (and why) you can inspect Chrome Developer Tools with Chrome Developer Tools. -- #cssweekly #css #webdev #webdeveloper #webdevelopment #webdevelopers #devtoolstips #developertools #devtools #htmlcss

CSS Tips — Easily Find Missing alt Attributes Using One Line of CSS Adding this line of CSS in DevTools can help you easily identify missing alt attributes on images and help you solve those significant accessibility problems. — #css #cssweekly #csstips #webdev #webdeveloper #webdevelopment…

VS Code Tips — How to solve all your CSS problems instantly A quick tip outlining a hidden Visual Studio Code option that will, when enabled, solve all your CSS problems immediately. (Or not. 🤣) -- #programmingjokes #programminghumor #codejokes #cssjokes #vscode #cssweekly #vscodetips #css…

VS Code Tips — Move Sidebar Right A quick-tip outlining how and why you should move the sidebar in Visual Studio Code to the right. -- #cssweekly #webdev #webdeveloper #webdevelopment #webdevelopers #devtoolstips #developertools #vscode #vscodetips #visualstudiocode

How to handle touchscreen gestures in the browser using CSS A quick tip outlining how to use the touch-action CSS property to handle touchscreen gestures like panning and pinching to improve the responsiveness of your mobile app's user interface. — #css #cssweekly #webdev #webdeveloper…

One-Line Trick To Improve Your CSS Typography A quick tip that will help you eliminate orphans (lines of text with just a single word) from your typography using CSS. Applying “text-wrap: balance” to your headlines or paragraphs will enable smart line-wrapping and make your text look better and…

A quick tip outlining how to easily collapse all sidebar folders in Visual Studio Code. — #vscode #cssweekly #vscodetips #visualstudiocode #vscodetutorial #webdev #webdeveloper #webdevelopment #webdevelopers

⚡️ Visual Studio Code Tip ⚡️ How read-only mode in VS Code works, and when you should use it. 🔒 — #vscode #cssweekly #vscodetips #visualstudiocode #vscodetutorial