Google Chrome (browser) CSS Hack

I can’t test it on safari/mac but Safari and Google Chrome uses WebKit rendering engine so it is very likely that every hack works in Safari. Google Chrome is rather new player but it rapidly increases and there is a need for using specific styles only for that browser. Thats why i am looking for hack for Google Chrome.

Nội dung bài viết

Hack 1: @media and -webkit-min-device-pixel-ratio

Testsuite: This text is red in Google Chrome.

This hack uses webkit specific feature.

/* will be red only in google chrome */
#test1{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #test1{color:red;}
}

 

Hack 2: For Google Chrome and Opera<10

Testsuite: This text is red in Opera<10 and Google Chrome.

All hacks with brackets i found testing lot of css in google chrome and other browsers so if you are blogging about it please give link to this site or to mynthon.net. This hack uses bracket hack. When you open bracket only Google Chrome and Opera will stop processing this line on semicolon. Other browsers will ignore any code after opened bracket until closing bracket will be found. It is important to close bracket or any code after opening bracket will be ignored. It is also important to put semicolon (;) at the end of first line of the hack!

/* will be red only in opera and google chrome */
#test2{
    color:green;
    -bracket-:hack(;
        color:red;
    );
}

 

Hack 3: For Google Chrome

Testsuite: This text is red in Google Chrome.

This hack is similar to “Hack 2” but it works only in Google Chrome. You have to start line with round bracket to make it work.

/* will be red only in google chrome */
#test3{
    color:green;
    (-bracket-:hack;
        color:red;
    );
}

 

Hack 4: For Google Chrome

Testsuite: This text is red in Google Chrome.

This hack is similar to “Hack 2” but it works only in Google Chrome. If you replace round brackets with square brackets this hack will work only in Google Chrome.

/* will be red only in google chrome */
#test4{
    color:green;
    -bracket-:hack[;
        color:red;
    ];
}

 

1/5 - (1 bình chọn)