Blog for developers
Blog page from our developers, where you will find short and useful information and lifehacks
Important points when using <details> as an accordion:
- How to remove arrow in summary for all browsers including Safari?
.summary::-webkit-details-marker {
display: none;
}
.summary {
list-style: none;
}
2. How to replaсe useState in clickOutside to close <details>?
callback in clickOutside: detailsRef.current. removeAttribute('open');
Which generator is more convenient to use for styling <input type="range"/>?
I use this link
Why doesn't position "sticky" work?
- Check that parents dont have overflow: hidden or overflow-x: hidden and so on
- Indicate height and position(top / bottom) for element:
aside {
position: sticky;
top: 40px;
height: max-content;
}
How to create "arc" or semi-donut in CSS?
.arc {width: 200px;height: 90px;position: relative;overflow: hidden;display: flex;align-items: flex-end;justify-content: center;&:after {content: '';width: 200px;height: 200px;border: 65px solid;border-color: #d25b70;position: absolute;border-radius: 50%;left: 0;top: 0;box-sizing: border-box;}}