pl
background-hero

Blog deweloperski

Strona bloga naszych programistów, na której znajdziesz krótkie i przydatne informacje, które mogą przydać się podczas programowania

  • Important points when using <details> as an accordion:
    1. How to remove arrow in summary for all browsers including Safari?

    .summary::-webkit-details-marker {

      displaynone;

    }

    .summary {

      list-stylenone;

    }

      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 {

      positionsticky;

      top40px;

      heightmax-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;
            }
          }