03 Research and Documentation - Can I Use

Define/Explain Can I Use

The “Can I Use” website serves as a resource to help ensure that a feature that a developer is using to build a website works with the web browsers that the majority of users to the website may be using. If a certain feature, like a CSS property, is not supported by a browser, the page may not render properly. It is important to be as certain as possible that nothing within coding will cause errors on the most common web browsers. The website, “Can I Use” helps to identify what features are fully supported, partially supported, not supported, or level of support unknown.

Specific Uses of Resource Information

  1. One use of the information on this website is for when features are partially supported. If additional information is needed to help the feature be supported by more web browsers (and web browser versions) it is listed under "support information" when hovering over the browser table on the home page.
  2. A second use of the information on this website is a way to test the current features being used by a website. The website, "Can I Use" is partnered with "BrowserStack" allows for testing on over 2000 real browsers and devices.
  3. A third use of the resource information is looking at support based on a user being a desktop user versus a mobile user. Based on the website being developed and the target population, one type of user may be more important to review than another.
  4. A fourth use of the resource information is to learn what are some upcoming newer features within the "News" section on the home page.

Properties

  1. The first property I researched was one I had demonstrated in the second research and documentation website: initial-letter. According to the information provided on "Can I Use", this feature is partially supported by most browsers. Most web browsers will support initial-letter, however may not support additional styling, such as initial-letter-align or initial-letter-wrap. Safari does not support the application of web fonts to initial-letter. And although initial-letter seems like a fairly basic CSS property to use, I found it interesting that Firefox, a commonly used web browser, does not support it at all. When I was trying to demo it myself, I found I needed to use the ::first-letter pseudoclass, and on entering this feature into "Can I Use", it is widely supported by all of the latest web browser versions tracked on the "Can I Use" website.
  2. The second property I researched was: color-scheme. Since this is a feature I would try to include on personal websites I create, I wanted to check it's support on the various web browsers tracked by the "Can I Use" website. According to the information provided on "Can I Use", this feature is supported by most web browsers and their latest versions. The web browser that does not support it is Internet Explorer. Since most users who prefer using a Microsoft browser most likely use Microsoft Edge now versus Internet Explorer, I would consider this property safe enough to use despite it not being supported by Internet Explorer. In looking up color-scheme, I discovered there is also a property called prefer-color-scheme, which is a @media rule that is also well supported by most browsers tracked by the "Can I Use" website, except for Internet Explorer again. While prefer-color-scheme still relies on the user having a default light and dark mode chosen, it seems like prefer-color scheme has more customization to it, but does not control the look of everything on a web page. According to the CSS Tricks Almanac, it may be best to use both.

Summary

In summary, I find this a very useful resource! It's interesting to keep in mind what can be used on what web browser. Depending on the target audience of a website, some older versions of web browsers may also need to be considered. When I think about a portion of our target audience for the business Garret and I have, it is very possible some of our clients that tend to have more money later in life may not be as up-to-date on the latest web technologies. We also need to keep an eye on the browsers used on mobile devices since several people utilize our QR code to view our website while visiting us at an event we are selling at. I'm still new at what are considered the latest features, and which have been around awhile. This resource will help me understand what features to use based on support instead, especially when it comes to images as the website we use for our business is mainly used to showcase our work.