HTML／CSS

[HTML/CSS] Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일 바꾸기

teamnova 2024. 1. 7. 12:00
728x90

안녕하세요 오늘 Bowser 라이브러리를 통해  오페라 브라우저인 경우 css 스타일을 변경해보겠습니다.

 

해당 게시글과 관련된 이전 게시글입니다. 참고하실분은 참고해주세요

https://stickode.tistory.com/1026

 

다음은 test.html 코드입니다

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Bowser 라이브러리를 통한 오페라 브라우저 CSS 대체</title>
<!-- Bowser 라이브러리 포함 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"></script>
</head>
<body>

<div id="feature-container">
  <!-- 특수 기능이 여기에 들어갑니다 -->
</div>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const browser = bowser.getParser(window.navigator.userAgent);
  const browserName = browser.getBrowserName();

  // 오페라 브라우저를 위한 특별한 스타일링
  if (browserName === 'Opera') {
    // 오페라 브라우저에 최적화된 스타일
    const featureContainer = document.getElementById('feature-container');
    featureContainer.style.background = 'purple';
    featureContainer.style.color = 'white';
    featureContainer.innerHTML = '<p>오페라 브라우저를 위한 특별한 기능이 활성화되었습니다.</p>';
    // 오페라 브라우저에 최적화된 기타 스타일이나 기능을 여기에 추가
  } else {
    // 다른 브라우저를 위한 일반 스타일
    const featureContainer = document.getElementById('feature-container');
    // 일반 스타일을 여기에 추가
  }
});
</script>

</body>
</html>

 

 

다음과 같은 결과물을 얻을 수 있습니다.