John Cox

Blogs · @wyome · Now · Shelf

Tagged css3 · everything

Interesting

Impressive Webs

Don’t Use PHP for Browser Detection (for CSS) | Impressive Webs

Server-side browser detection via user agent sniffing is problematic for several reasons: user agents can be spoofed or altered, making detection unreliable, and since browser compatibility issues are presentational concerns, they should be handled with client-side CSS and HTML rather than mixing presentation logic into server-side code. Additionally, this approach creates maintenance nightmares by hiding styling fixes in backend code where future developers won't look for them, and it requires constant updates as browsers evolve and change their identification strings.

Permalink css3browser

trentwalton.com

Non Hover | Trent Walton

Written in 2010, this piece argues that hover states—interactive elements triggered by mouse movement—are fundamentally incompatible with the rapidly expanding touchscreen market and should be eliminated from web design rather than adapted to work on both devices. The author contends that designers should prioritize "multi-touch first" approaches, avoiding hidden content and relying instead on visible action items, tap-to-reveal mechanics, or native app experiences, treating hover effects only as optional enhancements for desktop users.

Permalink mobilecss3

CSS-Tricks

CSS Media Queries & Using Available Space | CSS-Tricks

CSS media queries allow you to apply different styles based on browser dimensions and device characteristics, enabling subtle design adjustments rather than complete layout overhauls. The tutorial demonstrates how to write media query syntax both in external stylesheets and within CSS files using the @media rule, showing how to combine conditions with logical operators like "and" (required) and commas (or). A practical example shows how a sidebar email list can progressively display more information—from just links, to icons, to "Email:" labels, to full email addresses in parentheses—as the browser window widens, using CSS pseudo-elements and data attributes to change presentation without modifying HTML.

Permalink tutorialcss3

A List Apart

A List Apart: Articles: Taking Advantage of HTML5 and CSS3 with Modernizr

This article explains how to use Modernizr, a feature-detection JavaScript library, to build websites that gracefully support varying levels of HTML5 and CSS3 capabilities across different browsers. Rather than relying on outdated browser-sniffing techniques, Modernizr detects specific browser capabilities and adds corresponding classes to the HTML element, allowing developers to write conditional CSS rules that apply enhancements only when browsers support them. The article demonstrates practical applications including using custom fonts, CSS columns with float fallbacks, rounded corners, box shadows, and 3D animations—showing how progressive enhancement enables modern features in capable browsers while maintaining usable experiences in older ones.

Permalink tutorialcss3

A List Apart

Stop Forking with CSS3

This article argues that CSS3 vendor prefixes (-webkit-, -moz-, etc.) are a return to the forked code practices that plagued JavaScript development in the 1990s, creating unnecessarily complex and brittle stylesheets. The author introduces eCSStender, a JavaScript library that allows developers to write clean, prefix-free CSS while the library's extensions handle browser compatibility translation behind the scenes, keeping stylesheets maintainable. Beyond polyfilling, eCSStender also serves as a platform for experimenting with proposed CSS features before they're standardized, potentially helping the CSS Working Group evaluate ideas more quickly.

Permalink css3

MonstersPost

25 Essential HTML5 Tutorials and Techniques | Template Monster Blog

This is a curated collection of HTML5 tutorials and learning resources covering semantic markup, APIs like canvas and offline storage, form improvements, video implementation, and CSS3 integration for modern web development. The post presents links to various guides aimed at helping developers master HTML5 features through practical techniques, from basic layout coding to advanced topics like drag-and-drop functionality and mobile app creation. Rather than providing original analysis, it serves as a directory pointing readers toward external tutorials for understanding HTML5's major new standards and capabilities.

Permalink developmenttutorialcss3

CSS-Tricks

Efficiently Rendering CSS | CSS-Tricks

Browsers parse CSS selectors right-to-left, starting with the "key selector," making ID selectors fastest and universal selectors slowest; avoiding tag-qualified selectors (like `ul#nav`) and long descendant chains improves efficiency. While CSS3 selectors like `:nth-child` are more resource-intensive than simple selectors, modern computers have made CSS rendering efficiency less critical than it was a decade ago, so following best practices (unqualified IDs, avoiding deep descendant chains, leveraging CSS cascading) is sensible without being dogmatic about it. The real lesson is balancing performance optimization with semantic markup and maintainability—giving every element a unique ID for speed would be technically fast but practically ridiculous.

Permalink performancetutorialcss3

net.tutsplus.com

HTML5 Globals and You | Nettuts+

HTML5 introduces several new global attributes that can be applied to any element, expanding beyond the previously restricted set like id, class, and style. The piece explains practical new attributes including contenteditable (making elements directly editable in the browser), spellcheck, hidden (semantically hiding elements rather than just hiding their display), draggable, contextmenu, and the data-* catch-all attribute for storing custom application data. Browser support for these features was still inconsistent at the time of writing, but they degrade gracefully enough to begin experimenting with immediately.

Permalink developmenttutorialcss3

net.tutsplus.com

CSS DIY Organization

This article proposes a "hybrid" CSS organization system that balances the structure of frameworks with the flexibility of ad-hoc styling, arguing that internal developer usability deserves as much attention as user-facing design. The author recommends splitting CSS into separate files (reset, forms, global, style), using ID selectors only for unique spatial properties while reserving class selectors for reusable descriptive styles, and maintaining consistent indentation and comments that mirror the HTML hierarchy. The approach treats CSS as a cascading system rather than fighting against it, accepting minor performance costs for significantly improved maintainability when revisiting code months or years later.

Permalink organizationdevelopmentcss3

webdesignledger.com

10 jQuery Plugins to Help with Web Page Layouts | Tools

This article surveys ten jQuery plugins designed to handle complex page layouts that CSS alone cannot achieve, ranging from flexible container systems and masonry-style grid arrangements to newspaper-column formatting and text-wrapping solutions. The plugins span different layout challenges: some create draggable, resizable containers (mb.containerPlus, UI.Layout), others implement multi-column layouts (Columnizer, js-columns), and a few solve specific problems like making elements equal height or wrapping text around image contours rather than bounding boxes. The selections assume jQuery as the necessary tool for designers facing layout requirements beyond standard CSS float and positioning capabilities.

Permalink toolsjquerycss3

Greepit

Welcome to HTML5 and CSS3 - Tools, Resources & Frameworks | Greepit

This is a curated collection of tools, libraries, and resources for working with HTML5 and CSS3, organized by category including browser compatibility testers, design generators, video players, frameworks, and practical applications. It serves as a reference guide for developers and designers looking to implement modern web standards while maintaining cross-browser support and graceful fallbacks for older browsers. The collection emphasizes alternatives to proprietary plug-ins like Flash and includes both testing utilities and production-ready frameworks.

Permalink toolstutorialcss3

flipc.blogspot.com

The Mad Ranter: Damn IE7 and inline-block

The author documents the frustrating incompatibilities of making list menu items display horizontally across different browser versions, explaining that while the CSS `inline-block` property should solve this problem elegantly, Internet Explorer requires multiple browser-specific hacks involving `zoom:1`, `*display: inline`, and `_height` declarations to function properly. The piece serves as a practical workaround guide for developers struggling with IE6 and IE7's flawed implementation of layout properties, detailing exactly which CSS tricks target which browser versions.

Permalink designtutorialinternetcss3

Codrops

A Fresh Bottom Slide Out Menu with jQuery | Codrops

This tutorial demonstrates how to build a slide-out menu that emerges from the bottom of a container, with menu items displaying titles, descriptions, and icons that animate on hover. The implementation uses semantic HTML markup with nested spans and icon elements, CSS3 for styling with shadows and rounded corners, and jQuery to animate the link and icon positions when users interact with menu items. The key technique involves positioning elements with negative values and then animating those positions on hover to create the sliding effect.

Permalink designtutorialjquerycss3

CSS-Tricks

Grid Accordion with jQuery | CSS-Tricks

A "grid accordion" is a table layout where each column contains accordion-style content panels that expand when clicked, with the column width automatically enlarging to accommodate readable text while others shrink. The article walks through the HTML structure using semantic definition lists, CSS techniques for accessibility (positioning hidden content off-screen rather than using display:none so screen readers and jQuery animations work properly), CSS3 styling with :nth-of-type selectors, and jQuery delegation to handle click events efficiently and allow images to toggle column expansion.

Permalink designtutorialjquerycss3

www.askthecssguy.com

Showing Hyperlink Cues with CSS (Ask the CSS Guy)

This tutorial demonstrates how to use CSS attribute selectors to automatically display contextual icons next to hyperlinks based on their destination—such as PDF files, external sites, or mailto links—without requiring additional HTML classes or markup. The technique uses selectors like `a[href$='.pdf']` (ends with), `a[href^='mailto:']` (starts with), and `a[class~='popup']` (contains word) to target links and add background images with padding, and was supported in IE7, Firefox, and Safari at the time of writing.

Permalink designaccessibilitytutorialcss3

CSS-Tricks

Make an Editable/Printable HTML Invoice | CSS-Tricks

The author describes creating a lightweight, browser-based editable HTML invoice template that mimics FreshBooks' interface using simple `<textarea>` elements. The approach requires no special software beyond a web browser, can be hosted on a website for access from any computer, and preserves user edits if the page is accidentally refreshed. The solution is deliberately minimal but practical for those with basic invoicing needs who want to print or save invoices as PDFs.

Permalink businesstoolstutorialcss3

Web Designer Depot

CSS Transitions 101 | Webdesigner Depot

CSS transitions, newly introduced in CSS Level 3 as a Webkit extension, enable smooth animated changes between element states (such as hover effects) without requiring JavaScript libraries like jQuery, using just a few lines of code. The property takes four parameters—which CSS property to animate, duration, timing function, and optional delay—and can transition nearly any property with color, length, or position values, making it ideal for enhancing user experience with polished interactions like button rollovers and dropdown menus. However, since transitions only work in Webkit browsers (Safari and Chrome) at the time of writing, they should be used as progressive enhancements for design rather than relied upon for core functionality.

Permalink designtutorialcss3

Queness

12 Useful Tutorials to Style Web Forms

I cannot provide the summary you've requested because the text provided does not contain an article with a clear argument or report. Instead, it shows a comments section from a web development blog with a brief author bio and several user comments about form plugins and web development topics. Without access to the actual article content that these comments reference, I cannot summarize what the piece argues or reports.

Permalink designtutorialcss3