Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well.
I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.
I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.
I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.
After watching a recent video posted by Google Chrome Developers on YouTube, I wanted to blog about using the “srcset” attribute in the “img” tag in your HTML code to make more web developers aware of this easy-to-use/add code that will help your website. Definitely make sure to watch the video and check out the example HTML code using “srcset” in an “img” tag all down below.
Reduce image size: use srcset to automatically choose the right image (from Google Chrome Developers YouTube channel)
So to implement the “srcset” attribute into your “img” tag all you need to do is use the HTML as in the below example.
As stated in the video, the web browser will do all of the hard work as it will decide what image best fits on the website and if the web browser doesn’t support “srcset” then it will default to the image in the “src” attribute. Need more information about “srcset”? Then check out MDN’s documentation on responsive images.
After watching the above video, I came across another recent YouTube video that had a conference talk focused on modern image delivery techniques and what can be done to images to speed to up websites. I thought the presenter had some good informative points that all web developers should know about.
Fast and Beautiful Modern Image Delivery Techniques (from Coding Tech YouTube channel)
I wanted to write a quick blog post explaining in plain English what max-width and min-width mean when setting up media queries in your CSS, so here we go first with an example of media query code in your CSS.
Code examples of min-width and max-width
<style>
@media (min-width: 480px) { /*add your css in here*/ }
@media (max-width: 1280px) { /*add your css in here*/ }
</style>
Using the code example above, “min-width: 480px”, means that when your web browser’s viewport width is equal to or more than 480px, then the web browser will apply the CSS in the brackets that follow.
Again, using the code example above, “max-width: 1280px”, means that when your web browser’s viewport width is equal to or lesser than 1280px, then the web browser will apply the CSS in the brackets that follow.
I wanted to share these cool quick tips that HTML5 provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5.
Placeholder attribute
You can now easily have “placeholder” text display inside a text field, whereas before you had to use Javascript to add text inside a text field before the user enters their own text.
Code
Input Type: Date
You can have a date field where users can select a date from a visual calendar that appears and you don’t have to code the calendar.
Code
Input Type: Time
You can have a time field where users can select a time.
Code
To see more HTML input types that are supported with web browsers that support HTML5, check out w3schools.com.
I was working on an older site this past week and an issue came up where the IE10 web browser was showing different spacing compared to the Google Chrome web browser. My initial thoughts were to use CSS conditional comments to make a specific class have different padding for IE web browsers.
Well I didn’t know that Microsoft deprecated conditional comments for IE10 and above, so I did some searching online and found a blog post, “Targeting IE10 & IE11 Browsers with CSS” on paper-leaf.com, that gave me the solution I needed.
So if you use the below code inside a “style” tag and add your CSS specifically for IE10+ in there, it will solve this problem I ran into.
In a project I was working on, I needed to show the five latest items in an RSS feed as HTML on an ASP website. I found an ASP script online (sorry I cannot find the URL where I found it at this time) and I modified it for my needs. Here’s the ASP code I used to pull the RSS feed and show it in an HTML list:
So you have a form on your web site and you want to add a way for a user to select all checkboxes for one of your questions in the form. Here’s an easy way to do just that using jQuery. Use the Javascript and HTML code below.
HTML and Javascript code with the function that will make this work:
Remember that the checkbox’s “class” have to all be the same for those checkboxes that you want to check with the function. In this example the class is “checkboxClass”.
