Chrome 108에서 몇 가지 변화가 있습니다

Chrome 108에 대한 두 가지 중요한 변경 사항이 다가오고 있습니다 : CSS 오버플로 특성 및 Android 뷰포트 조정 동작

CSS 교체 요소의 오버 플로우 속성 변경 :

Chrome 108에서 시작하여 다음과 같은 대체 요소는

속성을 ​​따릅니다. 이전 버전의 Chrome 에서이 속성은 무시되었습니다. 이것은 이전에 컨텐츠 상자에 자르고있는 이미지가 스타일 시트에 지정된 경우 경계 밖에서 그릴 수 있음을 의미합니다. 따라서

따라서 이전에 기본적으로 오버플로 된 이미지, 비디오 및 캔버스 요소는 Chrome 108 릴리스 후에자를 수 있습니다. 다음과 같은 상황에주의를 기울여야합니다. </prev></p> <p> <code>overflow</code> 속성을 ​​사용하여 상자를 확대하고 채우십시오. 종횡비가 상자와 일치하지 않으면 이미지가 경계 밖에서 그려집니다. <code>img</code> <code>video</code> 속성은 제곱 이미지를 원처럼 보이게하지만 <code>canvas</code>가 보이기 때문에 더 이상 자르기가 발생하지 않습니다. </p> <p> set , 를 포함한 모든 속성의 상속을 초래합니다. </p> <p> <ended> 코드 예제에 대한 전체 기사를 읽는 것이 좋습니다. 그러나 원치 않는 자르기의 경우 솔루션은 </ended></p> : 로 UA의 기본값을 무시하는 것입니다. <ul> <li> 안드로이드의 뷰포트 조정 동작 변경을 확인하십시오 : <code>object-fit</code> <with> 11 월에 Chrome 108이 출시되면 Chrome은 화면 키보드 (OSK)가 표시 될 때 레이아웃 뷰포트의 동작을 약간 변경합니다. 이러한 변경으로 Android 용 Chrome은 더 이상 레이아웃 뷰포트를 크기로 조정하지 않지만 Visual Viewport 만 크기를 조정합니다. 이로 인해 Chrome은 Android 동작에 대한 iOS 용 Chrome 및 iOS 용 Safari와 일치합니다. </with> </li> <change> 이것은 뷰포트 장치를 사용하는 일반적인 퍼즐 및 모바일 터치 장치에서 고정 위치와 관련된 변화입니다. 우리는 수년에 걸쳐이 문제를 논의하고 해결하려고 노력했습니다. <li> <to to> "Viewport Units를 사용할 때 주목해야 할 사항"(Chris Coyier) <h h> "Louis Hoebregts"(Louis Hoebregts) <small small> "크고 작고 역동적 인 뷰포트"(Chris Coyier) <co co> "Chris Coyier"(Chris Coyier) <code>border-radius</code> 이 변경은 화면 키보드가 표시되면 Android 용 Chrome이 더 이상 레이아웃 뷰포트를 조정하지 않음을 의미합니다. 따라서 장치의 키보드가 표시되면 뷰포트 장치의 계산 된 값이 더 이상 줄어들지 않습니다. 마찬가지로 전체 뷰포트를 차지하도록 설계된 요소는 더 이상 키보드에 맞게 줄어들지 않습니다. 키보드가 나타나기 때문에 고정 위치의 요소가 더 이상 알 수없는 위치에 나타나지 않습니다. <code>overflow</code> <more> 이것은 iOS 및 iPados에서 Chrome, Safari 및 Edge와 일치하는보다 일관된 크로스 브라우저 동작을 제공합니다. 키보드 UI가 여전히 경로의 요소를 덮어 쓰고 방해 할 수 있기 때문에 업데이트 된 동작이 이상적이지 않더라도 좋습니다. </more></co></small></h></to> </li> <the> 이런 일이 발생할 때 요소가 눈에 보이지 않게하려면 오래 전에 Prefix 속성을 ​​사용하여 Chris가 공유 한 솔루션을 고려할 가치가 있습니다. <p> <space> 이것은 UI가 다루는 부분이 아니라 뷰포트에서 사용 가능한 공간을 사용하지만 Chrome은 현재이 속성을 무시하고 있으며 버전 108에서 지원을 시작할 가능성은 거의 없습니다. Chrome 108은 이미 Safari 및 Firefox에서 지원되는 작고 크고 역동적 인 뷰포트 장치에 대한 지원을 소개하기 때문에 이것은 관련이없는 문제 일 수 있습니다. <code>webkit-fill-available</code> 이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다. </space></p> <version version> 데스크탑 버전 <pre class="brush:php;toolbar:false">img { overflow: visible; }

로그인 후 복사

모바일/태블릿 PC

위 내용은 Chrome 108에서 몇 가지 변화가 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!