CSS의 단순하고 점진적인 개선
CSS는 지난 몇 년간 많은 변화를 겪었습니다. 이제 매달 새로운 기능이 추가되는 것 같습니다. 새로운 기능은 훌륭하지만 완벽하게 지원되거나 사용하기에 안전한 기능을 따라가기는 어렵습니다.
점진적 개선 입력: 사용자가 지원이 부족한 브라우저에서 웹사이트를 방문하는 경우 안전한 대체 기능을 제공하는 코드 기능 및 구문.
다음은 사용하기에 안전한 몇 가지 간단한 CSS 속성과 기술입니다. 일부 사용자에게는 경험을 향상시키지만 다른 사용자에게는 만족스러운 대안을 제공합니다.
text-wrap으로 더 나은 텍스트: 보기 좋고 text-wrap: 균형
모든 브라우저가 균형과 예쁜 텍스트 줄 바꿈 값을 지원하는 것은 아니지만 사용하기에 안전합니다.
이러한 값에 익숙하지 않은 경우 텍스트를 더 예쁘거나 균형 있게 보이도록 "수정"하는 방법입니다.
텍스트 단락의 마지막 단어가 새 줄로 넘어가서 맨 아래에 그대로 남겨두는 "고아" 단어 문제를 상당히 해결합니다. Pretty는 마지막 단어에 다른 단어가 동반되도록 보장합니다. 이는 제목에 적합합니다(참고: 최상의 결과를 계산하기 위해 더 느린 알고리즘을 사용하므로 본문 텍스트의 큰 부분에는 사용하지 마세요).
text-wrap에 대한 MDN 문서: 예쁘다
균형은 각 줄의 문자 수의 균형을 맞추는 방식으로 텍스트를 감싸도록 단락을 조정하여 레이아웃 품질과 가독성을 향상시킵니다. 특정 길이의 단락에 유용합니다. 배너 내부의 주요 텍스트 또는 일부 마케팅 카피. (참고: 본문 텍스트의 모든
태그에 이 기능을 사용하지 마십시오. 문자 수를 기준으로 완벽한 균형을 계산하는 것은 계산 비용이 많이 들기 때문에 브라우저는 텍스트 줄을 기준으로 이 기능에 제한을 둡니다. Chromium의 경우 6개 이하, Firefox의 경우 10개 이하)
text-wrap에 대한 MDN 문서: 균형
데모
대체
브라우저가 이러한 기능을 지원하지 않는 경우 유일한 문제는 텍스트에 고아가 있거나 원하는 만큼 균형이 맞지 않을 수 있다는 것입니다. 그리고 그것은 괜찮습니다. 우리는 30년 동안 웹 검색을 해왔기 때문에 지원되지 않는 브라우저를 사용하는 사용자의 경험에 해를 끼치지 않습니다.