I've always been curious about how people create customized list marker items, the bullets or numbers that appear in lists for webpages. Firefox shipped an easier way to customize these lists using ::markerhttps://developer.mozilla.org/en-US/docs/Web/CSS/::marker pseudo-elements. The following example replaces all the markers for an unordered list with ✅. It also changes the text of the default markers so that if the emoji cannot be displayed for some reason, the default markers will be customized without the emoji. We add a second selector for the li element without the marker so we can introduce space between the marker and the content to...
> This post assumes you're working on a modern browser that supports @supports and the target features you want to use. This is not always a safe assumption to make. CSS Conditional Rules Module Level 3https://drafts.csswg.org/css-conditional-3/ defines CSS Feature Queries and the @supports rule that allows developers to code defensively and only use a feature if it's supported in browsers and provide fallbacks when it's not. For example, if we wanted to have different layouts for browsers that support grid and those that don't we can do something like this: css @supports display: grid { .container { display: grid; }...
Web Workers workers for short are a way to create multi-threaded applications in Javascript and get around the language's single-threaded application model. According to Surmahttps://dassur.ma/things/when-workers/: > Web Workershttps://developer.mozilla.org/en-US/docs/Web/API/Worker, also called “Dedicated Workers”, are JavaScript’s take on threads. JavaScript engines have been built with the assumption that there is a single thread, and consequently, there is no concurrent access JavaScript object memory, which absolves the need for any synchronization mechanism. If regular threads with their shared memory model got added to JavaScript it would be disastrous, to say the least. Instead, we have been given Web Workershttps://developer.mozilla.org/en-US/docs/Web/API/Worker, which are an entire...
A web bundle, formally known as a Bundled HTTP Exchangeshttps://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html is a set of resources packaged together for distribution with a .wbn extension and application/webbundle mime type. The bundle contains multiple resources that make up your website. These range from HTML, CSS and Javascript to svg, audio and other elements necessary to make your site or applicatioon work. Bundles don't depend on users accessing the site or app once before it will work offlline. The bundle contains everything necessary for the site or application to run offline. Bundles retain the interactivity of the original site because it allows Javascript to...
display: flow-root > The post talks about elements of a W3C candidate recommendation, CSS Display Module Level 3https://drafts.csswg.org/css-display/valdef-display-flow-root. It's possible but highly unlikely, that things will change before the recommendation is finalized. Most developers myself included will be familiar with some values for the display property: - block - inline - inline-block - grid - flex And we use these in most of our everyday design, dating to the "age of floats" design philosophy. To see the full list check out the MDN article on the display propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/display. Using flow-root. The end of clearfix? Rachel Andrew's The end of the...
One thing hidden somewhere in the CSS specifications is the fact that you can use four or eight digits to represent a hexadecimal color, three or six to represent the color and one or two to represent the alpha transparency. For clarity's sake, the post will only cover the eight-digit version. What is this? If you're familiar with the RGB/RGBA color space in CSS you will see two different types of color, one solid color and one with some level of transparency. RGB colors use values from 0 to 255 or 1 to 100% to represent color and values from...
As I was working on a side project, the same one where I was using buttons I saw examples using display: inline-block used in the button styles. Why should I use inline-block instead of inline styles? What difference does it make? Difference between inline-block and inline display: inline-block respect top and bottom margins & paddings. display: inline, doesn't. In the example below, we use both inline and inline-block elements in the same paragraph to illustrate the process. html Cheese and wine ricotta danish fontina. Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio. Bavarian bergkase emmental fromage...
I was working on a side project where I have a series of buttons but when I tried to style them the CSS did nothing. In doing research, I discovered several things you can do and that I wasn't doing and things that I was doing wrong. I'm working with SCSS/SASS because it's easier for me to nest rules and figure out associations between elements. It will be converted to CSS at build time. Quick Reset The example I'll use in the rest of the post uses a reset. This could be used in addition to normalize.csshttps://necolas.github.io/normalize.css/ or Eric Meyer's...
Shapes allow you to wrap text around parts of an image or a predefined shape. Using these shapes we can change the way text looks on the screen Shape without image In its most simple way, we can wrap text around an invisible shape defined as we would a clip-path. The HTML defines an empty div element that will hold the shape we define in CSS. html Dark, lungo, café au lait in latte fair trade blue mountain strong, redeye sugar seasonal café au lait Turkish. Black mug variety, cappuccino, single-shot body sit grounds coffee whipped Turkish et, skinny, doppio...
Both Clipping and masking hide some parts of the elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences. clip-path and CSS The clip-path CSS property allows you to specify a specific region of an element to display, instead of the complete area. There used to be a clip property, but it has been deprecated. The common HTML for clipping with CSS This is the markup we'll use for the examples below. html Box 1...
