How to prevent Chrome from changing text color when printing

Chrome has a feature that turns light text to black before printing. For instance, if you have a light gray paragraph on the page, it will print as black text. While this feature might ensure that unoptimized pages are readable when printed, you might want to disable it so colors come out the way you […]

Using CSS3 transforms and calc() in Internet Explorer

Although CSS calc sizes are supported in Internet Explorer 10 and above, they do not work when used in transform attributes. For instance, transform: translate(0, calc(100% – 10px)); does not work in Internet Explorer. To work around this, you can chain transforms. For instance, the following statements are equivalent: transform: translate(0, calc(100% – 10px)); //Does […]

Print preview significantly different from Inspector in Chrome?

Are you having issues with the Chrome print media emulator showing different results from print preview? Here’s how I solved this problem. In the emulator, my styles were showing just fine, but despite all the !important rules in the world, nothing would work in print preview. It turns out the print preview will display your […]

Disabling font zooming in Chrome on Android

If you are here, you have probably tried disabling font zooming by using -webkit-text-size-adjust:100% and discovered it didn’t work. Chrome conveniently ignores this non-standard property, so you need to use an inconvenient hack to disable what is called font boosting by adding the following line to your CSS file: html * {max-height:1000000px;} Your fonts should […]

How to remove the dropdown arrow in Internet Explorer

Unlike other browsers, Internet Explorer will not fully disable a <select> element’s style when you use the CSS3 appearance property. To hide the dropdown’s arrow, use the following CSS line: select::-ms-expand { display: none; }

Firefox, display:table-cell and absolute positioning

This is now fixed in the latest release of Firefox, so you should not have to worry about this. If you have reached this page, you are probably trying to put a position:absolute element in a display:table-cell; position:relative element. This shouldn’t be a problem with Chrome and Internet Explorer, but Firefox will probably ignore position:relative […]

How to prevent Safari from resizing text in iOS

By default, rotating the iPhone’s screen will resize the font in mobile Safari. Although this can be useful for desktop websites, it can easily break a beautiful mobile design. All you need to do is to set the following CSS attribute on the body element: -webkit-text-size-adjust: none; This will prevent webkit browsers (Safari included) from […]

Integrating Django forms with Twitter Bootstrap

With this template, you will be able to use Twitter Bootstrap with your Django forms. In this example, we assume our form is in the form variable. <form class=”form-horizontal” action=”” method=”POST” {% if form.is_multipart %}enctype=”multipart/form-data”{% endif %}> {% csrf_token %} {{ form.media }} {% if form.errors %} <div class=”alert alert-error”> <ul> {% for error in […]

How to implement parallax scrolling with jQuery

A parallax effect is adds a nice touch of style to an existing website, and looks fantastic with large images. Here is how to implement a parallax on a background image with jQuery. First, set the element’s background to fixed: .myElement{background:url(‘images/myBackground.jpg’) no-repeat fixed center top} Next, put this in your $(document).ready() function. Do not forget […]

How to use different CSS styles depending on screen orientation

Most modern browsers support the orientation media attribute, which allows you to define specific styles for devices in portrait or landscape mode. This is especially useful when designing websites for mobile devices. Here is how you use the orientation media selectors: @media screen and (orientation:portrait) { /* Portrait styles */ } @media screen and (orientation:landscape) […]