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