이슈 발견
아래는 프로젝트 진행중에 발생했던 이슈.
border-bottom을 보였다 안보였다할 때, 뭔가 아주 살짝씩 placeholder에 있는 글이 움직이는 걸 볼 수 있다.
개선 전 코드
현재 구현방법은 focus가 되었을 때,
테두리의 굵기, 스타일, 컬러를 한번에 지정하는 방식이다.
&:focus{
border-bottom: 1.9px solid ${props => props.color};
}
원인 분석
border보다 outline에 주는게 성능 면에서 좋다.
정확히 말하면 border-width에 변화를 주면 layout을 다시 그려야 하기 때문이다.
outline과의 차이를 나열해보자면 이렇다.
outline
- 공간을 차지하지 않는다. 항상 element박스 위에 위치하기 때문. 그래서 다른 요소들이랑 겹치는 문제가 발생할 수 있다.
- border과 달리
- 각 엣지에 스타일링을 추가할 수 없다.
- element의 사이즈나 포지션에 영향을 주지 않는다. (겹치는 문제를 제외하면)
border
- 공간을 차지한다.
- 각 엣지에 원하는 스타일링을 추가할 수 있다.
즉,
border은 공간을 차지한다.
주변 element를 움직이게 하여 layout-paint-composite 과정 중 layout에 영향을 미친다는 의미이다.
그런데 만약, 특성 상태에 따라서 border-width에 transition을 준다면 layout이 매번 변경되어 성능에 좋지 않은 영향을 줄 것이다.
개선하기
이를 개선하기 위해, 상태에 따라서 width를 변경하는 것은 좋지 못한 선택이다.
outline으로는 스타일링을 세밀히 지정할 수 없으므로 다음과 같이 코드를 개선할 수 있다.
border-bottom: 1.9px solid transparent;
&:focus{
border-bottom-color: ${props => props.color};
}기본상태일 때, width, style, color를 지정한다. 다만 컬러는 투명하게 해준다.
그리고 원하는 상태가 되었을 때, color만 변경해준다.
아래 gif를 보면,살짝씩 움직이던 거슬리는 이슈가 없앤 모습을 볼 수 있다!
웹 접근성에 관해서, outline은?
outline에 대해 좀 더 알아본 결과, 생각없이 none으로 없애버렸는데 그러면 안된다는걸 알았다.
키보드로 조작하는 유저에게 어떤것이 focus되어있는지 알려주는 outline을 없으면 매우 불편하다.
없애지말고, 서비스에 맞게 스타일링해야한다.
주로 outline의 컬러를 많이 사용하는데, 색맹에게 구분되지 않을 수 있기 때문에 컬러로만 스타일링하는 것은 피해야 한다. 언더라인, style dotted 등과 함께 사용하자.
물론 색약자를 위해 배경색과 구분이 될 수 있는 컬러를 선택하는 것이 좋다.
