When I try to style the Link component, it does not work:
Link {
padding: 0 30px;
}
But it does work when I use inline styling
<Link style={{padding: '0 30px'}} to="/invoices">Invoices</Link>
I use import './App.css' and styling normal elements like div does work.
Link is a react component, which by default isn't directly read/defined in native css styling.
Saying that means only one thing, Links are just anchor tags, and thus you can style/modify them in the css styling sheet using a.
To style all links available on the page (general styling) just add a { general styles..} on top of your sheet.
And then to style each one on their own, make sure its wrapped in a div with a className, and in your styles do it this way:
.divClassNameYouChose a { custom styles... }
Provide className as a prop to Link
.link-styles {
padding: 0 30px;
}
<Link className={"link-styles"} to="/invoices">
Invoices
</Link>
There are many ways you can do this:
Using id in the component
<Link id="link_Styles" to="/invoices">
Invoices
</Link>
And css is like
#link_Styles {
padding: 0 30px;
}
Using bootstrap inbuilt classes like
<Link className="px-4" to="/invoices"> //px-4 means 24px (1.5rem)
Invoices
</Link>
Using tailwindCSS classes
<Link className="px-7" to="/invoices"> //px-7 means 28px (1.75rem)
Invoices
</Link>
But for approach 2 & 3, you have to embed their CDN links respectively.
Using className like done by #Amila in first answer
Material icons are easy to use and usually look great. However I now need to size them down:
<div class="status-icon">
<mat-icon>
remove_circle_outline
</mat-icon>
</div>
.status-icon {
.material-icons {
font-size: 16px !important;
}
}
Well, it works, but the result looks a bit fuzzy. The lines are far from beeing sharp.
So I downloaded the original SVG and added it directly:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
And it looks perfectly. No matter how small or big the SVG is scaled it looks great.
I thought MatIcon is using SVGs as well. If not, what image format is it using? And is there an easy way to tell MatIcon to use the SVG format?
Angular material icons are using font icons, so while they are scalable, they can still have aliasing issues as you are probably seeing.
The SVGs are not built into the standard mat-icon, but you can register your own svg icons and use them the same way.
Once registered, you would render an svg icon like this:
<mat-icon svgIcon="thumbs-up"></mat-icon>
TS:
import {Component} from '#angular/core';
import {DomSanitizer} from '#angular/platform-browser';
import {MatIconRegistry} from '#angular/material/icon';
/**
* #title SVG icons
*/
#Component({
selector: 'icon-svg-example',
templateUrl: 'icon-svg-example.html',
})
export class IconSvgExample {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
}
}
https://material.angular.io/components/icon/overview
I'm trying to build a design system where users can click on various SVGs and have them set as the background of their page. They need to be able to change the colour of the SVGs so I thought I would have them as components like so:
<template>
<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 80 80' width='80' height='80'>
<g fill='#9C92AC' fill-opacity='0.4'>
<path d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'></path>
<path d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'></path>
</g>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'black'
}
}
}
</script>
<style>
</style>
But I need to set this component as the background image of another div (the page). How could I do this? So far I tried this to no avail:
.test{
background-image:url('~/components/svg/1.vue')
}
I'm not confident that would work as I don't think Vue components can be set as backgrounds right? Any help much appreciated!
Thanks,
Isaac
I have seen that it is a performance hit to do something like:
a[rel^=ext] {
Which makes sense. But I have also found a bit of code in a template I used that does this for each section on the site:
#print {
#section-name {
color: #000;
background: #fff;
}
}
I figured I could just use [^] to select them all and making one rule and saving lines of code. Then I found out that would be a performance hit.
So I checked and discovered that there is an outer div with an id. So then I thought I could do #idName section.
But that uses an element, so again would probably be a performance hit I assume.
Does anyone have any information where I can find out more about performance and which way would be the quickest. e.g. is the performance hit on a bigger file worse or the computation of many selectors worse?
As a further part, I find this sort of thing very interesting, does anyone have a good, reliable way to test these things? Using online services gives a different result each time, so would require thousands of goes to make good numbers. Does anyone know a good way to undertake these actions?
Per Eoin's request, I'm making an answer for future visitors (as I think this is useful).
From this link: https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/
The following snippet runs on 50,000 nodes. The console output will give you an answer on performance for specific selectors.
const createFragment = html =>
document.createRange().createContextualFragment(html);
const btn = document.querySelector(".btn");
const container = document.querySelector(".box-container");
const count = 50000;
const selectors = [
"div",
".box",
".box > .title",
".box .title",
".box ~ .box",
".box + .box",
".box:last-of-type",
".box:nth-of-type(2n - 1)",
".box:not(:last-of-type)",
".box:not(:empty):last-of-type .title",
".box:nth-last-child(n+6) ~ div",
];
let domString = "";
const box = count => `
<div class="box">
<div class="title">${count}</div>
</div>`;
btn.addEventListener("click", () => {
console.log('-----\n');
selectors.forEach(selector => {
console.time(selector);
document.querySelectorAll(selector);
console.timeEnd(selector);
});
});
for (let i = 0; i < count; i++) {
domString += box(i + 1);
}
container.append(createFragment(domString));
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
.btn {
background: #000;
display: block;
appearance: none;
margin: 20px auto;
color: #FFF;
font-size: 24px;
border: none;
border-radius: 5px;
padding: 10px 20px;
}
.box-container {
background: #E0E0E0;
display: flex;
flex-wrap: wrap;
}
.box {
background: #FFF;
padding: 10px;
width: 25%
}
<button class="btn">Measure</button>
<div class="box-container"></div>
From the sitepoint link as well, here is some more data with information to back it up:
The test was bumped up a bit, to 50000 elements, and you can test it out yourself. I did an average of 10 runs on my 2014 MacBook Pro, and what I got was the following:
Selector : Query Time (ms)
div : 4.8740
.box : 3.625
.box > .title : 4.4587
.box .title : 4.5161
.box ~ .box : 4.7082
.box + .box : 4.6611
.box:last-of-type : 3.944
.box:nth-of-type(2n - 1) : 16.8491
.box:not(:last-of-type) : 5.8947
.box:not(:empty):last-of-type .title : 8.0202
.box:nth-last-child(n+6) ~ div : 20.8710
The results will of course vary depending on whether you use querySelector or querySelectorAll, and the number of matching nodes on the page, but querySelectorAll comes closer to the real use case of CSS, which is targeting all matching elements.
Even in such an extreme case, with 50000 elements to match, and using some really insane selectors like the last one, we find that the slowest one is ~20ms, while the fastest is the simple class at ~3.5ms. Not really that much of a difference. In a realistic, more “tame” DOM, with around 1000–5000 nodes, you can expect those results to drop by a factor of 10, bringing them to sub-millisecond parsing speeds.
The takeaway from all this:
What we can see from this test is that it’s not really worth it to worry over CSS selector performance. Just don’t overdo it with pseudo selectors and really long selectors.
Another test here: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ covered data-attribute and regex selectors. It found:
Data attribute
Data attribute (qualified)
Data attribute (unqualified but with value)
Data attribute (qualified with value)
Multiple data attributes (qualified with values)
Solo pseudo selector (e.g. :after)
Combined classes (e.g. class1.class2)
Multiple classes
Multiple classes with child selector
Partial attribute matching (e.g. [class^=“wrap”])
nth-child selector
nth-child selector followed by another nth-child selector
Insanity selection (all selections qualified, every class used e.g.
div.wrapper > div.tagDiv > div.tagDiv.layer2 > ul.tagUL >
li.tagLi > b.tagB > a.TagA.link)
Slight insanity selection (e.g. .tagLi .tagB a.TagA.link)
Universal selector
Element single
Element double
Element treble
Element treble with pseudo
Single class
Here are the results. You should note they are from 2014 browsers. All times in milliseconds:
Test Chrome 34 Firefox 29 Opera 19 IE9 Android 4
1 56.8 125.4 63.6 152.6 1455.2
2 55.4 128.4 61.4 141 1404.6
3 55 125.6 61.8 152.4 1363.4
4 54.8 129 63.2 147.4 1421.2
5 55.4 124.4 63.2 147.4 1411.2
6 60.6 138 58.4 162 1500.4
7 51.2 126.6 56.8 147.8 1453.8
8 48.8 127.4 56.2 150.2 1398.8
9 48.8 127.4 55.8 154.6 1348.4
10 52.2 129.4 58 172 1420.2
11 49 127.4 56.6 148.4 1352
12 50.6 127.2 58.4 146.2 1377.6
13 64.6 129.2 72.4 152.8 1461.2
14 50.2 129.8 54.8 154.6 1381.2
15 50 126.2 56.8 154.8 1351.6
16 49.2 127.6 56 149.2 1379.2
17 50.4 132.4 55 157.6 1386
18 49.2 128.8 58.6 154.2 1380.6
19 48.6 132.4 54.8 148.4 1349.6
20 50.4 128 55 149.8 1393.8
Biggest Diff.
16 13.6 17.6 31 152
Slowest
13 6 13 10 6
As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible.
I just added the following to my base stylesheet :
*:before, *:after {
content: '';
}
...so I don't have to declare it anymore further.
Apart from the fact the * selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags instead), is this going to really slow things down ? I don't notice anything visually on my current project, but I'd like to be sure this is safe to use before I stick it definitely into my base stylesheet I'm going to use for every project...
Has anyone tested this deeply ? What do you have to say about it ?
(BTW, I do know the correct CSS3 syntax uses double semicolons (::before, ::after) as these are pseudoelements and not pseudoclasses.)
So I ran some tests based on #SWilk's advice. Here's how I did it :
1) Set up a basic HTML page with an empty <style> tag in the <head> and the simple example he provided in a <script> tag at the bottom of the <body> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Performance test</title>
<style>
/**/
</style>
</head>
<body onload="onLoad()">
<div class="container"></div>
<script>
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
</script>
</body>
</html>
2) Fill up the div.container with loaaads of HTML. In my case, I went to html-ipsum.com (no advertising intended), copied each sample, minified it all together, and duplicated it a bunch of times. My final HTML file was 1.70 MB, and the div.container had 33264 descendants (direct or not ; I found out by calling console.log(document.querySelectorAll('.container *').length);).
3) I ran this page 10 times in the latest Firefox and Chrome, each time with an empty cache.
Here are the results without the dreaded CSS ruleset (in ms) :
Firefox :
1785
1503
1435
1551
1526
1429
1754
1526
2009
1486
Average : 1600
Chrome :
1102
1046
1073
1028
1038
1026
1011
1016
1035
985
Average : 1036
(If you're wondering why there's such a difference between those two, I have much more extensions on Firefox. I let them on because I thought it would be interesting to diversify the testing environments even more.)
4) Add the CSS we want to test in the empty <style> tag :
html:before, html:after,
body:before, body:after,
div:before, div:after,
p:before, p:after,
ul:before, ul:after,
li:before, li:after,
h1:before, div:after,
strong:before, strong:after,
em:before, em:after,
code:before, code:after,
h2:before, div:after,
ol:before, ol:after,
blockquote:before, blockquote:after,
h3:before, div:after,
pre:before, pre:after,
form:before, form:after,
label:before, label:after,
input:before, input:after,
table:before, table:after,
thead:before, thead:after,
tbody:before, tbody:after,
tr:before, tr:after,
th:before, th:after,
td:before, td:after,
dl:before, dl:after,
dt:before, dt:after,
dd:before, dd:after,
nav:before, nav:after {
content: '';
}
...and start again. Here I'm specifying every tag used in the page, instead of * (since it is counter-performant in itself, and we want to monitor the pseudo-element triggering only).
So, here are the results with all pseudo-elements triggered (still in ms) :
Firefox :
1608
1885
1882
2035
2046
1987
2049
2376
1959
2160
Average : 1999
Chrome :
1517
1594
1582
1556
1548
1545
1553
1525
1542
1537
Average : 1550
According to these numbers, we can conclude the page load is indeed slower (of about 400-500 ms) when declaring content: '' on every pseudo-element.
Now, the remaining question now is : is the extra load time we can see here significative, given the relatively big test page that was used ? I guess it depends on the size of the website/project, but I'll let more web-performance-knowledgeable people give their opinion here, if they want to.
If you run your own tests, feel free to post your conclusions here as well, as I'm very interested in reading them - and I think I won't be the only one.
My answer is: I don't know, but one can test that.
Read about Navigation Timing and check out this example page
The most simple example of usage:
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
So, go generate a few MB of html full of random tags, and test.