Один префикс поставщика внутри другого префикса поставщика

Недавно я наткнулся на проект с такими правилами CSS:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder {
        line-height: 140%;
    }
}

На мой взгляд, это немного странно, так как я знаю, что префиксы поставщиков используются для разных браузеров. Как насчет такой ситуации, когда вы используете префикс поставщика, отличный от родительского? Это просто опечатка предыдущего программиста? Или это совершенно правильное правило, которое будет применяться в определенных сценариях? Если да, каков будет сценарий, когда это правило будет применено?


css media-queries vendor-prefix
person walther    schedule 26.04.2015    source источник
comment
-webkit- будет использовать другой движок браузера, чем input: moz-placeholder...   -  person Shaun Loftin    schedule 26.04.2015
comment
Для меня это выглядит как ошибка, если только (-webkit-min-device-pixel-ratio: 0) не оценивается как true и для сценариев, отличных от webkit, а затем работает как проход для других поставщиков. Что, конечно, кажется недокументированным и запутанным (никто никогда не пишет код, подобный этому).   -  person Jared Farrish    schedule 26.04.2015
comment
@ShaunLoftin, это именно то, что меня беспокоит. Так что я прав, полностью удаляя эти правила, поскольку нет никаких шансов, что они будут применены?   -  person walther    schedule 26.04.2015
comment
@JaredFarrish, это предложение unless (-webkit-min-device-pixel-ratio: 0) evaluates as true for non-webkit scenarios too and then works as a passthru for other vendors беспокоит меня больше всего, поскольку я не гуру CSS, поэтому я могу что-то упустить, и поэтому я хотел спросить людей здесь :)   -  person walther    schedule 26.04.2015
comment
Я тоже не знаю (мой media-query-foo очень похож на foo-bar). Я бы истолковал это как ошибку, вырвал бы ее, и вселенная рухнула бы сама на себя (через три месяца, в самый неподходящий момент, поскольку существует наихудший-возможный-момент для Вселенная разрушится, естественно). Я полагаю, вы можете искать элементы, соответствующие этому обозначению, и проверять их в других браузерах, чтобы увидеть, применяется ли оно?   -  person Jared Farrish    schedule 26.04.2015
comment
@JaredFarrish, нигде не вижу его применения, но, возможно, есть какой-то конкретный сценарий, который этот код пытается исправить. Не уверен. Думаю, я просто удалю его и полагаюсь на git, чтобы я мог отменить изменения, если какой-то клиент начнет жаловаться. Я оставлю вопрос активным, если у кого-то есть другой опыт в этом.   -  person walther    schedule 26.04.2015
comment
Прощай, милая вселенная. Мы едва знали тебя. :P   -  person Jared Farrish    schedule 26.04.2015

Ответы (2)


arrow_upward
1
arrow_downward

Похоже на неосторожную ошибку. Нет известных реализаций Gecko, которые распознают -webkit-min-device-pixel-ratio — префикс, который использует Gecko, — min--moz-device-pixel-ratio1 вместо этого, который с тех пор устарел в пользу стандартизированного resolution. И нет известных реализаций WebKit или Blink, которые распознают :-moz-placeholder.

В любом случае, этот фрагмент CSS не имеет смысла для обоих движков. В лучшем случае в WebKit/Blink вы получите пустое правило @media screen and (...) {}, а в Gecko теоретически вы получаете @media not all { ... }, что означает "это правило никогда не будет применяться ни в какой ситуации".

1 В отличие от кода в вопросе, это не опечатка.

person BoltClock    schedule 26.04.2015

arrow_upward
1
arrow_downward

-webkit-min-device-pixel-ratio:0 Это взлом браузера для Safari 3+ и Chrome 1+.

input:-moz-placeholder — это псевдокласс, который устарел в Firefox 19 в пользу псевдоэлемента ::-moz-placeholder и предназначен только для браузеров Firefox.

Учитывая ваш код, ваш код запрашивает таргетинг Safari и Chrome только для запуска кода только для FireFox; в конечном итоге это код, который никогда не запустится ни при каких обстоятельствах и, вероятно, является ошибкой.

Дополнительную информацию о взломе Safari 3+ / Chrome 1+ можно прочитать здесь: https://css-tricks.com/snippets/css/browser-specific-hacks/

и дополнительную информацию о -moz-placeholder можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder

и более подробную информацию о тексте-заполнителе стиля в целом можно найти здесь: https://css-tricks.com/snippets/css/style-placeholder-text/

person xengravity    schedule 26.04.2015