Tagged “css”
-
TIL the alternate keyword stylesheet css darkmode image
If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.
-
TIL Logical Properties css Internationalization
For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.
-
TIL Using pseudo-classes in your querySelector! css javascript
let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')
-
TIL Container Queries are live! container css
After @container, elements can respond to a parent container size or style! The only caveat is the containers must declare themselves as possible query targets, which is a small requirement for a large benefit.
-
TIL ":has" selector css organization
Before :has(), the subject of a selector was always at the end. Like 'ul > li:hover' or 'ul > li:not(.selected)'. Now we can do ul:has(> li)
-
TIL Shape-Outside to wrap text css shapes codepen
Shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
-
TIL no global styles opinion css
Global styles is the largest **anti-pattern** in CSS --- strong DISAGREE.
-
TIL aspect ratios css iframe
We can target iframe elements directly with a few lines of CSS to preserve their dimensions in responsive layouts, without the need for a wrapper element.
-
TIL getting the height with Javascript javascript size css
Say you wanted the height of a element. getComputedStyle gets you that. BUT -- it may lie about it to avoid css history leak. Instead use computedStyleMap.
-
TIL adding a helper function for CSS classes css javascript utility
I like this helper. This lets you quickly add/remove CSS classes to your elements in a easy-to-read way.
-
TIL fingerprinting with CSS security css
Fingerprinting refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has access to all sorts of fingerprinting possibilities, which then combined with the IP address that the server has access to, means fingerprinting is all too common.
-
TIL functions in sass css sass function
You can declare functions in sass using @function. You can even write for loops, return values, and even create @warn and @error.
-
TIL Little Big Details Easter eggs easteregg css
I was in search of Easter Eggs and found this Tumblr littlebigdetails.com. I was trying to find the easter egg in real life,,,. But it looks like the site switched to a JS framework. It looks very svelte, as it uses a lot of shadow dom elements!
-
TIL passive aggressive easter egg easteregg search css
Go to this corporate website and open the search (top right) and then submit with an empty search 7-8 times for a passive aggressive response.
-
TIL how to get what browser with just css browsers safari css
Today I learned about how to tell what browser you are using with just CSS.
-
TIL safe areas for mobile browsers css mobile mdn
The problem you quickly encounter is that the visible viewport is not per se the same as the interactive viewport. Mobile browsers tend to prioritize essential UI elements (like the home-bar on IOS) for interactivity at all times.
-
TIL reduce-motion-blur accessibility css
Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.
-
TIL @Supports css defensive-coding
Unsupported CSS can break things. You typically wrap it in a @Supports rule.
-
TIL Animista for generating CSS animations css generator
Animista is one of the best CSS tools you can use for animations. It gives you a collection of pre-made animations that you can use in your CSS.
-
TIL generating fancy waves for HTML generator css design
Get Waves is another amazing tool that will allow you to create SVG waves for your projects using CSS. It makes it much easier, you just choose the options, then the tool generates the right CSS code for your wave design.
-
TIL how to use ':where()' css html
You can probably also use a helper class like `no-bullets`. But this method does follow a default top-down approach pattern with CSS that i'm starting to also fall in love with.
-
TIL prefers-color-scheme automatically css automation
For swapping between light mode and dark mode, you don't need JS. Using the `prefers-color-scheme`, that will automatically run the design code based on the user's preference.
-
TIL Clippy for generating clip-path art css generator
Clip-path allows you to define a shape that will determine what parts of your HTML element are shown. You can use it to create all different kinds of shapes!
-
TIL How to auto-grow textarea with pure css css no-js forms
To do this, you replicate the content of the '<textarea>' in an element that can auto expand height, and match its sizing.Same font, same padding, same margin, same border… everything.
-
TIL Disable users from highlighting text html css accessibility
You can use the 'user-select' property to prevent an element from being highlighted by the user.
-
TIL the Shared Element Transitions animation css
These cool effects exist on mobile. And Google and the Chrome team has been pushing for the web to have those complex transitions too.
-
TIL the @layer feature in CSS webdev css
With '@layer', the entry file can pre-define layers, and their order, ahead of time.
-
TIL the wbr element mdn html css
'<wbr>' is a HTML element that represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
-
TIL CSS Vulnerability in Yahoo Mail css security vulnerability email
CSS doesn't immediately fail on parse errors. In 2009 it turned out Yahoo Mail was vulnerable to a fairly simple exploit. The attacker sends the user one email with a snippet of code and another email to run the code
-
TIL add link decoration to help with accessibility links css accessibility mdn
One of the WCAG requirements is not to rely on color only when you want to distinguish a button or link from the rest of the text. Painting links in blue or another color doesn’t suffice since it still might not be visible for people with color blindness. The most typical method is underlining links; they can also appear in bold font.
-
TIL an easy way to make rainbow text css colors
You can create gradient text by tweaking just three simple properties: background-image, color, and background-clip!
-
TIL you can make your cursor display images css images
The cursor element allows you to use 'url()'. It's required to include a fallback keyword (like 'auto') in case the image is broken.
-
TIL a nice checklist/strikethrough animation codepen css
Animating checkboxes by using the `:checked` pseudo-class. If it's true, then include other things (like a before/after psuedo-class with other effects.)
-
TIL how to make numbers the same width and prevent shifting layout css fonts twitter mdn
If your font supports it, you can use 'font-variant-numeric: tabular-nums'.
-
TIL of using the "is" property css imgur mdn
The ':is()' CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
-
TIL of this repo who made box shadow images codepen joke css
That's right! You can make a single-pixel box shadow. You can also create multiple versions on the same line.
-
TIL of a visual way to see CSS Cascade css codepen mdn
But then questions start arising: is !important higher priority than say, the Shadow DOM generated object?
-
TIL how to add custom styles in WP Blocks wordpress css
Justin Tadlock of WPTavern recreates a theme in block patterns.
-
TIL writing modes accessibility rtl css mdn
The 'writing-mode' CSS property determines if lines are laid our horizontally, or vertically. The direction is determined by the context of the direction of the content.
-
TIL the hover media feature css mdn media-queries
If you're on a phone or tablet, chances are -- you cannot hover. But if you're on desktop using a mouse -- you can!
-
TIL A nice way to use calc to get margin space css layout
I love it when bootstrap containers automatically create padding based on size.
-
TIL that it's ::before, not :before css
So what should you be using? Unless you time travel, double-colon.
-
TIL Layers in CSS css specificity
CSS goes through a lot of passes to determine style orders. Make the css more specific, and it takes priority. Add a '#', and it takes even more priority. Add a freakin' '!important;', and hurray, you're at the top.
-
TIL I'm done with FontAwesome html css library blog
When I first discovered FontAwesome in 2013, I like everyone thought the same thing -- this is a MAJOR game changer. It is now 2022. As I look back, FontAwesome has become unsustainable.
-
TIL You can change the blinking line css inputs mdn
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor.
-
TIL CSS pseudo-element first-letter, to make a Drop Cap css html
You can add a drop cap to a paragraph by using the ::first-letter pseudo-element.
-
TIL the DOM and CSSOM css html web-development
DOM is the html. CSSOM is the design. Together, they become... WEBPAGE-PERSON.
-
TIL using Flexbox column-gaps css flexbox
Using Column-gaps lets you space things out correctly, AND properly lays out your container elements.
-
TIL CSS variable tricks css javascript variables
If you want to change the background with Javascript, you can use a CSS variable.
-
TIL How to actually do CSS Shadows css design ux
A real world shadow has two main distinctive parts. Direct light casts the first shadow and ambient light casts the second.
-
TIL about Constraint Validation API (forms) forms html css mdn
Inputs are pretty powerful. Right out of the box, they can autocomplete, validate data, create minimum/maximum lengths, allow for patterns, and even provide state!
-
TIL about this method to generate infinite Utility Helpers with CSS css
Generating tailwind-like utils.
-
TIL HTML's native hidden attribute html css
To hide a DOM element: there's a native HTML attribute called `hidden`.
-
TIL how to Make a Square with CSS with aspect-ratio css
The first figure is for the top and bottom dimension, the second is for left and right.
-
TIL Disable pull-to-refresh on mobile css mobile
By default, mobile browsers tend to provide a 'bounce' effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached.
-
TIL column-count css codepen html webdev
Using the column-count property you can break an element's content into a specified number of columns.
-
TIL Safari's one-off problems css mac
Safari is the new IE when it comes to web development. All the one-offs you will face
-
TIL system light mode and dark mode css
Ever notice on mobile devices or on macs, tabs go from light to dark depending on the time?
-
TIL Separating purpose and appearance in CSS css
Appearance is how the variable looks. Purpose is the intent of the variable.
-
TIL Truncating text with Ellipsis css
You know you get a body of text, but you only want a specific amount to be shown?
-
TIL How CSS get added into the DOM css html
Render Tree is CSSOM + DOM Tree with all the correct stylings
-
TIL column gap for newspaper look css codepen responsive webdev mdn
Use `column-count` and `column-gap` to give it that sweet newspaper look.
-
TIL Sticky navbars with pure CSS css
Google 'Sticky Header', and you'll get a crapton of tutorials. Here's a vanilla CSS way to do it.
-
TIL Accessible CSS Accordions html css accessibility
For years, I've been looking to find a CSS accordion that is also accessible.
-
TIL CSS Counter counter css
CSS has a method to automagically generate numbers and pop it into the element itself.
-
TIL outline-offset accessibility css
Some sites remove :focus. Those sites suck. They should instead do this:
-
TIL injecting links when the user wants to print thew ebpage css
A neat code snippet: If the user prints the page (for some reason), links get injected into the print.
-
TIL When to use Serif vs San-serif css fonts
Serifs are recognized for having small decorative lines added as embellishment. San-Serif is basic.
-
TIL writing-mode css accessibility codepen caniuse
How to flip text so it's sideways, for international reasons.
-
TIL @extend and it's alternatives sass css
I learned about `@extend` as a way to grab the styles from a element.
-
TIL about adding Styling to scrollbars css webdev codepen scrollbar
You can decorate your scrollbars with CSS
-
TIL Colorfonts css design
But what if you could define more than one color per glyph? That's ColorFonts!
-
TIL Switching to SVG for Icon Fonts css icons
Icon fonts on the web were fundamentally flawed from the beginning. With full SVG support, let's use that
-
TIL Scroll Margin for anchor links css html
When you use anchor links, it jumps to the content with the assigned ID. But it sucks.
-
TIL Bootstrap 5 removing jQuery will reduce about 83kb of loading time frameworks css
Bootstrap 5-alpha1 has been officially launched dropping jQuery as a dependency and also removing browser support for Internet Explorer 10 and 11.
-
TIL about the bullet ::marker css
When you have a list element, you had to hack the css to change bullet items. Not anymore!
-
TIL how to check if a dom element has a specific class js css
How to destructure the classList into an array so you can use include()
-
TIL about styling active/focus together html css fe-masters-css-in-depth
Style active and focus at the same time. Some people get to your link or selection by keyboard.
-
TIL how to use CSS to count things html css fe-masters-css-in-depth codepen
Using CSS Counter, counter-reset, and counter-increment.
-
TIL You can look for elements with specific attributes html css fe-masters-css-in-depth
Target elements via CSS with certain attributes
-
TIL Box-sizing css layout
Setting box-sizing to border-box is a neat trick to avoid any unexpected padding issue. It tells the browser to include any border and padding in the values you specify in that element’s width and height itself. For example, if your element width is 125px, then any padding you add will be included in that width(125px) itself.
-
TIL difference between justify-content vs justify-items css grid layouts stack-overflow
The 'justify-content' property aligns columns within the container. The 'justify-items' property aligns grid items within their tracks (not the entire container)
-
TIL applying a filter directly to a background using backdrop-filter caniuse experimental css backgrounds
backdrop-filter applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
-
TIL clip-path and shape-outside css image shape
You know how you can shape a picture into a circle, and then wrap text around it? You can do that with two features.
-
TIL How to add a placeholder cursor in an input inputs placeholder css
How to add a placeholder cursor in an input
See all tags.