能讓你受益匪淺的10個css使用技巧

winty發表於2019-10-29
CSS

1. Safari 3D變換會忽略z-index的層級

在Safari瀏覽器下(此Safari瀏覽器包括iOS的Safari，iPhone上的微信瀏覽器，以及Mac OS X系統的Safari瀏覽器)，當我們使用3D transform變換的時候，如果祖先元素沒有overflow:hidden/scroll/auto等限制，則會直接忽略自身和其他元素的z-index層疊順序設定，而直接使用真實世界的3D視角進行渲染。 例如下面的場景，圖中紅框裡面的模組，使用 3D transform變換，進行旋轉動畫，但是在Safari瀏覽器下，忽略了二維碼遮罩層的z-index,結果使用了真實世界的3D視角進行渲染。出現了重疊的bug：

GitHub

解決方法：
  1. 父級，任意父級，非body級別，設定overflow:hidden可恢復和其他瀏覽器一樣的渲染。
  2. 以毒攻毒。有時候，頁面複雜，我們不能給父級設定overflow:hidden，那麼可以將被影響的元素設定一個足夠大的translateZ值就可以，如translateZ(100px)。

2. 文字居中相容

正常處理文字上下居中的手段是讓元素height和line-height相等，但是安卓環境下當字型大小<14px/0.7rem的時候會出現居中失效的情況。

解決方法：

  1. 判斷系統環境（安卓/IOS）分別作微調；

  2. font-size、height、width全部放大為2倍，利用transform進行縮放

height: 1rem; 
width: 2rem; 
font-size: 0.5rem;

變成： 
height: 2rem; 
width: 4rem; 
font-size: 1rem; 
transform: scale(0.5);
複製程式碼

但由於放大之後佔據空間，左右會留白，需要利用margin負值 margin: -0.35rem -0.45rem 0;調整

  1. 有解決方案是將rem改為px。

3. 2個a標籤包裹的模組做90度旋轉，其中一個模組會出現點選失靈

定義了一個動畫效果如下(sass程式碼)：

@keyframes official-featured_rotate {
	10%,50%{  
      transform:rotateY(90deg);  
    } 
    60%,100%{  
      transform:rotateY(0deg);  
    }  
}
&-rotate {
    position: absolute;
    width: rem(350/2);
    height: rem(160/2);
    transform-style:preserve-3d;
    transform:translate3d(0,0,0);
    &.ani_rotate {
        animation:official-featured_rotate 5s linear 0s infinite;
        animation-delay: 2s;
    }
    &__item {
        width: rem(350/2);
        height: rem(160/2);
        position: absolute;
        &:nth-child(1) {
            transform: translateZ(rem(350/4)); 
        }
        &:nth-child(2) {
            transform: rotateY(90deg) translate3d(0,0,rem(350/4)); 
        }
    }
}
複製程式碼

這裡是2個a標籤，做90度的旋轉效果使得兩個a可以迴圈切換展示。這裡2個的基本樣式是一致的，寬高也一樣。但是在安卓下（ios正常）只有開啟頁面能看到的第一個a標籤能正常跳轉，能正常繫結事件。第二個a不能跳轉，我就想那我通過點選事件來跳轉可以不，結果繫結任何事件都不生效。

解決方法：

然後測試發現，在旋轉過程中（只要未完全旋轉90度）點選還是能一切正常的。於是把旋轉角度改為了89.99度，一切正常。動畫效果修改為：

@keyframes official-featured_rotate {
	10%,50%{  
      transform:rotateY(-89.99deg);  
    } 
    60%,100%{  
      transform:rotateY(0deg);  
    }  
}
複製程式碼

後來查詢了一下stackoverflow(stackoverflow.com/questions/2…)。裡面也是說了這個解決方法。

4. 使用currentColor來簡化css

設定border-color、background-color等顏色的時候，可以使用currentColor[與當前元素的字型顏色相同]來簡化css。

.div{
    color: rgba(0,0,0,.85);
    font-weight: 500;
    text-align: left;
    padding: 20px;
    border: solid 1px currentColor;
}
複製程式碼

5. 利用灰色濾鏡做樣式的disable效果

灰色圖可以直接加濾鏡，不用切多一張圖。如圖：

GitHub

解決方法：
.coupon_style .disable {
  -webkit-filter: grayscale(1);
}
複製程式碼

6. 曲線陰影的實現

  • 多個陰影重疊，就是正常陰影+曲線陰影
  • 正常情況下，有個矩形有正常的陰影，作為主投影，這時候再定義一個有一定弧度圓角的圓角矩形，然後放在正常矩形的下面，並露出一點點底部有弧度的陰影，這樣的話就可以形成曲線投影的效果。

效果：

GitHub
程式碼：
GitHub
GitHub

7. 翹邊陰影的實現

利用:before和:after，加上絕對定位的性質，可以形成一個矩形，這個時候結合CSS3的傾斜屬性skew和旋轉屬性rote。就可以形成一個有旋轉角度的平行四邊形，這個時候再和原來的矩形重疊，則可產生翹邊效果。

效果：

GitHub

程式碼：

GitHub
GitHub
GitHub

8.利用-webkit-mask實現蒙版效果

效果圖：

GitHub
程式碼：

background: url("images/logo.png") no-repeat;
-webkit-mask : url("images/mask.png");
複製程式碼

mask.png中黑色代表是不透明的（alpha：1）,其他部分為透明的（alpha：0），將它蓋在背景圖上，注意：背景圖對應mask.png中透明的位置也會變成透明，留下非透明的形狀，即背景圖的可見形狀與mask.png的可見形狀相同。 即為"蒙版"。

9.圖片自適應佔位方式

當圖片未正確載入，或載入完成前，由於圖片高度為0，其容器會因為沒有內容，導致容器無法撐高而塌陷，而如果載入較慢則會再圖片載入完成後出現閃爍的情況。

css中，當padding-top/bottom值為百分比時，其值都是以其父元素的寬度為參照物件。因此對於寬高比例固定的情況，可以利用padding-top/bottom用於圖片自適應佔位，解決頁面閃爍的問題。

如果僅設定值padding-top/bottom為百分比，會出現一個問題，就是該方法容器的max-height屬性會失效，就無法限制容器的最大高度了。

因此，可以給容器新增一個偽元素的子元素用於撐起內容，該子元素擁有一個padding-top:100%，同時給容器一個max-height嘗試限制容器的高度，最後內容用絕對定位的方式新增即可。如：

#container{
    width: 50%;
    max-height:300px;
    background-color:#ddd;
    /*由於margin存在塌陷的問題，需要通過構建BFC來保證容器不會受到影響，因此這裡可以給容器一個overflow:hidden來保證偽元素的margin不會塌陷。*/
    overflow:hidden;
    position: relative; /* 父容器相對定位 */
}
.placeholder::after{
    content:"";
    display:block;
    margin-top:100%;
}
img{
    position:absolute;  /* 內容絕對定位 */
    left: 50%;
    top: 50%;      
    transform: translateX(-50%) translateY(-50%); /* 控制內容絕對定位位置 */
    width:80%;   /* 控制圖片不溢位，因此這裡使用的圖片實際寬度受父容器影響 */
}
複製程式碼

但是對於寬高比例不定的圖片來說，這樣做可能導致圖片顯示不全，使用時要注意。

10.頁面自適應最佳實踐

經過大型專案實踐，下面這段CSS是最好的基於rem和vm和calc實踐程式碼：

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作為16px基準，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100畫素寬字型增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100畫素寬字型增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往後是每100畫素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}
複製程式碼

最後

  • 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
  • 歡迎關注「前端Q」,認真學前端，做個有專業的技術人...

GitHub

相關文章