A List Apart

Menu

Topic: CSS

  • Building Books with CSS3

    by Nellie McKesson · Issue 353 ·

    While historically, it's been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. "Paged" media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It's a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O'Reilly Media, explains how to build books with CSS3.

  • A Case for Responsive Résumés

    by Andrew Hoffman · Issue 353 ·

    Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today's unforgiving economy is vital to a designer/developer's survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.

  • Say No to Faux Bold

    by Alan Stearns · Issue 350 ·

    Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe's Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you're taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you're actually using the web font , and only the web font ,  to display your site's content in all its glory.

  • Dive into Responsive Prototyping with Foundation

    by Jonathan Smiley · Issue 348 ·

    There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites.

  • Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies

    by Lea Verou · Issue 344 ·

    Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process, implement whatever they come up with in WebKit, then evangelize it to developers as the best thing since sliced bread. In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. Lea Verou explains why single-vendor solutions are not the same as standards and not healthy for your professional practice or the future of the web.

  • The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik

    by Tantek Çelik, Eric Meyer · Issue 344 ·

    During a public meeting of the W3C CSS Working Group, Mozilla web standards lead Tantek Çelik precipitated a crisis in Web Standards Land when he complained about developers who misunderstand and abuse vendor prefixes by only supporting WebKit’s, thereby creating a browser monoculture. Tantek’s proposed solution, having Mozilla pretend to be WebKit, inflamed many in the standards community, especially when representatives from Opera and Microsoft immediately agreed about the problem and announced similar plans to Mozilla’s. To get to the bottom of the new big brouhaha, exclusively for A List Apart, our Eric Meyer interviews Tantek on Mozilla’s controversial plan to support -webkit- prefixed properties.

  • Building Twitter Bootstrap

    by Mark Otto · Issue 342 ·

    Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on. Today, it has grown to include dozens of components and has become the most popular project on GitHub, with more than 13,000 watchers and 2,000 forks. Mark Otto, the co-creator of Bootstrap, sheds light on how and why Bootstrap was made, the processes used to create it, and how it has grown as a design system.

  • Getting Started with Sass

    by David Demaree · Issue 340 ·

    CSS' simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity, so welcome as we first started to move away from font tags and table-based layouts, has become a liability. Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage, and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand. Learn how Sass ("syntactically awesome style sheets") can help simplify the creation, updating, and maintenance of powerful sites and apps.

  • CSS3 Bling in the Real World

    by Chris Mills · Issue 331 ·

    It’s here, it’s queer, get used to it! CSS3 is fun and fabulous, and if we design with progressive enhancement in mind, we can add all kinds of CSS wizardry to our websites and applications without worrying about how things work (or don’t) in old browsers and outdated devices. But what happens if our audience includes folks who use non-Webkit-powered phones? And what if our clients still believe a web page is supposed to look and work the same in every device? Learn to make CSS3 yumminess as cross-browser as possible.

  • Fluid Images

    by Ethan Marcotte · Issue 328 ·

    Learn to how to make fixed-width images fluid and how to add them to your fluid grids to build a site that responds to the size of the viewport without sacrificing aesthetics. We are delighted to present an excerpt from Ethan's new book, (and the fourth title from A Book Apart), Responsive Web Design.

  • CSS Floats 101

    by Noah Stokes · Issue 325 ·

    The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don't fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.

  • Understanding CSS3 Transitions

    by Dan Cederholm · Issue 318 ·

    From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm of SimpleBits and Dribbble fame. We are delighted to present an excerpt from his new book (and the second publication from A Book Apart), CSS3 For Web Designers.

  • CSS Positioning 101

    by Noah Stokes · Issue 318 ·

    If you're a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. Designer slash developer Noah Stokes scrutinizes the CSS position property to show how you can use it to create standards-compliant, table-free CSS layouts. Test or refresh your knowledge of static, relative, absolute, fixed, and inherited positioning, and how they work together to create any web layout the mind can conceive.

  • Forward Thinking Form Validation

    by Ryan Seddon · Issue 314 ·

    When users complete a form to buy your product or sign up for your service, you want to reduce mistakes and guide them to success. Now, with HTML5 form input types and attributes, you can set validation constraints to check user input. With CSS3’s new UI pseudo-classes, you can style validation states to make form completion quick and effortless.

  • The Look That Says Book

    by Richard Fink · Issue 313 ·

    Hyphenation and justification: It’s not just for print any more. Armed with good taste, a special unicode font character called the soft hyphen, and a bit o’ JavaScript jiggery, you can justify and hyphenate web pages with the best of them. Master the zero width space. Use the Hyphenator.js library to bottle fame, brew glory, and put a stopper in death. Create web pages that hyphenate and justify on the fly, even when the layout reflows in response to changes in viewport size.

  • Apps vs. the Web

    by Craig Hockenberry · Issue 312 ·

    There's an app for that, and you're the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone's Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you'll need to know if you choose to create an iPhone app, from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.

  • Supersize that Background, Please!

    by Bobby van der Sluis · Issue 309 ·

    Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.

  • Prefix or Posthack

    by Eric Meyer · Issue 309 ·

    Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

  • Taking Advantage of HTML5 and CSS3 with Modernizr

    by Faruk Ateş · Issue 308 ·

    Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can't be said for CSS3 and HTML5. That's where Faruk Ateş’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.

  • Stop Forking with CSS3

    by Aaron Gustafson · Issue 308 ·

    You may remember when JavaScript was a dark art. It earned that reputation because, in order to do anything with even the teensiest bit of cross-browser consistency, you had to fork your code for various versions of Netscape and IE. Today, thanks to web standards advocacy and diligent JavaScript library authors, our code is relatively fork-free. Alas, in our rush to use some of the features available in CSS3, we've fallen off the wagon. Enter Aaron Gustafson’s eCSStender, a JavaScript library that lets you use CSS3 properties and selectors while keeping your code fork- and hack-free.

Topics