312 private links
A simple div and here's the result: beautiful design and pictures.
Some smooth checkboxes :)
I am using this trick to animate checkboxes, but I have to check it out for master it !
calc is useless in min()
, max()
and clamp()
functions
So much !
The way it is written is smart 👍
.hover-1 {
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 calc(-1*var(--_t, 0em)) #000,
0 calc(var(--h) - var(--_t, 0em)) #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
--_t: var(--h);
}
One thing that is frustrating about searching for Tailwind stuff on the web is that because it’s the Hot Framework Of The Moment™, there’s a lot of garbage articles out there, jumping on the hype train.
Malediction of success
On this website, you can adjust the amount of CSS that you want :)
Characteristic measured | External linked .css file |
inline stylesheet with <style> |
---|---|---|
Mobile friendliness | 100/100 | 100/100 |
Mobile speed | 89/100 | 98/100 |
Desktop speed | 96/100 | 98/100 |
PageSpeed Score | A, 96% | A, 97% |
YSlow Score | A, 95% | A, 96% |
Page Load Time | 0.7s | 0.5s |
Total Page Size | 116kb | 116kb |
I’m saying: consider the options, weigh them up against the norm and test them out. As long as you have a good reason behind the implementation, it kind of doesn’t matter what others think.
Styles are based on the HTML tag. This library is small and can be reused very fast.
It seems better for small projects than TailwindCSS.
→ Remember: if your user is supposed to go somewhere, use an <a>
element. If something with JavaScript needs to happen, use a <button>
element.
I agree with that: link for navigation and button to trigger actions.
mask can hide part of the element is applied to.
It is a shorthand for all mask properties. I didn't find real example yet.
- trigonometric functions
- new viewport unites
- :focus-visible
- scroll-behavior can be smooth :)
- lazyloading images by default with an attribute
array.prototype.at
supports negative integers
Breakpoint: 0 200px 400px 600px 800px 1000px 1200px 1400px
├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────>
Slice: · xxs xs · s · m · l · xl xxl xxxl
· · · · ·
· · · at(m) · ·
· · ├────────┤· ·
· · · · ·
· · · from(m) · ·
· · ├─────────────────────────────────────────────────>
· · · ·
· · to(m) · ·
├──────────────────────────────────────┤· ·
· ·
· between(s, l) ·
├────────────────────────────┤·
Using slice instead of pixel values makes it more comfortable. I am still using the mobile-first approach.
Another one to test. It looks ok though
- flexbox
- CSS grid
- CSS Custom properties
- Preference Queries
- Color changes
- Variable fonts
- Paths
- CSS filters
- Houdini
- Shadow DOM
- Native CSS modules
And coming: container queries, container units, native nesting, scoping, cascade layers, :has()
selector, @scroll-timeline
Syntax, timing function, looped animation, multi-step animation, alternating animations, shorthand values, fill modes (forwards and backwards), dynamic animations with CSS variables
How to fingerprint, with CSS and the according project: https://github.com/OliverBrotchie/CSS-Fingerprint