<rmcreative>

RSS

Все заметки с тегами «Firefox, CSS»

Можно уточнить:

    (3)
    (1)
    (1)
  1. (2)
  1. Лишний border у треугольников в Firefox

    20 декабря 2012

    Часто для того, чтобы изобразить треугольник на CSS использют технику slants. То есть элемент в 0px шириной и высотой c тремя border приличной ширины и одним нулевым. В этом блоге так оформлены уголочки у количества комментариев к постам на главной. Типичный код для этого выглядит так:

    .triangle {
        width: 0;
        height: 0;
     
        border-top: 0;
        border-bottom: 60px solid #fee;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
    }

    FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:

    Firefox CSS slant bug

    Серый border в один пиксель тут явно лишний. Ни в одном другом браузере его нет.

    Методом проб и ошибок поправил, но логики за всем этим так и не разглядел. Рабочий вариант без артефактов:

    .triangle {
        width: 0;
        height: 0;
     
        border-top: 0;
        border-bottom: 60px solid #fee;
        border-left: 40px solid rgba(255, 255, 255, 0);
        border-right: 40px solid rgba(255, 255, 255, 0);
    }

    Посмотреть вживую

    UPD: вместо rgba можно использовать -moz-border-top-colors: transparent;.

    Проявляется только в Windows и Linux.

    Баги в трекере mozilla:

    UPD: в 2016 это исправили.

    12 комментариев
  2. Бескартиночные треугольники и FF

    13 июня 2012

    В данном блоге для оформления трегольников у блока с количеством комментариев используется довольно старая техника, позволяющая обойтись без изображений. Всё бы хорошо, но последняя версия FF рисует вместо аккураного треугольника размытое месиво. К сожалению, решение пока не найдено. Если знаете — подскажите.

    UPD: вот так это выглядит в моём FF 13.0 под Windows 7.

    Лечится через Options → Advanced. Нужно убрать галку с Use hardware acceleration when available.

    9 комментариев
  3. CSS hack для Firefox 3.5

    25 декабря 2009

    И ещё один страшный и ужасный хак. На этот раз для FF3.5.

    Рассматриваем

    1 комментарий
  4. PixelPerfect

    9 июля 2008

    При выполнении заказов на вёрстку, чтобы убедится, что результат полностью соответствует макету, мне приходилось делать скриншот, загонять его в Photoshop, накладывать поверх макета и делать слой прозрачным.

    PixelPerfect, плагин для FireBug, позволяет делать это на лету.

    Пробуем

    5 комментариев
  5. Бордюрный глюк mozilla

    12 октября 2007

    Сегодня был обнаружен занятный баг в рендеринге mozilla.

    Решается неиспользованием border-collapse: collapse;. Вместо него вполне можно обойтись в этом случае border-spacing: 0;

    Комментировать
  6. Оффлайн HTML-валидатор для FireFox

    28 сентября 2007

    Оказывается, есть всё-таки плагины для FF, которые приносят не меньше радости, чем Firebug... Одним из таких оказался HTML VALIDATOR - оффлайн валидатор html. Больше не надо лезть каждый раз на W3C, чтобы проверить сайт на валидность. К тому же в плагине ошибки выводятся в гораздо более удобном виде, да ещё и посвечиваются в коде. Валидацию можно осуществлять аж двумя способами: как на W3C и при помощи HTML Tidy.

    Пробуем

    1 комментарий
  7. CSS-хаки для Opera, FireFox, Internet Explorer

    8 августа 2007

    1 комментарий
  8. Dust-Me Selectors

    2 августа 2007

    В продолжении темы очистки CSS хочется отметить более удобное решение, чем онлайн-сервис: плагин для Firefox. Делает своё дело быстро и довольно-таки неплохо.

    Пользуемся

    Комментировать
  9. Прозрачность в CSS

    27 марта 2007

    Сделать какой-либо элемент полупрозрачным при помощи CSS можно так:

    .transparent{
      filter:alpha(opacity=50); opacity:.5;
    }

    Во многих источниках встречается такой вариант:

    .transparent{
      filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5;
    }

    Сейчас -moz-opacity можно и не использовать. Firefox уже довольно давно понимает свойство opacity.

    p.s. немного идей, где это можно применить можно найти на сайте Mandarin Design (англ.).

    Комментировать
  10. Наглядный тест поддержки CSS-селекторов

    23 марта 2007

    Довольно занятный и наглядный тест CSS-селекторов.

    Результаты:

    IE6

    Из 43 селекторов 10 сработали хорошо, 1 работает глючно и 32 не поддерживаются (Пройдено 276 из 578 тестов)

    Opera9

    Из 43 селекторов 25 сработали хорошо, 3 работают глючно и 15 не поддерживаются (Пройдено 346 из 578 тестов)

    FireFox2

    Из 43 селекторов 26 сработали хорошо, 10 работают глючно и 7 не поддерживаются (Пройдено 357 из 578 тестов)

    3 комментария