Latest News
⚑ Report a ProblemTech news from the best sources
Вы не знаете CSS. Мои вопросы о CSS с ответами. Версия 2026 года
Хабр, привет! В прошлом месяце я опубликовал статью с вопросами о HTML. Неожиданно для меня, она понравилась многим и стала одной из самых популярных …
CSS Selectors
Here are the four foundational selectors you'll use 90% of the time. 1. The Universal Selector ( * ) This selects everything on the HTML page. * { mar…
I built 42 landing page templates as single HTML files (no npm, no build step)
I got tired of downloading a "simple landing page template" and finding a 400 MB folder with npm, a build step, a config file and three CSS frameworks…
Building Accessible Popups Natively with the HTML5 <dialog> Element
Many developers still rely on heavy, third-party JavaScript frameworks or external UI libraries just to create simple popups and modal windows. This i…
Your dropdown is a div. The browser has a native popover now.
You've written some version of this before: function toggleMenu () { setOpen ( prev => ! prev ); } useEffect (() => { const handler = ( e ) =>…
Tailwind CSS v4: What Actually Changed and How I Migrated Two Projects
Headline: Tailwind v4 is the most significant rewrite since the framework launched — CSS-first config, Lightning CSS under the hood, container queries…
shadcn/typeset vs Tailwind Typography: Styling Markdown
You render some markdown, get back a pile of unstyled HTML, and then you style it. Headings, paragraphs, lists, tables, code. You do it for the blog. …
I've maintained Linaria for six years. Here's why I built something new
Runtime CSS-in-JS is winding down. styled-components has been in maintenance mode since early 2025, Server Components made the runtime model a structu…
Three Ways to Put a Widget Storm Widget on Your Page — and Why None Is an iframe
Most widget tools give you exactly one way to embed: an <iframe> . Widget Storm gives you three — and the reason there are three, not one, is th…
Native Widgets vs. iframe Embeds — What Actually Changes on Your Page
Most "add a widget to your site" tools hand you an iframe : a little sealed window that loads someone else's page inside yours. It is quick, and for m…
Day 1 - Basics of HTML & CSS
Today I started learning html and css. I have studied html well in my college days and now I recalled it, but I have only less knowledge in css. So to…
[Перевод] Создание цветовой темы с помощью light-dark(), contrast-color() и запросов стилей
В этом небольшом туториале я покажу вам, как с помощью нескольких новых возможностей CSS можно создать действительно прикольную динамичную систему тем…
Why lightening a hex color in RGB gives you grey (and the HSL fix)
Your brand color has one hex value. A design system needs about nine: a light tint for hover backgrounds, a dark shade for pressed states, something i…
What makes an HTML website template actually useful for developers and small businesses?
Hi everyone, I work as a marketer at a web agency in Korea, and our team recently started building a small HTML website template store for internation…
backdrop-filter: blur() — как он работает и как его правильно использовать
Cвойство backdrop-filter: blur() под капотом работает совсем не так, как интуитивно кажется, и это приводит к багам, которые нелегко воспроизвести и д…
What is a Transient Prop?
A transient prop is a special prop in styled-components that starts with a dollar sign ( $ ). Example: < StyledRow $ columns = "1fr 2fr 1fr" /> …
Just One More Block
Ever opened a game thinking, " I'll play for just a minute " ? Yeah, that's how this started too. I recently built Just One More Block, a small browse…
A Developer Guide to Viewport Sizes for Screenshots
const viewports = [ { width : 1920 , height : 1080 }, // desktop full HD { width : 1366 , height : 768 }, // most common laptop { width : 375 , height…
BEM Methodology in CSS: predictable naming for clean styles
Why BEM? As frontend projects grow, CSS quickly turns fragile—poor class names cause style collisions, debugging pain, and slow iteration. BEM gives y…
Пожалуйста, используйте эти CSS медиа-фукции
Привет, Хабр! Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-д…
Why I stopped using design tokens as implementation details
Design tokens are not CSS variables. This distinction sounds semantic, but getting it wrong produces systems that serve neither designers nor develope…
Building Sleek Korean Web Pages Using ONLY System Fonts (No Web Fonts!)
Unlike English web fonts, Korean web fonts are notoriously heavy because they need to contain anywhere from 2,350 to 11,172 characters. Even with aggr…
Why your generated color palettes look muddy (and what OKLCH does about it)
I've built a handful of small color tools over the past year, and the thing that keeps surprising me is how bad HSL is at the one job people reach for…
CSS Card Design — 40 Examples You Can Copy Right Now (2025)
Cards are the most common UI component on the web. Yet most developers use the same basic box-shadow card everywhere. This guide covers 40 CSS card de…
Responsive Navbar HTML CSS — 30 Patterns with Code (2025)
Navigation is the first thing users interact with ‚Äî and the first thing developers copy-paste without thinking. This guide covers 30 responsive navb…
CSS Grid Examples — 35 Layout Patterns Every Developer Should Know (2025)
CSS Grid is the most powerful layout tool in CSS ‚Äî yet most developers only use repeat(3, 1fr) . This guide covers 35 grid patterns from the basics …