便利なCSSトリック

最新のプロジェクトに取り組んでいる間に、お話ししたいいくつかの興味深いCSSトリックが蓄積されました。 おそらく、これは私たちの前にすでに発明されており、誰もがすでにそれについて知っています。 例では、純粋なCSSではなく、LESSを使用しています。

入力フィールドのAutoPutイベント

問題 ：ユーザーが自動置換機能を使用していることがわかります。 タスクは、電子メールとパスワードのフィールドに何かが入力された場合、ログインボタンを強調表示することでした。 問題は、これらのフィールドがブラウザのキーボックスからの自動置換によって入力されると、入力時にchangeイベントが発生しないことです。



解決策 ：有効な疑似クラスを使用してください。 入力のタイプ（テキスト、電子メール）を満たすコンテンツがあり、この入力に必須属性がある場合、入力に対して機能します。 確かに、ソリューションはIEでは機能しませんが、このブラウザーのサポートは必要ありません。

<input required="required" class="email-input" type="email" /> <input required="required" class="password-input" type="password"/> <div class="go">Login</div> .email-input:valid ~ .password-input:valid ~ .go { //    Login }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

：モバイルでホバー

問題 ：モバイルデバイス上のブラウザーのCSSへのホバー擬似クラスに対する応答をオフにします（モバイルバージョンとデスクトップバージョンに共通のスタイルシートが1つある場合）。 モバイルブラウザは開発者が必要とするこの擬似クラスに常に応答するとは限らないため、要素のクリックハンドラーをブロックする（2回目に起動する）か、要素をホバー状態のままにする（別の要素をクリックするまで）ことがあります。



解決策 ：ModernizrとLESSを使用しているため、タッチクラスと非タッチクラスがすぐに使用できます。 したがって、ホバーを説明するときは、マウスを使用したバージョン、および同じ用途のバージョンでのみホバーを使用するように記述します：アクティブ（必要な場合）：

 .element { //  .no-touch &:hover, .touch &:active { //        } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

入力によってフォーカスを受け取ったときにプレースホルダーを非表示にする

問題 ：ブラウザーの標準的な動作（すべてではなく多くの場合）では、少なくとも1文字がフィールドに入力されるとすぐにプレースホルダーが非表示になります。 入力を入力するとすぐにプレースホルダーが非表示になるようにしました。 そして、JSを使用せずにこれを行う必要がありました。



解決策 ：プレースホルダー疑似クラスと：focus疑似クラスを使用して、フォーカスを受け取ったときにプレースホルダーテキストのテキストを非表示にします。 繰り返しますが、すべてのブラウザで機能するわけではありませんが、すべてが必要というわけではありません。



rWebからのコメントに従って修正された例

 /* Webkit */ input:focus::-webkit-input-placeholder { color: transparent !important; } /* Mozilla Firefox 4 - 18 */ input:focus:-moz-placeholder { color: transparent !important; } /* Mozilla Firefox 19+ */ input:focus::-moz-placeholder { color: transparent !important; } /* IE 10+ */ input:focus:-ms-input-placeholder { color: transparent !important; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

background-sizeを使用した画像の不適切なレンダリング：Webkitブラウザーでのカバー（だけでなく）。

問題 ：画像がコンテナ全体を占有しないことがあり、コンテナの端に沿って1ピクセルの隙間が残ることがあります。



最初の解決策 ：カバーを切り取ることに加えて画像から少し余分な部分を切り取ることが許可されている場合、コンテナに擬似要素を挿入する前に、または後::背景画像を割り当て、親よりも数ピクセル大きくする（ http://jsfiddle.net / NVu3d / ）。

 .element { position: relative; width: 200px; height: 100px; overflow: hidden; &:after { content:''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; background-image: url(...); background-size: cover; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の解決策 ：この画像が背景として使用され、常にウィンドウ全体を占める場合、ブラウザウィンドウの現在のアスペクト比を画像のアスペクト比で監視し、それに応じてbackground-sizeを設定するメディアクエリを動的に挿入できます：デフォルトのbackground-sizeの代わりにauto 100％ ：100％自動; （ http://jsfiddle.net/NRDA9/ ）

 .element { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(...); background-size: 100% auto; background-position: 50% 50%; } @media screen and (max-aspect-ratio: IMAGE_WIDTH / IMAGE_HEIGHT) { .element { background-size: auto 100%; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Firefoxで要素に3次元変換を適用するときの要素の周りのはしご

問題 ：3D変換をソケットに適用すると、空間内で複雑に発達するため、FireFoxでは、要素の輪郭に沿ってひどいはしごがレンダリングされました。



解決策 ：要素に微妙な影を適用します。

 .panel-body { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }