Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks
Related cards:
Declare different CSS background-images for different locales
If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%...
Proper cross-browser CSS styling for buttons
Styling button tags across all major browsers is not easy.
Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside...
Different CSS for IE using Sass
At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.
Step 1
Move your curr...
Useful tricks for logging debugging information to the browser console
During debugging you might pepper your code with lines like these:
console.log('foo = ' + foo + ', bar = ' + bar)
I recommend to use [variable interpolation](https://makandracards.com/makandra/30113-the-developer-console-can-do-more-than...
Styling and scaling for mobile devices
If you want your application to display properly on iPad, iPhone or Android there are two things to do:
Define a stylesheet for mobile devices
Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers...
Setting SASS variables as value for CSS custom properties
When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable in your SASS environment. A pratical example would be a list of color variables that you've defined in colors.sass and that y...
Setting expiry dates for images, JavaScript and CSS
When deploying Rails applications you might have noticed that JS and CSS are not cached by all browsers.
In order to force Apache to add expiry dates to its response, add the attached .htaccess to the public directory. This will add a header su...
Tips And Tricks For Print Style Sheets
Smashing Magazine lists some handy tricks for print style sheets, all with CSS:
- Expand External Links For Print
- Print QR Codes For Easy URL References
- Use CSS filters to improve the result of printed graphics (i.e. images with transparent p...
How to test your website for different versions of Internet Explorer or Edge
Virtualization
Microsoft provides virtual machines for different Internet Explorer versions.
The images are available for various virtualization solutions, includi...
Browser Hacks: CSS Rules to Target Specific Browsers And Versions
The linked site lists a wealth of CSS hacks that let you apply styles to just that one browser. You should be using this mostly for fixing browser issues and not give up on creating solid styles.