Rick Strahl's Weblog
Wind, waves, code and everything in between...
Ad-free experience sponsored by:
- The Markdown Editor for Windows
WebLog Posts in Category HTML5
January, 2022 (1)
December, 2021 (1)
November, 2021 (3)
October, 2021 (1)
September, 2021 (1)
August, 2021 (2)
July, 2021 (2)
June, 2021 (2)
May, 2021 (3)
April, 2021 (1)
March, 2021 (2)
February, 2021 (1)
January, 2021 (3)
ASP.NET Core (55)
Visual Studio (53)
.NET Core (19)
Web Services (19)
Web Api (16)
Sql Server (10)
Microsoft AJAX (8)
West Wind Ajax Toolkit (7)
Web Connection (7)
Entity Framework (6)
Internet Explorer (6)
Html Help Builder (5)
Markdown Monster (5)
Live Writer (5)
Software Development (5)
Source Control (4)
Help Builder (3)
Web Browser Control (3)
Visual Studio Code (2)
ASP.NET vNext (2)
.NET Standard (2)
Visual Studio (1)
ASP.NET Markdown (1)
Control Development (1)
Credit Card Processing (1)
Dynamic Types (1)
VS Code (1)
WebView2 WPF (1)
Web Deployment Projects (1)
Web Design (1)
Web Development (1)
Web Assembly (1)
Handling HTML5 Client Route Fallbacks in ASP.NET Core
August 07, 2017 - Hood River, OR
HTML5 client routes work great on the client, but when deep linking into a site or pressing refresh in the browser, HTML5 client side routes have a nasty habit of turning into server HTTP requests. Requests to routes that the server is likely not configured for. In this post I look at why HTML5 client routes require server cooperation to handle and how to set them up on IIS and/or ASP.NET Core.
Code Magazine Article: Flexing your HTML Layout Muscles with Flexbox
March 03, 2016 - Maui, HI
Flexbox is a relatively new CSS based technology that makes it much easier to create structured layouts with HTML and CSS. Based on a containership hierarchy, Flexbox combines the structured features of tables with the free form layout capabilities of arbitrary HTML elements that make it possible to create complex , yet flexible HTML designs much more easily that was otherwise possible. My article in CoDe Magazine describes the reasons for Flexbox, the basics of operation and few practical examples you can use today to put flexbox to use.
Flexbox Containers, PRE tags and managing Overflow
February 15, 2016 - Maui, HI
I ran into nasty problem with PRE tag overflow behavior, which caused content of PRE tags to not respect the boundaries of the container even when overflow rules were set. It turns out the problem was due to Flexbox and the min-width setting that is set differently than standard DOM Block mode rendering.
FontAwesome Fonts and Mime Types in IIS and other Web Servers
January 25, 2016 - Maui, HI
When using Font-Awesome on IIS (and other Web Servers) you might find that the server is not serving the .WOFF2 or .WOFF file that is requested by Chrome for the FontAwesome font files. Although Fontawesome works fine regardless, you'll want to address the 404 error by serving the preferred file. Here's how.
Styling all Text Elements with the CSS :not Filter
January 19, 2016 - Maui, HI
HTML5 has a proliferation of INPUT types and when you need to style these types in an application the list can get quite long. You can cut down on the size of the list and simplify remembering which INPUT types you don't want styled as text, by using the CSS :not() selector. This post shows how.
jQuery-resizable and Table Column Resizing
January 04, 2016 - Maui, HI
Last week I posted about a small jquery-resizable plug-in I'd built. Many questions came in about how to handle table column resizing using this plug-in and in this post I demonstrate how with a little extra work, you can also create resizable table columns using the jquery-resizable plugin.
A small jQuery Resizable Plug-in
December 21, 2015 - Maui, HI
I recently had a need for a simple resize component and couldn't find a lightweight implementation. I ended up creating a small jquery-resizable plug-in. In this post I discuss a few use cases for resizables and show the jquery-resizable plug-in, how it works and how it's implemented.
July 18, 2015 - Hood River, OR
Turn off HTML Input Auto Fixups for Mobile Devices
June 15, 2015 - Hood River, OR
You ever run into a Web site that messes with your user input when you don't want it to while using your phone? You know, capitalize the first letter when you're trying to enter a username, or email address, or auto-correct text while typing a part number. As a mobile Web developer it's easy to forget about these automatic behaviors, when you don't want them as auto correction and fixup is the default behavior. To provide the best user experience sometimes we need to be agressive about turning enhancement functionality off. In this post I talk about auto-fixup behaviors for mobile browsers and how to turn them off in your applications. Your users will thank you for paying attention to this small detail.
IPad Scroll Issues with Fixed Content
June 05, 2015 - Hood River, OR
Ran into some issues with fixed headers again in one of my mobile applications where on an iPad it appeared the content wouldn't scroll properly. I've run into this issue a few times and it turns out it's related to positional layout and specifically problematic on iPad Safari browsers. In this post I'll discuss the problem and the relatively simple workarounds.
Using FontAwesome Fonts for HTML Radio Buttons and Checkboxes
February 26, 2015 - Maui, HI
Spruce up your boring checkboxes and radio buttons with custom FontAwesome symbols using a little bit of CSS. If you're tired of boring checkboxes and radio buttons, or you simply want a more consistent look of these controls across browsers and controls check out FontAwesome to provide you with customizable checks and boxes to use for selection boxes. In this post I'll show how to use pure CSS to set up FontAwesome checkboxes and radios and talk about a few gotchas I ran into along the way.
A jquery-watch Plug-in for watching CSS styles and Attributes
October 20, 2014 - Hood River, OR
A few years back I wrote about a jquery-watch plugin I wrote that can monitor CSS property and Attribute changes and let you get notified if one of the monitored properties are changed. Unfortunately the plugin broke a while back as browser and jQuery dropped some older APIs. In this post I describe an update to the jquery-watch plugin using the newer and more widely supported MutationObserver API that brings high performance DOM node monitoring.
The broken Promise of the Mobile Web
August 18, 2014 - Hood River, OR
The Mobile Web has come a long way to provide the abillity to create rich UI and interactive, immersive and smooth Web based mobile applications. But there are still big gaps between mobile device features and what's available to Web developers when interacting with mobile devices. In this post I cover and contrast what's wrong with mobile Web development today and where I hope we are going, going forward.
Filtering List Data with a jQuery-searchFilter Plugin
May 12, 2014 - Hood River, OR
When dealing with HTML based list data, filtering that data based on search text is a nice UI feature that's very useful for quickly finding what you're looking for. In this post I show you how to can create this nice UI effect with a few lines of jQuery code, and then provide a jQuery plug-in that simplifies the process further.
Using CSS Transitions to SlideUp and SlideDown
February 22, 2014 - Maui, HI
CSS Transitions are a nice way to replace jQuery animations with smoother counterparts. Some transitions however, like height and width transitions can be tricky to handle with pure CSS code due to container sizing issues. In this post I show how create create transitions to mimic most of jQuery's slideUp() and slideDown() functions using CSS and small jQuery plug-in.
Modern/Metro Internet Explorer: What were they thinking???
November 04, 2013 - Maui, HI
The 'Modern' version of Internet Explorer in Windows 8/8.1 is a full screen version Internet Explorer with a custom shell around it. This version of IE has a couple of pretty annoying quirks that affect Web pages significantly.
Prefilling an SMS on Mobile Devices with the sms: Uri Scheme
October 09, 2013 - Maui, HI
Popping up the native SMS app from a mobile HTML Web page is a nice feature that allows you to pre-fill info into a text for sending by a user of your mobile site. The syntax is a bit tricky due to some device inconsistencies, but here's how to do it.
Using HTML 5 SessionState to save rendered Page Content
July 01, 2013 - Hood River, Oregon
SessionStorage and LocalStorage provide easy client side storage for Web applications. In this post I describe a specific scenario for caching list display data and state for a server rendered HTML application using sessionState. See how you can make a server rendered HTML application more user friendly and faster caching content on the client and redisplaying it when the user returns to a page he navigated from.
HTML5 Input type=date Formatting Issues
November 08, 2012 - Maui, Hawaii
The new HTML5 Input types make it easier to display special formatted input types like dates and email addresses. Browsers that support them display a nice UI for editing and can validate values. However, support currently is limited and date formatting especially is complex as it involves using an ISO date format that doesn't fall back nicely to non-supporting browsers.
Wishful Thinking: Why can't HTML fix Script Attacks at the Source?
April 14, 2012 - Maui, Hawaii
I'm dealing with user HTML input in a Web application today and again I curse over the complexities involved in sanitizing this html. So today I started dreaming about a possible alternative...
Using the HTML5 <input type="file" multiple="multiple"> Tag in ASP.NET
March 06, 2012 - Maui, Hawaii
HTML5 allows for multiple files to be uploaded from a single file input control. Here's how you can use it and capture files in ASP.NET.
Make your CHM Help Files show HTML5 and CSS3 content
February 15, 2012 - Maui, Hawaii
Want to get your CHM files to display content in HTML5 and CSS rather than the stock IE7 quirks more rendering used by default? This blog post describes how you can take advantage of newer HTML and CSS specs in your CHM files.
Changing the default HTML Templates to HTML5 in Visual Studio
December 23, 2011 - Maui, Hawaii
The default WebForms templates in Visual Studio still use the XHTML doctype headers by default. HTML5 doctype headers are easier to use and read and with HTML5 support now becoming mainstream and backward compatible with older browsers its time to switch those doctype headers. This post demonstrates how to change the default VS templates or create new templates altogether. With HTML becoming more prominent and the new headers being easier to read and smaller in size, it's
HTML 5 Input Types - How useful is this really going to be?
December 10, 2011 - Maui, Hawaii
The HTML 5 input controls enhancements seem like a nice feature - until you look a little closer and realize that that validation and styling these control enhancement use are likely going to interfere with your existing application logic and styling. Here are are some thoughts on the subject.