Safari: fixing text-overflow:ellipsis
1st April 2017 (update: 08-12-2017)
Is Safari displaying a tooltip containing the complete content of an overflowed area?
Articles
A mixed bag of articles published on webSemantics.
Hope you find them useful too.
Mike Foskett - (update: )
Waffle anyone?
Safari: fixing
Responsive fonts - auto-scaling the root font-size
25th September 2016 (update: 18-05-2020)
Using pure CSS the root font size scales up and down proportionately, between defined values, dependent upon the viewport width.
Removing SVG keyboard focus in IE
17th August 2016 (update: 09-05-2017)
In Internet Explorer SVGs receive keyboard focus while tabbing through HTML content. This proves somewhat disorientating to both screen-reader and keyboard-only users.
Embedding SVG cross-browser techniques
22nd June 2016 (update: 17-08-2016)
Implementing cross-browser SVG as either CSS background-images or defined symbols in HTML. Production ready implementation techniques.
Peek-a-boo v7.0 – animated show & hide
20th April 2016 (update: 10-07-2016)
A material design inspired show & hide.Very accessible, vanilla JavaScript tasty goodness no?
Accessible modal dialog popup iframe
5th April 2016 (update: 07-10-2018)
WCAG 2 level AA with ARIA support modal dialog used for a popup iframe. Google map, web page, YouTube video, and an image used as an examples.
Accessible tab navigation v5
18th March 2016 (update: 11-07-2016)
WCAG ARIA content navigation tabs which doesn't rely on libraries or frameworks.
Grid-surge header
12th March 2016 (update: 17-08-2017)
Grid-surge canvas effect applied to the header.
Late-loaded, blurred image replacement
6th March 2016 (update: 10-07-2016)
Improve perceived page load times by displaying a blurry low resolution image(s) immediately, without any extra HTTP requests. Once page has fully loaded, fetch the high resolution image(s), then cross-fade onto the display.
Detect browser supports transform3d
21st February 2016 (update: 17-08-2016)
A simple detection script to check browser support for the CSS property transform3d.
Parallax header
18th February 2016 (update: 10-07-2016)
Demonstrating a parallax effect applied to the background image.
Stylophone – Web Audio API
8th February 2016 (update: 10-07-2016)
Stylophone emulation. Sounds created in-browser via the new Web Audio API.
Raindrops keep falling
2nd February 2016 (update: 06-02-2016)
Well I don't want to rain on anyone's parade but thought it wouldn't matter if a few raindrops fell against the window.
Displaying code in a web page
25th January 2016 (update: 10-06-2020)
Embed code examples into your web page or posts. Handles JavaScript, CSS, HTML, and PHP beautifully. Minimum fuss—Maximum effect.
Animated SVG hamburger menu
11th January 2016 (update: 09-12-2019)
Breakdown and build of a typical hamburger menu complete with animations using CSS.
Expanding HTML code blocks
9th January 2016 (update: 10-07-2016)
Adds an expand button to the code examples found in <pre><code> blocks, allowing more content to display horizontally.
Deprecated in favour of CSS resize:horizontal property
Web Audio API example
29th November 2015 (update: 10-07-2016)
AJAX loaded sounds which play via the new Web Audio API.
Far more efficient than the HTML5 audio element.
Sticky header navigation
21st November 2015 (update: 10-07-2016)
A sticky(ish) navigation header which is animated off-screen while scrolling down, reappearing on scrolling up, maximising the vertical display space on smaller screens.
Snowflakes animation in pure CSS
15th November 2015 (update: 20-12-2019)
The drifting snowfall animation as used on the Tesco homepage for Christmas 2015.
Peek-a-boo – animated show & hide
26th July 2015 (update: 10-07-2016)
A material design inspired show & hide.
Very accessible, vanilla JavaScript tasty goodness no?
Shiny buttons
28th May 2015 (update: 10-07-2016)
Affordance is when the appearance of an object describes it's purpose. Buttons are a great example, they should look like they're press-able.
Idle-load – Lazy loading content
17th May 2015 (update: 12-09-2018)
Need to improve page load performance?
Make the Kessel run in less than 12 parsecs?
This new lightweight method may be the one you're looking for.
Redirect scripts
19th May 2009 (update: 10-07-2016)
Web page 301 redirect scripts in HTML, JavaScript, PHP, ASP and ASP.net
HTML symbols & character codes
10th June 2002 (update: 26-06-2017)
Symbols include: currency codes, fraction symbols, equivalance characters, accents, arrows, ligatures and other less common symbols.
Stated as both numeric and symbolic references with click-to-copy feature.
Social links and email client: