동적으로 로드된 배경 이미지로 Firefox를 지원하면서 image-set() 사용

7164 단어 firefox imageset css

요약: Firefox는 다음 형식의 인라인 스타일 속성을 구문 분석할 수 없습니다.

<div style="
/* fallback */
background-image: url('fallback-img.jpg');
/* responsive */
background-image: -webkit-image-set(url( ... responsive image set ...));">

해결 방법: 폴백을 지원하기 위해 대신 해당 규칙을 <style> 태그에 넣습니다.

참고: 이 블로그 게시물은 Columbia Road의 프로젝트에서 학습한 것입니다. 업데이트된 버전은 회사 사이트Tech logs: Use image-set() while supporting Firefox with dynamically loaded background images에서 찾을 수 있습니다.

최신 브라우저는 반응형 이미지( MDN , CanIUse )를 활성화하는 HTMLsrcset 속성을 광범위하게 지원합니다. 그러나 CSSbackground-image와 동등한image-set()(-webkit-image-set()를 통해 액세스 가능)의 경우 IE11, Firefox, Android용 Firefox 및 Opera Mini(MDN, CanIUse)에 대한 지원이 없습니다. (나는 전반적으로 IE11을 무시하고 있습니다).

2020년 11월 20일 현재 image-set()에 대한 주요 브라우저 지원. 출처: CanIUse

물론 이러한 비지원 브라우저에 대해 응답하지 않는 대체 이미지를 원할 것입니다. 글쎄, 그것은 들리는 것처럼 분명하지 않습니다.

문제: style="" 사용이 작동하지 않음

사용 가능할 때마다 url() 표현식으로 덮어쓰는 대체-webkit-image-set() 표현식을 사용하여 다음 CSS를 시도하고 싶을 수 있습니다.

<div style="
/* provide a fallback for Firefox */
background-image: url('../img/image-2x.jpg');
/* override with a responsive image */
background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
">

불행하게도 위의 코드를 style="" 속성에 추가하면(반응형 배경 이미지를 어딘가에 생성할 때 자주 하는 것처럼) Firefox 84는 콘솔에서 다음 오류를 표시합니다.

⚠️ Error in parsing value for 'background-image'. Declaration dropped.

얼마나 슬픈. -webkit-image-set() 를 로드할 수 없기 때문에 전체 스타일 속성 값을 삭제했습니다. 따라서 폴백도 표시되지 않습니다.

솔루션: <style> 태그 사용

그러나 다음 코드는 작동합니다.

<head>
    <style>
        .my-image-id {
            /* provide a fallback for Firefox */
            background-image: url('../img/image-2x.jpg');
            /* override with a responsive image */
            background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
        }
    </style>
</head>
<body>
    <!-- this div should have an image background on it -->
    <div class="my-image-id background-box"><div/>
</body>

스타일 태그의 규칙 중 하나가 브라우저에서 지원되지 않더라도 여전히 스타일 태그를 구문 분석할 수 있는 것 같습니다.

여기서 고려해야 할 몇 가지 사항.

각 이미지에 대해 고유한 클래스 이름이 필요합니다.

처음에 여기에 오신 이유는 클라이언트측/서버측 이미지 데이터를 사용하여 템플릿에 배경 이미지를 동적으로 추가했기 때문에 style="" 속성을 사용하고 싶었기 때문일 수 있습니다.

이 사용 사례에서는 이제 몇 가지 중간 단계를 수행해야 합니다.

배경 이미지 세트에 대해 고유한 클래스 이름을 생성합니다

해당 클래스를 원하는<div>(또는 기타 요소)

에 추가합니다.

해당 클래스에 대한 CSS 규칙을 어딘가의 <style> 태그에 추가합니다. 이것은 <head> 또는 <body> 의 새 태그일 수 있습니다. 특정 이미지에 대한 대체 및 반응형 배경 이미지 URL을 포함해야 합니다.

1단계에서는 GUID 생성기를 사용할 수 있습니다. 그러나 내 프로젝트에서는 a JS function을 사용하여 API에서 가져온 영숫자 이미지 ID 문자열에서 유효한 클래스 이름을 생성했습니다.

<head>에 스타일 규칙을 추가하는 것이 까다롭습니다. <body>에도 스타일 규칙을 추가할 수 있습니다!

이전에 스타일 태그에 스타일을 추가하려고 시도한 경우 <head>에 스타일을 추가하는 것이 까다로울 수 있습니다. 예를 들어 <head>에 액세스할 수 없는 제한된 서버 측 템플릿에서 코딩할 때입니다.

한 가지 해결책: 실제로 <style> 태그를 <body>에 추가하는 것도 가능합니다. 이것은 not a good practice since it's non-standard 입니다. 그러나 대부분의 브라우저에서 작동하는 것 같습니다. 저는 이것을 BrowserStack에서 테스트했고 지금까지 Android의 UC Browser만이 이 기술에 문제가 있는 것 같았습니다. 다음은 본문 스타일 태그를 사용하여 이전 예를 수정한 것입니다.

<!-- this div should have an image background on it -->
<div class="my-image-id background-box"><div/>
<style>
    .my-image-id {
        /* provide a fallback for Firefox */
        background-image: url('../img/image-2x.jpg');
        /* override with a responsive image */
        background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
    }
</style>

이것이 도움이 되었기를 바랍니다! 명확하지 않은 것이 있으면 언제든지 의견을 남겨주십시오.

Reference

이 문제에 관하여(동적으로 로드된 배경 이미지로 Firefox를 지원하면서 image-set() 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/th0rgall/use-image-set-for-dynamically-loaded-background-images-while-supporting-firefox-16jl

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

MacBook에 XenServer6.5가 설치되어 있습니다.

Swing에서 Jetpack Compose 데스크탑까지 #2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다