Can someone explain to me the difference between using passHref and using an anchor tag when setting up links between pages in Next.js?
E.g. what is the difference between:
<Link href={`/posts/${post.id}`} passHref>
<h2>
{post.id} {post.title}
</h2>
</Link>
and
<Link href={`/posts/${post.id}`}>
<a>
{post.id} {post.title}
</a>
</Link>
I tried reading about it in the documentation but could not seem to find the answer.
From the docs:
passHref - Forces Link to send the href property to its child. Defaults to false
When using <Link> wrapping a custom component and not an anchor tag, the <Link> tag must have the passHref attribute. Without this, the tag will not have the href attribute, which hurts your site's accessibility and might affect SEO.
Source
Related
I feel like this is quite a basic question, but...how?
Googled various forms of this question and couldn't find a clear answer. I'm using NextJS and just want the user to click a button and be taken to a completely different site.
Have a link styled like a button and put in the href that you want the user to visit. Something like this if you're using tailwind:
<Link href="https://www.google.com/">
<a className="p-2 lg:px-4 mx-2 text-black text-center border border-solid border-black rounded ">Go to google</a>
</Link>
You can also add target='_blank' to the anchor if you want the URL to open in a new tab.
You can use the following code snippet. We passHref in Link to pass the href to anchor tag so that the SEO will not hurt. Use target='_blank' in the anchor tag to open the external link in the new tab.
<Link href="https://www.google.com/" passHref>
<a target='_blank' >Go to google</a>
</Link>
Just add rel="noopener" inside the anchor tag bro.
If doesn't works then try adding rel="noopener noreferrer".
<Link href="https://www.google.com/" passHref>
<a target='_blank' rel="noopener">Go to google</a>
</Link>
import Link from "next/link"; //import this
<Link href="/"> //wrap a tag with Link
<a>Home</a>
</Link>
<Link href="https://nextjs.org"> //external page
<a>Next.js</a>
</Link>
It's .NET6 razor pages project and I use VS2022.
This is in _Layout.cshtml.
<ul class="list-unstyled ml-2">
<li>
TEST
<a asp-page="TEST/Index">TEST1</a>
</li>
...
There are 2 anchor tag in nav bar but css in _Layout.cshtml.css is not applied to one with asp-page tag due to no attribute "b-l76pcumf24"
Could anyone explain why and how to make it work with asp-page tag helper?
Thanks
CSS isolation is a build time feature. Tag helper output is generated at runtime, so they cannot support the CSS isolation feature. This is by design.
Set your own href attribute, like in your first link, and don't apply any custom asp-* attributes to the anchor.
I'm making custom description in one listing on ebay.co.uk with just html/inline css. I tried to use external css link, but it's not working. Any help will be appreciated.
Inline css is working. External and Internal not working.
<link rel="stylesheet" href="https://github.com/....../css/style.css">
<p>some paragraph</p>
Please note ebay cut head and body tags, so I skipped them in the example.
You can't use a stylesheet or <style> tags, but you can use inline styles on divs.
<div style=""></div>
Is it correct to use the <style> tag outside of the <head> element ?
Like this:
<html>
<head>
<style> some style </style>
</head>
<body> some text </body>
<style> some more style </style>
<body> some more text </body>
</html>
I want to do this because: my cgi sources other files with their own style.
The cgi file contains:
#!/bin/bash
echo "content-type: text/html"
echo ""
echo "<html><head><style>"
echo "h1 {color: red;}"
echo "</style>"
echo "<body>"
echo "<h1> some text here </h1>"
echo "</body>"
source ./data.sh
echo "</html>"
And the source file contains:
echo "<style>"
echo "h2 {color: blue;}"
echo "</style>"
echo "<body>"
echo "<h2> and some other text here </h2>"
echo "</body>"
This seems to work fine. But is it correct ?
At w3schools it says:
Each HTML document can contain multiple <style> tags.
But is it done this way ?
style is supposed to be included only on the head of the document.
Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.
HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.
According to the W3 specs, <link> tags are only supposed to go in the <head> section:
References
For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK
For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element
Validation Issues
If you put a tag within the body of the HTML document, it will not validate using validate.w3.org
<style> tags can be anywhere in the HTML Document. However, it is best to have it inside the <head>.
From my personal experience, its best to just make a separate stylesheet to put all the CSS in.
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style :
"<style>-element can be included inside the <head> or <body> of the document, and the styles will still be applied, however it is recommended that you include your styles in the <head> for organizational purposes"
I think the key-phrase here is "for organizational purposes". So it's not a technical requirement but advise which purports to make your html-source more readable.
The above linked-to page is
"Last modified: Jun 4, 2019, by MDN contributors"
According to W3 standards, it is necessary to put style tag inside the head element of the document. If you put your style tag inside the body element then the style to your web page will be effected after whole DOM is loaded, due to which we can see blank page for some time before the CSS comes into effect and certainly that would cause impact on better UI experience. Mostly the recommended way to implement CSS in a document is to create a saperate stylesheet and providing link to the document wherever needed.
It really depends on the website and how it loads. CSS files which are loaded in the header block your website from rendering so you can inline CSS in the header or the body. This is because the CSS file must be fetched (through the network or locally) which can impact performance. In a perfect world you only have one css file but the world is not perfect.
A new feature available on most major browsers..
Stylesheets activated after the body is started do not block paint
[https://www.chromestatus.com/feature/5696805480169472][1]
<body class="gorgias-loaded">
<p>This page includes an image, followed by an external css file that is appended to the document by js (async) followed by another image.
The css file changes the page background color black when it has been applied.</p>
<p>Optimally what you will see would be:</p>
<ol>
<li>A blank white page with this text and the title for both images.</li>
<li>Immediately after, the second image.</li>
<li>One second later the first image.</li>
<li>Four seconds later the background color should change to black.</li>
</ol>
<h2>First Image (1 second delay)</h2>
<img width="300" height="365" src="slowimage.php">
<h2>External CSS injected by JS (5 second delay)</h2>
<script>
var attach = document.getElementsByTagName('script')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'slowcss.php';
link.media = 'all';
attach.appendChild(link);
<link rel="stylesheet" type="text/css" href="slowcss.php" media="all"></script>
<h2>Second Image (no delay)</h2>
<img width="300" height="365" src="slowimage.php?delay=0">
</div></body>
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.