サファリだけのためのcssハックはクロムではないですか？
safariではなく、Chromeのcssハックを見つけようとしているのですが、これらは両方ともWebkitブラウザですが、ChromeとSafariのdivアライメントに問題があり、それぞれの表示が異なります。
私はこれを使用しようとしてきましたが、それは同様にクロムに影響を与えます、
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
誰もがサファリにだけあてはまるもう一つのことを知っていますか？
- SAFARI 11（2017年秋）の更新*
注意：フィルタやコンパイラ（SASSエンジンなど）は標準の「クロスブラウザ」コードを想定しています - のようなCSSハックは想定していませんこれは、ハックが行うことではないので、ハックを書き換えたり、破壊したり、削除したりすることを意味します。これは非標準のコードで、単一のブラウザバージョンのみを対象にしており、それらが変更された場合は機能しません。あなたがそれをそれらと一緒に使いたいのであれば、あなたはあなたの選んだCSSハックをフィルタやコンパイラの後にロードしなければなりません。これは当たり前のように思えるかもしれませんが、彼らがこの目的のために設計されていないそのようなソフトウェアを通してそれを実行することによってハックを元に戻していることに気付かない人々の間で多くの混乱があります。
多くの人が気づいているように、Safariはバージョン6.1から変更されました。
注意：iOS（少なくともiOSバージョン6.1以降）でChrome [そして今ではFirefox]を使用していて、なぜハックがなくなったのか不思議に思うかもしれません。 ChromeとSafariを区別するのは、iOS版のChromeがSafariエンジンを使用しているからです。 ChromeのものではなくSafariのハックを使っています。それについての詳細はこちら： https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-Apple/
関連項目：1つ以上のハックを試してもうまく動作しない場合は、サンプルコードを投稿してください（もっと良いのはテストページです）。 、使用しているデバイス、および使用しているブラウザ（正確なバージョン）その追加情報がなければ、私もここにいる誰かがあなたを助けることは不可能です。
多くの場合、簡単な修正またはセミコロンの欠落です。 CSSでは、CSSエラーだけでなく、通常、コードがスタイルシートにリストされているのか、それともどの順序で問題が発生するのでしょうか。テストサイトでハックをテストしてください。それがそこで動作するなら、それはハックが本当にあなたの設定のために働いていることを意味します、しかしそれは解決される必要がある何か他のものです。ここの人々は本当に手助けをすることを愛している、または少なくとも正しい方向にあなたを指しています。
テストサイト
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
そしてミラー！
https://browserstrangeness.github.io/css_hacks.html#webkit
IOS用Firefoxは2015年秋にリリースされました。また、Safari Hacksにも対応していますが、iOS Chromeと同じFirefox用のものはありません。
ここでの邪魔にならないことは、Safariの最新バージョンに使用するためのハックです。
現在のSafariのバージョンをカバーしており、純粋なSafariのみなので、最初に試してみてください。
これはまだSafari 10.1でも正しく動作します。
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
6.1以降のより多くのバージョンをカバーするには、現時点で次のCSSハックのペアを使用する必要があります。 6.1から10.0までを扱うものと一緒に行くために6.1-10.0用のもの。
それでは - これが私がSafari 10.1以降で考えたものです。
ここではダブルメディアクエリが重要です。削除しないでください。
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
SCSSや他のツールセットがネストされたメディアクエリに問題がある場合はこれを試してください。
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
この次のバージョンは6.1-10.0では動作しますが10.1では動作しません（2017年3月下旬に更新）
このハック私は、他の複数のハックを組み合わせることによって、何ヶ月もの間テストと実験を重ねてきました。
注：上記のように、二重メディアクエリは偶然ではありません - それはメディアクエリの入れ子を処理できない多くの古いブラウザを除外します。 - 'and'の1つの後ろにスペースがないことも重要です。これは結局のところ、ハック...そして現時点では6.1以降のすべての新しいSafariバージョンで動作する唯一のものです。また、下記のコメントにリストされているように、ハックは非標準のCSSであり、フィルタの後に適用されなければなりません。 SASSエンジンなどのフィルタは、書き換え/元に戻す、または完全に削除します。
上記のように、テストページをチェックしてそのまま動作することを確認してください（変更なし）。
そして、これがコードです：
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
より多くの「バージョン固有の」Safari CSSについては、以下を読んでください。
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
わずかに修正された10.1用の動作（のみ）：
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0用のもの：
/* Safari 10.0 (not 10.1) */
_::-webkit-:Host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 10.0（iOS以外のデバイス）：
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:Host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSSハック：
Safari 9.0以上用：
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
また、サポート機能についても問い合わせます。
/* Safari 9+ */
@supports (-webkit-Marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Safari 9.0-10.0用のもの：
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9には機能検出が含まれているので、今すぐそれを使用できます。
/* Safari 9 */
@supports (overflow:-webkit-Marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
IOSデバイスのみをターゲットにしています。前述のように、iOS上のChromeはSafariに基づいているため、もちろんそれにも当てはまります。
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
safari 9.0以降用で、iOSデバイス用ではありません。
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
そしてSafari 9.0-10.0用ですが、iOSデバイス用ではありません。
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
以下は6.1-7.0と7.1+を分離するハックです。これらはまた正しい結果を得るために複数のハックの組み合わせを必要としました：
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
私はiOSデバイスをブロックする方法を指摘したので、ここにSafari 6.1+ハックの修正版がiOS以外のデバイスをターゲットにしています：
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
それらを使用するには：
<div class="safari_only">This text will be Blue in Safari</div>
通常（この質問のように）人々がSafariのハックについて尋ねる理由は主にGoogle Chromeからそれを分離することに関連しています。代替案を投稿することが重要かもしれません。それが必要とされる場合に備えて、私はあなたにここでそれを提供しています。
ここに基本があります、再び私のテストページでChromeの特定のバージョンの多くをチェックしてください、しかしこれらはChrome全般をカバーします。 Chromeのバージョンは45、DevとCanaryのバージョンは現時点ではバージョン47までです。
私がブラウザハックに置いた私の古いメディアクエリコンボは、まだChrome 29以降でしか動作しません。
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
@supports機能のクエリは、Chrome 29以降でも同様に機能します。以下のChrome 28以降で使用していたものの修正版です。 Safari 9、次期Firefoxブラウザ、そしてMicrosoft Edgeブラウザはこれには対応していません。
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-Marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
以前は、Chrome 28以降をターゲットにするのは簡単でした。これは他のCSSコード（もともとCSSハックとして意図されたものではありません）のブロック内に含まれているのを見た後にブラウザハックに送ったものです。
[注：]以下の古い方法では、上記のアップデートなしでSafari 9とMicrosoft Edgeブラウザを使用するようになりました。 FirefoxとMicrosoft Edgeの今後のバージョンでは、プログラミングに複数の-webkit-CSSコードのサポートが追加され、EdgeとSafari 9の両方で@supports機能検出のサポートが追加されました。 ChromeとFirefoxには以前@supportが含まれていました。
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Chromeバージョン22〜28のブロック（古いバージョンをサポートする必要がある場合）は、上で投稿した私のSafariコンボハックをひねってターゲットにすることも可能です。
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
上記のSafari CSSフォーマットのハックと同様に、これらは次のように使用できます。
<div class="chrome_only">This text will be Blue in Chrome</div>
それで、あなたはこの記事でそれを検索する必要はありません、これが私のライブテストページです。
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[または鏡]
https://browserstrangeness.github.io/css_hacks.html#webkit
テストページには、ChromeとSafariを区別するのに役立つバージョンベースの他、Firefox、Microsoft Edge、およびInternet Explorer Webブラウザ用のハックも多数あります。
注：何かがうまくいかない場合は、最初にテストページを確認してください。ただし、コード例と、誰かが手助けしようとしているハックを提供してください。
ChromeからSafari 5以降をフィルタリングする方法があります。
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
サファリのみ
.yourClass:not(:root:root){
/* ^_^ */
}
これは100％サファリ専用のハックです。テストに成功しました。
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
Safari 7.0以下でハックを実装したいが7.1以上ではハッキングしたくない人のために：
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
私は以下の方法を使うのが好きです。
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
クラスを（.myClass）に置き換えます。
/ * Safariのみ*/.myClass：not（：root：root）{enter code here}
ちなみに、モバイルでSafariをターゲットにする必要があるだけの人にとっては、このハックにメディアクエリを追加するだけです。
@media screen and (max-width: 767px) {
_::-webkit-full-page-media, _:future, :root .safari_only {
padding: 10px; //or any property you need
}
}
そして、ターゲットとする要素に。safari_onlyクラスを追加することを忘れないでください。例：
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
ステップ1： https://modernizr.com/ を使用
ステップ2：htmlクラスの.regionsを使ってSafariだけを選択する
a { color: blue; }
html.regions a { color: green; }
Modernizrは現在のブラウザがサポートしているものに基づいてDOMにhtmlクラスを追加します。 Safariは地域 http://caniuse.com/#feat=css-regions をサポートしていますが、他のブラウザはサポートしていません（とにかく）。この方法は、異なるバージョンのIEを選択するのにも非常に効果的です。力があなたと共にあるように。
メディアクエリハックを使用して、他のブラウザからSafari 7以降を選択できます。
@media \\0 screen {}
免責事項：このハックは、Chromeの旧バージョン（2013年7月以前）も対象としています。
こんにちは私はこれを作った、それは私のために働いた
@media(max-width: 1920px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 5.5% !important;
}
}
}
@media(max-width: 1680px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 15% !important;
}
}
}
@media(max-width: 1600px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 18% !important;
}
}
}
@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 24.5% !important;
}
}
}
@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
@media {
.photo_row2 {
margin-left: -11% !important;
}
}
}
最後に私はそれを達成するために小さなJavaScriptを使用します。
if (navigator.vendor.startsWith('Apple'))
document.documentElement.classList.add('on-Apple');
私のCSSでは、Appleのブラウザエンジンをターゲットにしているので、セレクタは次のようになります。
.on-Apple .my-class{
...
}
サファリで100％動作しています。
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
私はテストしました、そしてそれは私のために働きました
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
これは動作します：
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
https://stackoverflow.com/a/17637937/3174065 この方法ではJSを使用しますが、ここでは回答しています。使用する場合は、必ずjsをフッターに入れてください。これを正しく実行するには本体を完全にロードする必要があります。先頭に配置すると、本体がロードされる前に起動するためエラーになります。
それはボディに.safariクラスを追加しますが、それはサファリの中だけで、CSSのターゲット設定を非常に簡単にします。