- This topic is empty.
-
AuthorPosts
-
February 22, 2013 at 12:41 pm #42443KeithPickeringMember
Tell me something: how often do you actually use the ‘content’ property to add content, versus how often you use pseudo-elements purely for aesthetic purposes?
I’ve been thinking that this would be a good addition to most CSS resets. This way you would only need to declare a value for “content” if you actually…well, _need_ to.
*:before, *:after {
content: ‘ ‘;
}Any thoughts?
February 22, 2013 at 2:10 pm #123189Paulie_DMember[*] actually takes up a lot of resources when the document is loaded
You’d have to type
foo:before
anyway…so another dozen characters is such a big deal.
In any case, I don’t use pseudo elements to add content…that’s what HTML is for.
February 22, 2013 at 2:19 pm #123128Andy HowellsParticipantI use before/after from time to time to add custom characters to elements. Usually it will be on a list-item, for example a check mark like below;
li:before { content: “✔ “; }
90% of the time I’m using before/after to do stlying that requires a fake element. and thus have empty “content”. However as @paulie_D said, don’t use the universal selector, that way madness lies.
February 22, 2013 at 2:22 pm #123130Paulie_DMemberIn the format that @AndyHowells has given it’s effectively ‘styling’ rather than adding content. and that’s more than acceptable.
February 22, 2013 at 3:35 pm #121877KeithPickeringMemberI mostly use :before and :after for icon fonts or more complex styling. But it can also be used to add content that isn’t really important to the meaning of the document. For example, at a certain screen size, I have the date format change. I use an :after element to add a comma after the “day” span. Doing this without pseudo elements would be stupidly complex.
Anyway, the * selector may take up some resources, but I already use it to declare box-sizing: border-box on everything. And reset the margins and padding. I’m not too concerned over a few milliseconds of extra rendering time.
February 22, 2013 at 3:39 pm #121829Andy HowellsParticipantYou should be concerned, say we have 100 elements on the page.
Using the universal select for box-sizing isn’t creating anything, it’s just adjusting the properties of all elements. So for example, adjusting 100 elements on a page.
By applying before/after universally you’re effectively adding another 200 elements (all be them pseudo) to the page.
February 22, 2013 at 4:53 pm #121289KeithPickeringMemberAh, that makes sense.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.