[Svelte] 공급업체 접두사 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

공급업체 접두사란?

 

공급업체 접두사는 여러 브라우저들 중 자신의 브라우저가 아직 다른 브라우저에서 지원하지 않는 CSS기능을 테스트하거나 또는 사용하는 것을 도와줍니다.

 

또는 동일한 기능을 수행하지만 각 브라우저마다 사용되는 속성명이 다른 경우에도 사용될 수 있습니다.

 

알고 있는 가장 대표적인 케이스는 transition이 있습니다.

 

현재는 transition만 명시하여 CSS를 작성해도 어느 브라우저에서든 문제가 되지 않지만 예전에는 각 브라우저마다 사용되는 접두사를 붙여서 작성해줘야만 했다고 합니다.

 

 

 

사용되고 있는 브라우저 접두어의 대표 케이스들은 다음과 같습니다.

 

• Chrom → -webkit-
• Internet Explore → -ms-
• Firefox → -moz-

 

 

 

개발을 하면서 이처럼 브라우저마다 사용되는 접두사를 매번 붙이게 되는 것은 작업을 하는데 불필요한 시간을 소모하게 만듭니다.

 

결국 이런 부분을 해소하기 위해 입력된 CSS에 매핑되는 접두사를 자동으로 생성해주는 autoprefixer라는 도구가 등장했습니다.

 

autoprefixer를 사용해보기 위해 rollup과 package.json에 관련된 사항을 설정해보도록 하겠습니다.

 

 

반응형

 

 

Autoprefixer 설정

 

[ 1. 패키지 추가 ]

 

$ npm install -D svelte-preprocess autoprefixer postcss

 

 

 

[ 2. package.json 수정 ]

 

{
    "browserslist": [
        "> 1%", // 전 세계에서 사용되는 브라우저 점유율의 1% 이상인 브라우저에만 적용
        "last 2 versions" // 각 브라우저들의 최신 2개의 버전만 적용
    ],
  
    ...

}

 

 

 

[ 3. rollup 설정 파일 수정 ]

 

import sveltePreprocess from 'svelte-preprocess';

export default {

    ...
    
    plugins: [
        svelte({
            // 전처리
            preprocess: sveltePreprocess({
                // postcss를 이용하여 공급업체 접두사 등록
                postcss: {
                    plugins: [
                        require('autoprefixer')() // autoprefixer 등록
                    ]
                }
            }),
			
            ...
            
        }),
        
        ...
        
    ]
    
    ...
};

 

 

 

예시 코드

 

간단하게 테스트하기 위해 App.svelte파일에 다음과 같이 코드를 작성해보겠습니다.

 

<script>
	
</script>

<main>
    <div class="outer">
        <div class="box" />
        <div class="box" />
        <div class="box" />
        <div class="box" />
    </div>
</main>

<style>
    .outer {
        display: flex;
        transition: .2s ease-out;
    }

    .box {
        width: 600px;
        height: 200px;
        background-color: orange;
        margin: 20px;
    }
</style>

 

 

728x90

 

 

만약 공급업체 접두사 설정을 하지 않고 실행한 뒤 개발자 도구에서 outer div를 확인해보면 다음과 같이 보입니다.

 

적용 전

 

 

 

이번엔 공급업체 접두사를 위와 같이 설정하고 실행한 뒤 확인해보면 다음과 같이 보입니다.

 

적용 후

 

 

 

적용 전과 달리 각 브라우저들에 해당하는 공급업체 접두사까지 같이 표현되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

이상으로 공급업체 접두사 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.