Blog

The declaration is classified as significant by a ! (exclamation mark) delimiter and the important keyword. The !important flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.

If you need a certain CSS property to take precedence over all other CSS rules setting the same CSS property for the same HTML elements, you can add flag !important after the CSS property when you declare it. The !important flag has the highest precedence of all precedence factors.

Because the !important flag has unintended consequences that interfere with one of the fundamental principles of CSS, specificity, using it frequently is considered a bad practice. To avoid using !important, all you need to do is increase specificity. Example:

td {
  height: 10px !important;
}

/* This has higher precedence */

table td {
 height: 20px !important;
}

The browser loads all the files necessary for the page to render the site as you expect. This implies that all items, including those images that aren’t visible and haven’t got the lazy loading technique, will be requested. If all of your images are attempting to load at the same time this can cause loading performance issues:

• The event onload attached to the window the global object will be called with a long delay because of waiting to load all dependent resources such as stylesheets and images.
• Browsers limit the number of HTTP connections with the same domain name (usually between 2 and 8) at the same time. Opening too many HTTP requests for images slows down loading them.
• More bandwidth will be required from the website visitors to see your page.

If your website uses quite a lot of images then this may impact the page loading speed as well as the page rendering. Faster loading website means:

• Better user experience.
• Improving rankings on search engines since site speed is a ranking factor.
• Potentially reducing the hosting cost, if you pay-as-you-go for the transfer data.

Let’s then explore possibilities of images speed loading.

Digital accessibility refers to providing web-based information, digital content, applications, and resources that are available and used by everyonekb, including people with disabilities or impairments. Accessible online content provides an equal experience, including those with visual, auditory, physical, speech, cognitive, and neurological disabilities or impairments. Accessibility does not refer to only people with disabilities, but to everyone.

Making a website accessible can be simple or complex, depending on many factors such as the type of content, the size, technology, and complexity of the site, and the development tools and environment.

What are the three states of checkbox?

<input /> elements of type checkbox represents a state or option that can be toggled. A well known states are called checked and unchecked. However, in addition to the checked and unchecked states, there is a third state of a checkbox: indeterminate. In most cases, it is represented by a horizontal line in the box instead of a check/tick.

What <select> HTML element is?

The <select> HTML element represents a control that provides a menu of options. When used with an attribute multiple then it allows selecting multiple options at once. However, the current implementation for multiple selections is not optimal on a desktop device so we need to find a different way. The goal would be to build multiple selections that are accessible to everyone.

Note that <select> HTML element used with an attribute multiple on the mobile works quite conveniently, at least what’s implemented in Chrome and Firefox browsers. You can test it on the following example code.

Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Using lazy-loading we achieve the following benefits over the traditional embedding in HTML:

1. Loading speed – with lazy-loading, the page is loaded faster because only images that are visible on the screen are being loaded.
2. Rendering performance – less loading images reduces the time for page rendering.

That sounds good. However, while images can be lazy-loaded today then images loaded through CSS can’t. That doesn’t sound like we should give up at this point.

Before everything

Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective, but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.

Based on our experience let’s look into 4 simple things you can do in order to increase your site loading performance.

The HTMLElement.focus() method sets focus on the specified element. The focused element will receive a keyboard and similar events by default. However, sometimes you would like to prevent scrolling the document to bring the newly-focused element into view. This could be useful when you want to check if the element is capable to receive focus.

Here is a simple example. Note: open the developer console to see which element got a focus state after activating each action. See a live example of how to set the focus and prevent from scrolling.

Keeping a website or application at a high-quality level is a challenge. No matter what type of business you own, you will need software that is fully accessible, usable, and without issues, as it has a high impact on the way customers reach out to you and buy your products or services.

The common model today is to run the crawler on the server-side, crawl the site and then analyze the content. SiteLint Audits works in a next-generation model – all audits are running on your site when visitors arrive on your site. This gives more precise results because audits are running on the user environment. What’s working on one configuration of Device/OS/Browser doesn’t have to work on the other configuration. Hence running audits on the client-side brings better results of testing across all combinations of Device/OS/Browser.