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:
1. 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?
1. Check that parents dont have overflow: hidden or overflow-x: hidden and so on
2. 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;
}
}