How to enable custom styles in the firefox browser. Personal CSS hacks for Internet Explorer, Opera, FireFox, Safari, Google Chrome
Browsers and standards. Eternal pursuit. Due to inconsistencies in standards, due to different ways of rendering pages, most of a web designer's time is spent on smoothing out these inconsistencies (using hacks). As a result, instead of working effectively, the designer enters into an unnatural relationship with browsers, wasting precious time.
Cross-browser compatibility- the property of the site to display and work in all popular browsers is identical.
Hack- fixing a bug or adding a new feature by using another undocumented or incorrectly implemented feature. (c) Lurkmore
Dirty hack- this is a quick solution to any problem, mainly in the short term, depriving the essence of the code of internal beauty and disharmony with its internal structure. (c) Lurkmore
CSS hacks for Internet Explorer browser
ZOOM:1:Hack to determine hasLayout
* (zoom: 1; )
PNG in IE6:
For IE6, the htc file iepngfix.htc is included, for the correct operation of background images in PNG format for all elements, in the cssf-ie6.css file. The latest version of IE PNG Fix v1.0 RC4 is used.
* ( behavior: url ("css/iepngfix.htc"); )
If bytes are important, there is an example of using a filter for IE:
.class ( background: none ; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src= "/images/png-image.png" , sizingMethod= "scale"); )
Style separation from IE6:
html>body .class ( ) head+body .class ( ) html:first-child .class ( )
Separating styles from IE6 and IE7:
html>/**/body()
Style separation from IE6 - IE8:
*|html .class ( ) html:not() .class ( )
Conditional comments in IE:
Conditional comments only work in IE on Windows; in other browsers they are normal comments, so they can be used without any problems. The syntax is:
/* If you want the explorer to ignore some piece of code, then use!condition */ /* The condition can be like this: IE – for any version of IE lt IE v – (less than) for all IE browsers whose version is less than v lte IE v – (less than or equal) for all IE browsers whose version is less than v, or the same gte IE v – (greater than or equal) – for IE whose version is greater than or equal to v gt IE v – ( greater than) – for IE, the version of which is greater than v. */
Conditional comments in IE6, IE7, IE8:
/* Style sheet for IE6 */ /* Style sheet for IE7 */ /* Style sheet for IE8 */
Box Model hack:
There are glitches in IE when border and padding are included in the width of an element. Box Model hack will fix them.
.class ( padding: 4em ; border: 1em solid red ; width: 30em; width /**/ : /**/ 25em ; ) /* For IE, the block width is smaller by padding + border */
Min-width and max-width in IE:
IE doesn't understand these css properties. The block hack looks like this:
.class ( min-width: 500px ; width: expression (document.body.clientWidth< 500? "500px" : "auto"); } /* Для IE ширина блока меньше на величину padding + border */
.class ( min-width: 500px ; max-width: 750px ; width: expression (document.body.clientWidth< 500? "500px" : document.body.clientWidth >750? "750px" : "auto"); ) /* For IE, the block width is smaller by padding + border */
Min-height hack from Dustin Diaz
.class ( min-height: 100% ; height: auto !important ; height: 100% ; )
Simple selectors:
It is not necessary to create a separate file for different browsers. You can use individual css selectors in the main css file:
* html .class ( ) /* In case the html page has a doctype, this hack works in IE6 */ /* In case of quirks-mode, the hack works in IE6 and IE7. */ *:first-child+html .class ( ) /* For IE 7 and below (first-child) */ *+html .class ( ) /* For IE 7 */ *:first-child+html .class ( ) /* For IE 7 */ html>body .class ( ) /* For IE 7 and normal browsers */ html>/**/body .class ( ) /* For normal browsers (except IE 7) */ / * Example: .class ( background:red ) *html .class ( background:green ) In all browsers except IE6 and below, the background will be red, and in IE6 and below browsers, the background will be green */
Dirty hacks for IE6:
.class ( _background: #F00 ; ) .class ( -background: #F00 ; ) .class ( c\olor: #F00 ; ) /* Doesn't work before letters a, b, c, d, e, f */
Dirty hacks for IE7:
>body ( background: #F00 ; ) /* selects the body element in IE7 only */ html* ( background: #F00 ; ) /* selects all elements inside the html element. Only for IE7 and below */ -,.class ( background: #F00 ; ) .class ( background: #F00 !important! ; ) /* The hack works in a similar way to the!important property. Works for IE7 and below */
Dirty hacks for IE8:
.class ( background: #F00\0/ ; ) /* selects the body element in IE7 only */
Dirty hacks that work in IE6 and IE7:
.class ( *background: #F00 ; ) .class ( //background: #F00 ; ) .class ( background: #F00 !ie ; ) /* The hack works in a similar way to the!important property */
CSS hacks for Mozila FireFox browser
Hacks for all versions of MFF:#class ( color: #F00 ; ) @-moz-document url-prefix () ( .class ( color: #F00 ; ) ) *>.class ( color: #F00 ; )
For MFF 1.5 and higher:
.class, x:-moz-any-link, x:only-child ( color: #F00 ; )
For MFF 2.0 and higher:
body:empty .class ( color: #F00 ; ) #class ( color: #F00 ; ) html>/**/body .class, x:-moz-any-link ( color: #F00 ; )
For MFF 3.0 and possibly higher:
html>/**/body .class, x:-moz-any-link, x:default ( color: #F00 ; )
CSS hacks for Google Chrome browser
body:nth-of-type(1).class ( background: #000 ; )CSS hacks for the Opera browser
Hacks for all versions of Opera:@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio: 0) ( .style ( background: #F00 ; ) )
@media all and (min-width: 0px) ( .class ( color: #F00 ; ) )
For Opera 6:
@media all and (min-width: 1px) ( ( ) .class ( color: #F00 ; ) )
For Opera 7, 8:
@media all and (min-width: 1px) ( .class ( color: #F00 ; ) )
For Opera 9:
@media all and (width) ( .class ( color: #F00 ; ) )
@media all and (min-width: 0px) ( head~body .class ( color: #F00 ; ) )
CSS hacks for Safari browser
body:first-of-type .class ( color: #F00 ; ) html:root*.class ( color: #F00 ; ) body:first-of-type .class ( color: #F00 ; ) body:first-of -type .class ( color: #F00 ; )@media screen and (-webkit-min-device-pixel-ratio: 0) ( .class ( color: #F00 ; ) ) /* Opera and Safari hack */
When CSS is used not only for text design, but also for working with layers in tableless layout, it is necessary to remember that modern browsers do not treat in the same way such important parameters as margin - the external space of an element, padding - the internal margin of an element, as well as position parameters , float - text wrapping and a number of others.
Because of these differences in the interpretation of parameter values, it often happens that sites and web interfaces that look normal in the Mozilla Firefox, Opera and Safari browsers suddenly begin to diverge in the Internet Explorer browser.
The basis for these differences in browser interpretation of CSS is the lack of compliance of Internet Explorer browsers prior to version 7 with the CSS standards adopted by the W3C. Therefore, for successful tableless layout for earlier versions of IE than 7, you need to use a number of special constructs called CSS hacks. It is also important to note that for other browsers it is sometimes necessary to use a CSS hack.
Let's consider how to write CSS that would only be interpreted by certain types of browsers:
Document table of contents
CSS for IE 5, 5.5, 6, 7
Conditional comments
IE browsers have long supported so-called Conditional Comments, which allow you to make content visible only to IE. Conditional comments are simply specially formed HTML comments that are understood only by certain versions of Internet Explorer for Windows. As an example, you can use conditional comments to fix the PNG transparency bug in IE.To use them you need:
- First, create a common style sheet for all browsers, without any hacks, and then continue working on correcting errors when displaying the page in IE.
- The stylesheet with the corrected errors is then saved separately and becomes the stylesheet for all versions of IE (for example, all-ie.css).
- Save stylesheets with bug fixes separately for each version of IE (eg ie-5.0.css).
- Next, you need to sequentially connect these style sheets through HTML code using conditional comments.
Conditional comment syntax
The following conditional comment will be understood by browsers IE5, IE5.5 and IE6, as well as IE7 and IE8:
Applying CSS for IE5
If you need to apply a conditional comment only for IE5, then you just need to specify version 5.0 in the IE 5.0 if clause:
Applying CSS for IE5.5
If you need to apply relative to IE5.5, it will look like this:
Applying CSS for IE6
Same for IE6:
Applying CSS for IE5 and IE5.5 at the same time or for multiple versions
If you need to use conditional comments to fix a bug with the box model in the IE5 and IE5.5 browsers, you can use part of the version index or comparison operators.The first example will connect the style sheet to any version of Internet Explorer whose first digit is 5:
Alternatively, you can specify that stylesheets connect to any browser version less than 6:
Instead of lt (l ess t hen - less) can also be used lte (l ess t hen or e qual to - less than or equal to), GT (g reater t hen - more), gte (g reater t hen or e qual to - greater than or equal to) the main thing with all this variety of possibilities is to choose the right order for specifying conditional comments, so as not to get into a situation where for some browsers groups of conditional comments overlap, giving an unexpected result.
How to use
If you don't want the general style sheets to dominate the tables that are created specifically for IE, then you need to include the general style sheets first, and only then the tables for IE. In an example it looks like this:
Other advantages of this method
By using conditional comments you also have a way to more reliably determine the browser version. Browsers that pretend to be Internet Explorer but are not will not use style sheets designed for IE. With this method, you can generate accurate statistics regarding which version of IE your visitors are using, without errors caused by programs and browsers impersonating IE.Validity
Perhaps one of the best parts of this technique is that your stylesheets and your carefully formatted (X)HTML documents will remain fully compliant with the specification.Debugging Conditional Comments
There is one caveat worth mentioning.If you use several versions of Internet Explorer on the same machine, then all of these versions will pretend to be the newest version installed. This means that if you have IE6 installed, but are viewing the page using IE5, this conditional comment will be executed:
But this conditional comment will not be executed:
For the most accurate tracking of differences in CSS processing by different versions of IE, the free program IETester, which supports all versions of IE from 5 to 8, has worked well. And for quickly changing CSS parameters in IE8 by pressing F12, a developer tool is available, reminiscent of FireBug in Mozilla Firefox.
Similar to declaring style sheets, this method can hide HTML code from specific or all versions of IE. For example, the text "HTML code" will be displayed in all browsers except IE6 if you put it in a conditional comment like this:
HTML-код
Tag
One thing to remember is that conditional comments in IE can be used anywhere on a page, not just to declare stylesheets for the appropriate browser version. Using conditional comments, you can display some additional information to IE users that is not visible to users of other browsers. Similar to conditional comments in IE 5--IE 8, the tag is supported
This
IE users will be shown as: This is Internet Explorer, and users of other browsers will be shown as: This is not Internet Explorer.
Tag
CSS hacks IE
In order not to clutter the HTML code by declaring several style sheets, or if you need to save a single CSS file, you can write separate styles that will only work in IE. Moreover, there is an option for both IE6 and IE7.For IE all versions. If you prefix a property with two forward slashes (//), it will only be accepted by IE browsers of all versions. Other browsers will ignore this property.
For IE6 It is possible to put a minus sign (-) or an underscore (_) in front of a property without IE7 responding to it. You can also use the following construction:
*html.style { ...}
For example:
Style ( background : red; /* for normal browsers *///background: green; /* for all IEs */ -background : blue; /* for IE6 */ ) * html .style ( background : blue; /* another way for IE6 */ }
In this case, the background will be red in Opera and Firefox browsers, green in IE7 and blue in Internet Explorer 6.
The example changes the background color for different browsers. In practice, this method is used to achieve identical display and cross-browser compatibility. Most often you have to resort to it when positioning and set different values for properties like left, top, padding, margin, width and others related to sizes, percentages and pixels.
For IE7 CSS hack used:
*: first-child+html .style ( ...)
*+html .style { ...}
CSS for Firefox
There are also special CSS hacks that allow styles to be shown only in the Firefox browser.html : root .style ( ...) /* this also works for Safari */
Style, x : -moz-any-link (...)
To quickly change CSS parameters in Firefox by pressing F12, the Firebug developer tool is available (requires preliminary installation) - it is the best among analogues.
CSS for Opera
CSS hacks for the Opera browser are represented by the following examples:Let's imagine a situation: you use a website every day, you are happy with it, but there is some kind of flaw in the design that interferes with the perception of the content or even irritates you. And then you ask yourself: “What if you could set your own styles for websites? After all, the website display is generated by the browser from the source code, so how can we get into this display generation process and make our own changes?”
To be honest, I don’t remember why exactly this question arose for me the first time, but it sounded about the same. Then I even wanted to go poking around in the browser files, but I was too lazy - and I did the right thing. There is no need to tinker with the files (besides, after updating the browser version you will have to tinker again), because an element has already been invented to influence the styles of all or specific sites: - addon for Firefox.
But first, a concrete example. For some reason, recently Yandex has been displaying results crookedly for Nadyusha. Either the search engine is at odds with the new version of the awesome Firefox browser, or some plugin is spoiling the picture, but the results look like this:
It will take a long time to find out who is to blame, but what to do is obvious. Just don't write in Yandex "Stylish download free"— You’ll still pump up more viruses. We get this plugin from the official repository:
By following the link, you will see the same thing as in my picture at the beginning of the post. There you need to click “Add to Firefox”, perform a few more intuitive clicks and restart the browser (the addon itself will suggest this after installation).
Now you need to create a new style while on the Yandex search results page. In the picture on the left, I showed how I clicked on the Stylish icon at the bottom of the browser and selected “Create a new style for yandex.ru.”
After this, a window will open where you need to enter a new style. By the way, another FF plugin, FireBug, helped me figure out what the design problem was. Oddly enough, I haven’t written about it on this blog yet. (Corrected: .) And here is the window for the style being created:
For correction, I entered the following styles into this window:
B-serp-item ( padding-left: 60px !important; ) b-serp-item__favicon, .b-wizard-icon ( left: 30px !important; )
The rest of the code was already filled in in advance. It indicates that the design will be applied only to the yandex.ru website. Save and look at the result:
Beautiful? By the way, this is not my first experience using the Stylish plugin. I can show you another option. Zusiks once complained that on the blog hyperseo.ru, under articles, the subscription buttons did not look adequate, but exactly like this:
I can fix this in the site styles, but the reason for this display is that the RDS plugin, for the purpose of highlighting the noindex (in which I have the subscription text), places this text in a container in such a way that inline elements become block elements.
In general, I created a special style for the pageNoIndex_hilite class block, which creates RDS. Now it looks like the picture on the right for me.
This is such beauty now. Of course, I created this style not only so that hyperseo.ru would look beautiful. I did this so that all the elements of all sites that are inside noindex at the first nesting level will be highlighted with a translucent background with checkered patterns - so now I definitely won’t miss noindex. And the text in this non-indexable block will no longer merge with the noindex highlight background, as sometimes happened before. Plus, the "inline/block" jamb that I've seen on some other sites won't bother me anymore. Otherwise, I had to turn off this SEO highlighting before in order to view the site normally. And here I applied the following styles:
PageNoIndex_hilite ( display:inline !important; ) .pageNoIndex_hilite * ( background: url("http://hitecinfo.net/wp-content/uploads/2011/11/noindex-fon.png"); ) .pageNoIndex_hilite * * ( background:transparent)
Of course, it would be more correct to encode the picture in base64 and paste it as text, otherwise it’s a bit lame... But the main thing is that it works!
That's it, now you yourself are responsible for ensuring that the sites you have were displayed beautifully. And now I’ll make you rich too. Use Yeysk discounts if you make purchases in Yeysk. The Couponator will help you with this. As some guy on the dollar bill said, “a penny saved is a penny earned.”
CSS for Firefox browser only:
HTML/XHTML. Code:
<p>In Firefox this text is redp>
@-moz-document url-prefix()(p(color: #f00;))
Unlike the Opera-only way of applying CSS, this is essentially a hack - since the rule was originally intended for a different purpose. However, the lack of support in other browsers allows the code to be isolated for use only by the Firefox web browser.
Other browsers with the Gecko engine, such as SeaMonkey 1.0+ or the older Netscape 9.0, also support this CSS hack.
Different versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they should - these browsers ignore all the hack code.
There is another browser where the text turns red - ELinks, a text-based web browser with some CSS support.
Aliosque subditos et theme
CSS for Firefox browser only: In Firefox, this text is red HTML/XHTML. Code:
In Firefox this text is red
CSS. Code: @-moz-document url-prefix() (p (color: #f00;)) Unlike the Opera-only CSS method, this is essentially a hack - since the rule was originally intended for a different purpose. However, the lack of support in other browsers allows the code to be isolated for use only by the Firefox web browser. [ 1 ] Other browsers with the Gecko engine, such as SeaMonkey 1.0+ or the older Netscape 9.0, also support this CSS hack. [ 2 ] Different versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they should - these browsers ignore all the hack code. [ 3 ] There is another browser where the text turns red - ELinks, a text-based web browser with some CSS support.A: Installing the Arachne web browser on a disk created in RAM - in this case, the Arachne web browser works the fastest. The size of the RAM should allow you to create a RAM disk of 6 MB or more. To install and configure the Arachne web browser to connect to the Internet via a modem and telephone line (Dial-up), you need several programs: 1. Arachne web browser [Download] 2. Package with Cyrillic encoding KOI8-R koi8-r.apm [Download] 3. Package with Cyrillic encoding CP-1251 / Windows-1251 cp1251.apm [Download] 4. Mouse driver, for example mouse.com [Download] 5. Archivers. For example, PKZIP [Download] and PKUNZIP [Download] 6. If MS-DOS 6.0+ is not used, QEMM97 [Download] 7. If MS-DOS 6.0+ is not used, TDSK [Download] Installation and setting up the Arachne web browser in steps: 1. Create a disk in RAM. Which letter will be assigned to it by the operating system will be obtained on the basis that A: and B: will be used for floppy drives (even if there is only one, two letters will still be reserved), C: for the first active main partition on the first hard drive; if there are more disks, then so many letters will be used sequentially to name them all. If there are no devices installed via DRIVER.SYS or similar drivers, then the next letter will refer to the RAM disk. To be sure, you can, after adding the appropriate line to CONFIG.SYS (See below) to create a RAM disk, for example, restart the computer and experimentally check under which letter the RAM disk is located. In this case, this is E: Depending on the amount of RAM, you need to decide how many megabytes can be allocated for the RAM disk. Basically, the more, the better. Since, for example, the browser cache will grow in volume with prolonged and intensive use within a session. In this example, the size of the RAM disk is assigned to 12,000 KB. For the MS-DOS driver RAMDRIVE.SYS the upper limit is 32,767 KB, and for TDSK it is 64 MB. To create such a disk, you need to write the following somewhere in the middle part of the CONFIG.SYS file: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Create a folder, for example C:\DRIVERS\, where to place the driver mouse, for example mouse.com. 3. Add a line to the AUTOEXEC.BAT file that will launch the mouse driver. In it indicate the full let to the driver; can be any: LH C:\DRIVERS\MOUSE.COM 4. Run MemMaker or OPTIMIZE from QEMM97 to optimize handling of the base memory. If MemMaker, then you can simply ENTER all suggestions - MemMaker will do everything itself. The computer will reboot several times, each time MemMaker will start - again you don’t have to do anything other than ENTER. If QEMM97 is used (specifically the OPTIMIZE application), there will also be several reboots and in all cases only ENTER is possible. 5. Start installing the Arachne web browser on the RAM disk, in the example under consideration, this is drive E: A195GPL.EXE To continue the installation, press Y Press N to enter the desired path to the folder where the Arachne web browser will be installed. Enter the desired path to the folder where the Arachne web browser will be installed. In this example, this is E:\ARACHNE\.
I am not a supporter of conditional comments in CSS (you can scold me for this); instead, I prefer to use various CSS hacks in order to solve the problem of cross-browser compatibility during the coding process, without unnecessary “body movements”. Yes, this is wrong from the point of view of standards and ugly, but this way is much easier for me to typesetting.
As I visit various foreign Internet resources on web development, I discover more and more CSS hacks that can be applied personally for one of the popular browsers today: Opera, FireFox, Internet Explorer, Safari, Google Chrome.
As new hacks are discovered, this list will be expanded.
CSS hacks for the Opera browser
*|html .style ( background: #F00; ) html:first-child .style ( background: #F00; ) /* valid code */ /* only for Opera< 9.5 */ opera:-o-prefocus .style { background: #F00; } /* для Opera 9.5 - 12.16 */ /* вместо "opera" можно подставить любое слово/символ */CSS hack for FireFox browser
@-moz-document url-prefix() ( .style (background: #F00;) )CSS hacks for Internet Explorer 6 browser
.style ( _background: #F00; ) /* valid code */Even though the CSS validator considers the underscore hack to be a bug, the CSS 2.1 specification allows this construct to be used.
* html .style ( background: #F00; ) /* valid code */
CSS hacks for Internet Explorer 7 browser
*+html .style ( background: #F00; ) /* valid code */ *:first-child+html .style ( background: #F00; ) /* valid code */ html>body .style ( *background: # F00;CSS hack for Internet Explorer 8 browser
@media \0screen ( .style (background: #F00;) )CSS hack for Internet Explorer 9
:root .style ( background: #F00\9; )Unfortunately, IE10 also understands this hack.