- Medium: Navigation that disappears on page scroll
- CodePen: Why form inputs shouldn't look like buttons
- Getty Images: Example of form inputs and links that look like buttons
- Lighthouse Labs Coding Challenge: Example of form using placeholders as labels
- Gmail Signup: Example of floating labels
- [Nielsen Norman Group: Placeholders in Form Fields Are Harmful](https://www.nngroup.com/art
/* Hide Google smartlock login popup */ | |
iframe[src^="https://smartlock.google.com/"] { | |
display: none !important; | |
} | |
/* Brighter Netflix and YouTube videos */ | |
video[src^="blob:https://www.netflix.com/"], | |
video[src^="blob:https://www.youtube.com/"] { | |
filter: brightness(1.4); | |
} |
Seems like <em>
is styled as italic regardless of language. Different languages have different conventions for indicating emphasis. For example, <em>
should not be styled as italic in Japanese because it can make the text illegible.
From what I can tell, <em>
should only be styled as italic for languages using Latin alphabets, but more research is needed to figure out how <em>
should be styled in different languages.
The top
, bottom
, left
, and right
properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position
property set to anything other than static
. For example: relative
, absolute
, fixed
, or sticky
.
div {
: || || auto || inherit;
}
You might use it, for example, to nudge an icon into place:
button .icon {
position: relative;
The top
property is used with position to set the top placement of an element. It only has an effect on positioned elements, which are elements with the position
property set to anything other than static
. For example: relative
, absolute
, fixed
, or sticky
.
div {
top: <length> || <percentage> || auto || inherit;
}
*, | |
*:after, | |
*:before { | |
box-sizing: border-box; | |
} | |
body, | |
html, | |
blockquote, | |
figure, |
document.addEventListener('keyup', (e) => { | |
if (event.key === 'Tab') { | |
console.log(document.activeElement); | |
} | |
}); |