So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.
Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.
What’s a fella to do?
zoom
So, thinking about it a little bit, I seized upon using the non-standard CSS zoom property. Supported in Internet Explorer (zoom:1 is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+.
The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom
Enter CSS 2D Transform
A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale value to approximate zoom in browsers that lack support.
Let’s see how I did it.
As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.
I’m going to be writing a bit more about practical development topics here over the next few weeks. Code is fun to write about but code takes time. Sharing my experience and opinions on the day-to-day life of a front end engineer I can do with a little less effort. Also, since I’ve been doing it forever and have experience all over the place I feel like I just might have something to share.
Anyway, today I’m going to continue to talk about the technical interview process. This time with an anecdote culled from my time on the other side of the desk.
I was interviewed a while ago by someone who was significantly junior to me. I think he had maybe 3 years of experience. I was supposed to have been interviewed by someone who would have been a peer at the company, but that fell apart and it fell down to a junior resource. He asked me two questions over a span of ten minutes. Both were worth commenting on, but I’m going to focus on the first one as it illustrates something pretty important about who you have interviewing people and what they should be expected to be able to figure out about a candidate.
We get on the phone, trade pleasantries and then he gets started. He asks me the following question:
“You have a div with a width of 300 pixels. It’s got a margin of 10 pixels. How big is the box?” Read the rest of this entry »
We continue with our examination of CSS with some real basics- formatting, writing rules, organization and the like. Nothing groundbreaking, but the basics are important in any endeavor, so here they are.
Formatting
During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.
I’m going to be presenting my Intro to CSS talk at Design Camp Boston on November 6, 2010. It’s at NERD. If you can’t make my Boston PHP Meetup version of the presentation, here’s your chance. Failing that, make sure to say hi if you’re there, because I’ll be around all day taking in the goodness.
One of the most important things in CSS is understanding the way rules are inherited and applied in the browser. This is one of those things that many developers “get” intuitively but don’t necessarily understand at a granular level.
There’s actually an algorithm, so if you’re stumped, you can actually count it out. It works like this:
After a long break, I’m finally back with the long-awaited CSS portion of this little series.
In this article I’ll go over some core concepts. Next post I’ll outline one poorly understood, but vital part of CSS. More posts full (yes, full) of tips, tricks and best practices will follow.
Core concepts
CSS is a style sheet language used to determine the formatting of an HTML document (although it could be used to style other XML documents like SVG and XUL.) Before we had CSS (and before it was widely adopted) all of this presentation information was embedded in the document, either in the form of attributes like width or bgcolor or in the form of purely presentational tags like font. Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.
CSS fixed all that. Using separate style sheets for an entire site and leveraging semantic markup, and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles to an entire site while updating a single, cacheable file. Read the rest of this entry »
I haven’t posted about this yet. I’m an incredible idiot. I’m presenting at the Boston PHP group in October. My presentation is a couple of weeks before Steve Krug. No pressure.
Is CSS still a mystery to you? Do you find yourself editing your styles over and over justo get them to display correctly in IE and Firefox? Have you created a powerful application, and want it to look nice and clean? Do you want to take your knowledge of CSS and Design to the next level?
In this presentation Rob Larsen will step through the basics of Cascading Style Sheets (CSS,) the visual language of the Web. Starting with the most fundamental concepts and finishing with concrete examples illustrating common patterns, this presentation will serve as a launching point for those new to CSS and will strengthen the understanding of the core principles for developer or designer more experienced with CSS.
In this event you will learn:
Basics of CSS
Design & Layout
Web Standards
Rich Visual Behaviors
CSS1, CSS2, CSS3
Frameworks, Abstractions, etc.
Dealing with cross browser support
Separation of style, content and behavior
Testing
Tips & Tricks
If you still fumble with CSS and want to take your experience to the next level, then this event is for you.
About the presenter:
Rob Larsen has more than 11 years of experience building and designing web sites and web applications. Currently he’s a Consultant at Isobar, working for some of the world’s largest brands.
Prior to joining Isobar, Rob was the Principal Presentation Engineer at Cramer. At Cramer, Rob and his team produced standards-based, accessible and SEO-friendly sites and rich media applications. Before that, Rob worked for several years as a consultant for clients like Compete, Duracell, Gillette, Boston’s Museum of Science, PC Connection, RSA Security, State Street Corporation and Webex.
The body is clearly going to take a while, since it contains all of the content on the page. I’ll be breaking it out into chunks. This first post will focus on how I use the body tag itself.
I generally use the body tag to hold basic information about the page to use with both CSS and JavaScript. I want to capture the general type of page (home pages, landing page, gallery page, tertiary page, form page) and then the style of the page within the general type (e.g., art, movies, blog.) Coming up with a good, logical scheme for this kind of thing can generate plenty of unexpected benefits throughout a site build.
It can also help with planning as these classifications can be used as part of the estimation process- “I’ve got 5 major templates and 10 variations, that’ll be 2 weeks of work.”
