css - строк - text-overflow ellipsis not working




Ориентация только на Firefox с помощью CSS (7)

Используя условные комментарии, легко настроить таргетинг на Internet Explorer с помощью CSS-правил, специфичных для браузера:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

Иногда это плохой движок Gecko (Firefox). Каким будет лучший способ настроить только Firefox с помощью правил CSS и ни одного другого браузера? То есть Internet Explorer должен не только игнорировать правила только для Firefox, но и WebKit и Opera.

Примечание. Я ищу «чистое» решение. Использование JavaScript-браузера сниффера для добавления класса «firefox» в мой HTML не считается чистым, на мой взгляд. Я бы хотел увидеть что-то, что зависит от возможностей браузера, так как условные комментарии являются «особыми» для IE ...


Вот как можно использовать три разных браузера: IE, FF и Chrome

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

Вот некоторые браузерные хаки для таргетинга только на браузер Firefox,

Использование селекторных хаков.

_:-moz-tree-row(hover), .selector {}

JavaScript-хаки

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Медиа-запросы

Это будет работать, Firefox 3.6 и более поздние версии

@media screen and (-moz-images-in-menus:0) {}

Если вам нужна дополнительная информация, посетите browserhacks


Использование специальных правил -женцев обеспечивает эффективный таргетинг на браузер.

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

Прежде всего, отказ от ответственности. Я действительно не сторонник решения, представленного ниже. Единственный браузер, который я написал для IE, особенно для IE (особенно IE6), хотя мне жаль, что это не так.

Теперь решение. Вы попросили его быть элегантным, поэтому я не знаю, насколько он широк, но он наверняка нацелен только на платформы Gecko.

Этот трюк работает только при включенном JavaScript и использует привязки Mozilla ( XBL ), которые сильно используются внутри Firefox и всех других продуктов на базе Gecko. Для сравнения это похоже на свойство CSS поведения в IE, но гораздо более мощное.

В моем решении задействованы три файла:

  1. ff.html: файл в стиле
  2. ff.xml: файл, содержащий привязки Gecko
  3. ff.css: особый стиль для Firefox

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

Обновление: вышеупомянутое решение не так уж и хорошо. Было бы лучше, если бы вместо добавления нового LINK-элемента он добавит класс «firefox» в элемент BODY. И это возможно, просто заменив вышеуказанный JS следующим:

this.className += " firefox";

Решение вдохновлено мозовыми поведением Дина Эдвардса .


Следующий код имеет тенденцию бросать предупреждения стилей стиля:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

Вместо этого

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

Помог мне! Получил решение для предупреждения стилизованного стиля here


Теперь, когда Firefox Quantum 57 выходит за рамки существенных и потенциально возможных улучшений для Gecko, коллективно известных как Stylo или Quantum CSS, вы можете оказаться в ситуации, когда вам нужно различать устаревшие версии Firefox и Firefox Quantum.

Из моего ответа here :

Вы можете использовать @supports с выражением calc(0s) в сочетании с @-moz-document для тестирования для Stylo-Gecko не поддерживает значения времени в выражения calc() но Stylo делает:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

Вот доказательство концепции:

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

Ориентация на устаревшие версии Firefox немного сложна - если вас интересуют только версии, поддерживающие @supports , то есть Fx 22 и выше, @supports not (animation: calc(0s)) - это все, что вам нужно:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

... но если вам нужно поддерживать еще более старые версии, вам нужно будет использовать каскад , как показано в вышеприведенной концепции.


Обновлено (из комментария @Antoine)

Вы можете использовать @supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

Подробнее о @supports here





css-hack