кросс-браузеры css для кривой, тени, градиента - PullRequest
Новая
       31

кросс-браузеры css для кривой, тени, градиента

2 голосов
/ 25 июля 2010

- это такая библиотека CSS, которую я могу использовать вместо необходимости вручную использовать специальный тег для каждого браузера, как показано ниже? 

-moz-linear-gradient
-webkit-gradient
-ms-filter: "progid:DXImageTransform.Microsoft.gradient

Ответы [ 2 ]

3 голосов
/ 25 июля 2010

Лично я не знаю ни одного, но вы можете настроить свои CSS-файлы для анализа с помощью PHP, а затем написать функцию, которая выводит все, что вам нужно.Пример: 

<?php
function makeBorderRadius($radius) {
    echo "-moz-border-radius: " . $radius . "\n";
    echo "-webkit-border-radius: " . $radius . "\n";
    echo "border-radius: " . $radius . "\n";
}
?>

#mydiv {
    width: 50%;
    background: #000;
    <?php makeBorderRadius(5); ?>
}
0 голосов
/ 07 апреля 2013

Открывая мой другой ответ три года спустя, я могу однозначно сказать, что есть гораздо лучшее решение. Хотя дни префиксных стилей border-radius практически закончились, мы можем способствовать хорошему повторному использованию кода в подобных ситуациях.

SASS - это расширенный синтаксис CSS, который добавляет огромное количество удобных функций, включая переменные, функции и миксины. Для генерации CSS требуется отдельный шаг компиляции, но преимущества более мощного языка разработки позволяют получить гораздо более удобный для сопровождения код. Используя mixin , пример границы-радиуса до этого выглядит следующим образом: 

@mixin border-radius($width) {
    -moz-border-radius: $width;
    -webkit-border-radius: $width;
    border-radius: $width;
}

.mydiv { 
    @include border-radius(5px);
}

На самом деле вам не нужно поддерживать свои собственные CSS-совместимые миксины. Вот почему у нас есть другие фреймворки, такие как Compass - разработчики фреймворка отслеживают, какие браузеры используют префиксы и управляют совместимостью, в то время как вы можете сосредоточиться на том, чтобы сделать свой веб-сайт готовым. Они даже имеют твердую поддержку линейного градиента, так что вы можете написать: 

.mydiv {
    @include background-image(linear-gradient(left top, white, #ddd));
    background-image: linear-gradient(to bottom right, white, #ddd);
}

Лучшая часть этого решения заключается в том, что вам не нужно связываться с конфигурацией PHP или Apache - просто запустите несколько простых команд или используйте инструмент для компиляции CSS, а затем включите их, как любую другую таблицу стилей.

...