John Cox

Blogs · @wyome

Tagged css3 · everything

Impressive Webs

A JavaScript Content Switcher That Works Without JavaScript | Impressive Webs

This article explains how to build a content switcher that works without JavaScript by leveraging HTML anchor links and CSS overflow properties. The technique uses in-page anchors (#one, #two, etc.) paired with a container set to `overflow: hidden` that's sized to show only one item at a time, allowing users to navigate between content panels by clicking links that point to different anchors. The approach provides progressive enhancement—it functions as a basic switcher in all browsers without JavaScript, and can then be enhanced with JavaScript for smoother animations while maintaining the same HTML and CSS foundation.

Permalink tutorialcss3

cssglobe.com

ajaxian.com

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3 - Ajaxian

I don't have a saved article to summarize. You've shared a homepage or index page from Informa TechTarget that lists recent news articles and technology insights on topics like AI governance, data management, cybersecurity, and IT operations, but there's no specific article content provided for me to summarize. If you'd like me to summarize one of these articles, please paste the full text of the piece you saved.

Permalink tutorialcss3ajax

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

peter.sh

Vendor-prefixed CSS Property Overview « Peter Beverloo

This reference page catalogs vendor-specific CSS properties across the four major browser rendering engines (Blink, WebKit, Gecko, and Trident), providing a unified overview of prefixed implementations rather than requiring separate visits to each engine's documentation. It notes that WebKit additionally supports properties under the "-apple-" and "-khtml-" prefixes.

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