Latest News

There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.

Here’s an example:

.email::before {
content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

The property generally takes anything you drop in there. However, there are some invalid values it won’t accept. I heard from someone recently who was confused by this, so …

The post Valid CSS Content appeared first on CSS-Tricks.

We’ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I’m not sure as many people know about it as they should.

TL;DR: XCode comes with a “Simulator” program you can pop open to test in virtual iOS devices. If you then open Safari’s Develop/Debug menu, you can use its DevTools to inspect right there — also true if you plug in your real iOS device.

Direct Link to Article…

The post Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad) appeared first on CSS-Tricks.

(This is a sponsored post.)

​Pendo is a product cloud that helps create lovable products that customers can’t live without. Pendo enables product teams to understand product usage, collect user feedback, measure NPS, assist users in their apps and promote new features in product — all without requiring any engineering resources. This unique combination of capabilities is all built on a common infrastructure of product data and results in better onboarding, increased user engagement, improved customer satisfaction, reduced churn, …

The post Deliver exceptional customer experiences in your product appeared first on CSS-Tricks.

Chris Manning digs into <diaglog>:

A dialog element provides:

• An element that is easy to show and hide, including an open boolean attribute on the element itself.
• Two versions: a standard popover or modal version.
• A ::backdrop pseudo-element for modal types.
• Built-in focus: see dialog focusing steps.
• ARIA role support (dialog is the implied default). Also accepts the alertdialog role.
• A pending stack for multiple dialogs.
• A DOM interface with the open boolean and methods show,

…

The post The dialog element appeared first on CSS-Tricks.