Valid CSS Content

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


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:
<div
data-done=”✅”
class=”email”>
[email protected]
</div>
.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 I had a little play with it myself and learned a few things.

This works fine:
/* Valid */
::after {
content: “1”;
}
…but this does not:
/* Invalid, not a string */
::after {
content: 1;
}
I’m not entirely sure why, but I imagine it’s because 1 is a unit-less number (i.e. 1 vs. 1px) and not a string. You can’t trick it either! I tried to be clever like this:
/* Invalid, no tricks */
::after {
content: “” 1;
}
You can output numbers from attributes though, as you might suspect:
<div data-price=”4″>Coffee</div>
/* This “works” */
div::after {
content: ” $” attr(data-price);
}
But of course, you’d never use generated content for important information like a price, right?! (Please don’t. It’s not very accessible, nor is the text selectable.)
Even though you can get and display that number, it’s just a string. You can’t really do anything with it.
<div data-price=”4″ data-sale-modifier=”0.9″>Coffee</div>
/* Not gonna happen */
div::after {
content: ” $”
calc(attr(data-price) * attr(data-sale-modifier));
}
You can’t use numbers, period:
/* Nope */
::after {
content: calc(2 + 2);
}
Heads up! Don’t try concatenating strings like you might in PHP or JavaScript:
/* These will break */
::after {
content: “1” . “2” . “3”;
content: “1” + “2” + “3”;

/* Use spaces */
content: “1” “2” “3”;
/* Or nothing */
content: “1 2 3″;
/* The type of quote (single or double) doesn’t matter, but content not coming back from attr() does need to be quoted. */
}
There is a thing in the spec for converting attributes into the actual type rather than treating them all like strings…
<wood length=”12” />
wood {
width: attr(length em); /* or other values like “number”, “px”, or “url” */
}
…but I’m fairly sure that isn’t working anywhere yet. Plus, it doesn’t help us with pseudo elements anyway, since strings already work and numbers don’t.
The person who reached out to me over email was specifically confused why they were unable to use calc() on content. I’m not sure I can help you do math in this situation, but it’s worth knowing that pseudo elements can be counters, and those counters can do their own limited form of math. For example, here’s a counter that starts at 12 and increments by -2 for each element at that level in the DOM.
See the Pen Backwards Double Countdown by Chris Coyier (@chriscoyier) on CodePen.
The only other thing we haven’t mentioned here is that a pseudo element can be an image. For example:
p:before {
content: url(image.jpg);
}
…but it’s weirdly limited. You can’t even resize the image. ¯_(ツ)_/¯
Much more common is using an empty string for the value (content: “”;) which can do things like clear floats but also be positioned, sized and have a background of its own.
The post Valid CSS Content appeared first on CSS-Tricks.
Source: CssTricks

Posted on October 11, 2018 in css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, Gmail, javascript, PHP, The, Web Design Services

Share the Story

Back to Top