body{
position: relative;
height: 100vh;
width: 100%;
}
body::after{
content: "";
display: block;
font-size: 5em;
color:white;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
/*IEだけに適用*/
@media all and (-ms-high-contrast: none) {
body {
background: skyblue;
}
body::after{
content: "IEだよ";
}
}
/*GoogleChrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background: green;
}
body::after{
content: "GoogleChromeだよ";
}
}
/*Firefox*/
@-moz-document url-prefix(){
body {
background: orange;
}
body::after{
content: "Firefoxだよ";
}
}
/*Safari*/
_::-webkit-full-page-media, _:future, :root body {
background: blue;
}
_::-webkit-full-page-media, _:future, :root body::after {
content: "Safariだよ";
}
@supports (-ms-ime-align:auto) {
body {
background: skyblue;
}
body::after{
content: "edgeだよ";
}
}
【css】ブラウザごとにcssを反映させる方法
2020/04/10