Kategorija
Razvoj
12 članaka u kategoriji Razvoj.
CSS Nesting Needs No Preprocessor - @scope Gives It a Boundary
Nesting selectors natively is old news by now. The part worth knowing is what nesting still can't do on its own - stop a rule at a boundary you choose - and that's a different feature's job entirely.
A Scroll Progress Bar With No JavaScript
Progress bars that fill as you scroll are usually a scroll listener and some math. animation-timeline: scroll() moves that job from JS to CSS.
One Brand Color, a Whole Palette
Most sites hand-pick a dozen shades of their brand color and hope they stay consistent. color-mix() derives every one from the single value that matters.
Aligning Card Grids With Subgrid
Three cards, three different lengths of copy, and every footer still lines up. Subgrid does it without a fixed height or a line of JavaScript.
A Popover Menu With One HTML Attribute
Menus, dropdowns, and tooltips used to mean JavaScript, a click-outside listener, and a z-index fight. The popover attribute replaces all three.
A True Modal Dialog (No JavaScript Required)
Popover floats above the page, but it won't lock the rest of it down. A dialog will - focus trap, an inert background, a real backdrop - with zero JavaScript.
A Pure-CSS Tabs Component (No JavaScript)
Tabs look like a job for JavaScript: state, click handlers, ARIA wiring. For the common case, a few radio buttons and some CSS do all of it.
CSS Finally Has a Parent Selector
For as long as CSS existed, a parent could style a child - never the other way round. :has() breaks that rule, and it's a bigger deal than it sounds.
Container Queries: Components That Adapt to Their Space
Media queries ask how big the screen is. Container queries ask how big the component's space is - which is the question you usually actually have.
Dark Mode the Simple Way: One Set of CSS Variables
Dark mode doesn't mean writing your styles twice. Define colors as CSS variables once, flip them under one class, and the whole UI inverts.
A Pure-CSS Accordion (No JavaScript Required)
The humble details element gives you an accessible accordion with zero JavaScript and almost no CSS. Here's how to build one and style it well.
A Pure-CSS Carousel (No JavaScript Required)
You don't need a library or a line of JavaScript to build a smooth, swipeable carousel. CSS scroll-snap handles the whole thing - here's how, with the code.
Ostale teme
Javite se
Napravimo nešto
na šta ćete biti ponosni.
Recite nam na čemu radite - i gruba ideja je sasvim dovoljna. Zakažite kratak poziv ili nam pošaljite mejl, a mi ćemo odgovoriti kao pravi ljudi, obično u roku od jednog dana.
Kratak uvodni poziv - bez pritiska, samo razgovor o tome na čemu radite.
Više volite mejl?
office@otterdev.meSjedište
Crna Gora
Radimo s ljudima ovdje, i svuda gdje ima interneta.
Više volite da pišete?