Responsive IFrames — The Right Way!

Building responsive IFrames can be frustrating. Don’t let an IFrame break your beautifully laid out responsive site. Learn how to build responsive IFrames the right way with just a few lines of CSS.

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Rather, making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make responsive iframes?

Responsive IFrames

Most implementations I’ve seen require the use of JS, like Pym.js. This can cause unexpected behavior depending on the device and browser version — Pym.js only goes back to IE9. Wouldn’t it be nice if there was a way to make responsive iframes without using a dirty little code snippet? There is! It’s name is the CSS intrinsic ratio technique — or what I like to call, ‘Magic iframes!’. Continue reading “Responsive IFrames — The Right Way!”

CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

Cross-Browser CSS Styled Select Lists Using jQuery

Front-enders won’t be the only ones to rejoice after reading this. I’m going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

Front-enders won’t be the only ones to rejoice after reading this. I’m going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

I know for many years web designers have yelled at us front-enders about why we can’t style our site’s select box like the one’s in the mockups they create. With the added rounded corners, customized drop down arrows, gradients, images and more; styling drop down select boxes can become a nightmare for us. Not only is styling them a pain, but different browsers render them differently.

If you’re a pixel perfect coder like I am, I’m sure you share in my frustration trying to make those stupid drop downs look good and the same if the various browsers. Well, hopefully after reading this article you’ll be getting some better sleep at night because I’m going to make styling cross-browser CSS styled select lists using as easy as pie! Ready for some delicious code?

UPDATE (Mar. 18, 2014): Fixed issue where selects would break when more than one appears on the page.

Download Demo Files


Enough with the small talk, let’s get into the code. First we’re going to start off by coding the structure and content of the page.

Step 1: Start with the basics

index.html

Take a look at the markup above. Most of it should be pretty straight forward for the majority of you. There’s one thing that may stick out a little and that’s the use of the data attribute:

  • data-icon, the location of the icon for the specified list element
  • data-html-text, the content that will appear for the list element

Step 2: Build the functionality

script.js

This is where the magic happens. If you’re familiar with jQuery, you should be able to read and understand the markup above. It’s pretty simple and straightforward, nothing too complex.

Basically, we hid the select box and looped through all of the items to generate the rendered HTML content. That content will turn into our styled select box. When someone clicks on the rendered box, the list will slide down with all of the available list items from the hidden select box. Once the user select an item, we update the visible text. Simple stuff!

Now that we’ve got the structure, content and functionality built, we need to make it prettyfied. This is where the power of CSS3 comes in.

Step 3: Make it prettyfied

styles.css

That’s all the styling you’ll need to build this cross-browser CSS styled select list. Of course, you can always embellish it with your own little flair. Just remember to be vigilant about the capabilities of outdated browsers.

The Final Product

CSS3 Styled Select

Browser Support

I made a point to ensure that this method of doing styled select dropdowns would be cross-browser compatible and work with older versions. I’ve testing the code in the following browsers:

  • Google Chrome
  • Firebox
  • Internet Explorer (version 7 and up!)
  • Opera
  • Safari

Let me know if you run into a different browser or a specific version of a browser that this doesn’t work on or comes out a little messed up.


In Conclusion

I’ve demonstrated just one of the many ways to build a cross-browser CSS styled select list using jQuery. I prefer this method because of it’s simplicity and ability to style it however needed. A major bonus is that it’s cross-browser compatible, which many of the styled select box scripts aren’t.

I’d love to see how you’ve incorporated it into your site and any feedback other developers might have.