This enables PIE for IE up to version 8 only (the first part is not possible in Haml, so use ERB):
<!--[if !IE]><!--> <%= stylesheet_link_tag 'screen', :media => 'screen' %> <!--<![endif]--> <!--[if lte IE 8]> <%= stylesheet_link_tag 'screen_with_pie', :media => 'screen' %> <![endif]-->
These would be your two screen Sasses:
When using an odd value for
line-height in CSS the result will vary across all major browsers.\
Use an even line-height whenever possible.
When you are styling block elements you often apply both
line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:
=height($height) height: $height line-height: floor($height / 2) * 2
So when you call
+height(19px) in Sass this will be the resulting CSS:
height: 19px line-...
Fixes all Flash elements on a page so that they heed DOM stacking order
This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:
Then I should see an element "#sign_in" But I should not see an element "#sign_out"
Here is the step definition for Capybara:
Then /^I should (not )?see an element "([^"]*)"$/ do |negate, selector| expectation = negate ? :should_not : :should page.send(expectation, have_css(selector)) end
Here is the step definition for Webrat:
Then /^I should (not )?see an element "([^"]*)"$/ do |negate...
Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this short sprint we targeted mobile WebKit browsers—especially the default browsers on iOS and Android—because of their widespread use and excellent support for HTML5 and CSS3. Here are a few things we’ve learned along the way.
has_css? matcher has a couple of options you might find useful.
:count option like this:
Then /^I should see (\d+) users?$/ do |count| page.should have_css('ul#users li', :count => count.to_i) end
:text option like this:
Then /^I should see a user with name "([^\"]*)"$/ do |nam...
You don't need a Rails application to use Sass. Even when you're working on a static site you can generate your CSS through Sass.
sudo gem install haml
sassin the folder, that stores your stylesheets, e.g.
sass --watch css/sass:css. This will watch your sass files for changes and rewrite stylesheets as required.
This even works on Windows.
You might want to change our [typical .gitignor...
Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, we can! At least in WebKit
The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).
This gem is designed to provide CSS views to Rails, and a process to concatenate and minify these files to one file for production.
Sometimes files attain executable-flags that they do not need, e.g. when your Windows VM copies them over a Samba share onto your machine.
From inside your Rails project directory call regularly:
chmod -x on Ruby, HTML, CSS, image, Rake and similar files.
This script is part of our geordi gem on github.
When you create e.g. a sidebar box that contains headlines and paragraphs, the final paragraph's margin in that box will create an undesired 'bottom padding' inside that box.
Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom margin disappear:
=hide_last_margin >*:last-child margin-bottom: 0
Use it like this:
.sidebar_box p, table, ul margin-bottom: 1em +hide_last_margin
Does not work in versions of <IE8
Your best bet is to expli...
To parse XML-documents, I recommend the gem nokogiri.
xml = Nokogiri::XML("<list><item>foo</item><item>bar</item></list>")parses an xml string. You can also call
Nokogiri::HTMLto be more liberal about accepting invalid XML.
xml / 'list item'returns all matching nodes;
list itemis used like a CSS selector
xml / './/list/item'also returns all matching nodes, but
.//list/itemis now an XPath selector
Unfortunately, the gem has a few problems:
All these problems are solved for us, in our own lemonade fork. This fork has since been merged to the original gem, maybe we can use t...
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.
Overflow does some cool things you should know about.