Search code examples
htmlcssvendor-prefix

Is it a bad practice to use multiple vendor tags in one element?

For example I have:

div.subscribe input[type="text-field"]::-webkit-input-placeholder,
div.subscribe input[type="text-field"]::-o-input-placeholder,
div.subscribe input[type="text-field"]::-moz-input-placeholder {
        padding-left: 20px;
}

Is it a bad practice or even a valid possibility to condense vendor prefixes? Thanks ahead of time.

Edit:

Is it an available possibility to use the vendor prefixes in one class vs multiple classes using different prefixes

Solution

  • Vendor Prefixes are provided because different browser render some part of css style sheet code differently. So in order to keep you page look consistent across all the major browser we use vendor prefixes.If the part of the code you are writing renders same on all major browser there is no need of using multiple vendor tags in one element. you can simply use

    div.subscribe input[type="text-field"]::placeholder{
    padding-left: 20px;
}

    So it is a bad practice if it is case as explained above because there will be unnecessary extra lines of code which logically does nothing.

    EDIT

    ::placeholder pseudo class is still not stable. Refer this. Hence for your case you have to use vendor prefixes till the working draft is finalized and fully supported by major browsers.