In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file.
While this method may seem to work without issue, it actually places the <style> tag within the <body> section instead of the preferred location inside the <head> tag.
What is the recommended approach for adding inline CSS to a single razor page so that it appears within the <head> tag? Is there a best practice to follow?
Here is an example:
Main/_Design.cshtml
<!DOCTYPE html>
<html>
<head>
...
@RenderSection("HeadStyles", required: false)
</head>
<body>
...
</body>
</html>
Landing/Index.cshtml or any other view you want to implement this in
@section HeadStyles {
<style>
.custom-style { background-color: blue; }
</style>
}
The rationale behind avoiding the use of <style> tags within the <body> is to prevent the occurrence of FOUC.
However, if the <style> tag affects content that comes after it in the DOM hierarchy, the risk becomes practically non-existent.
All modern browsers have no issues processing <style> tags placed within the <body>.
From a technical standpoint, when a browser encounters a <style> tag in the DOM, it:
the most optimal option is -
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- page content goes here -->
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
in this scenario, the browser will load in the following order:
Is there a way to hide the slider background image on mobile screens? @media screen and (max-width: 800px){ .home #mainSliderWrapper { background-image: none; } .stlye { background-image: none; } .img--holder { background-image:none; } } I tr ...
Why does my icon disappear when using navbar-fixed with materialize, but not when I use the fixed navbar? Icon with regular navbar: https://i.sstatic.net/Z5XEl.png Icon with navbar-fixed: https://i.sstatic.net/HHgWv.png ...
While constructing a website, I encountered an issue where the client is using a mobile device and I want to prevent them from loading a particular background image. For larger screens, my plan is to incorporate approximately 5 images with different resolu ...
$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...
Is there a way to center a box vertically within another box using jQuery instead of CSS? I believe it's more reliable. var textH = $(".Text").height(); var vertAlign = ((140 - textH)/2); $(".Text").css({ marginTop: 'vertAlign' }); I& ...
Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...
I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop. Can anyone assist me with creating keyf ...
I'm facing an issue with linking a CSS file located in my WEB-INF folder to a JSP page. In the JSP page, I have specified the location of the CSS file as follows: <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB- ...
I am looking to convert my variables to JSON for the purpose of POSTing the JSON to an external API. I do not want to create a separate model just for serialization of these values. Using a Dictionary is not feasible as the structure is unconventional, su ...
Currently, I am working on a planet orbit code where I want to enhance the animation speed upon hover. The goal is for the animation to complete one final cycle at the new speed and then come to a stop. I have been successful in increasing the speed on hov ...
http://codepen.io/apswak/pen/qNQxgA Has anyone encountered issues with nesting elements inside a header with a background image? I'm facing the problem where every element I place inside gets pushed above the background image. Is there a more effecti ...
In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using vector-effect="non-scaling-stroke" in order to maintain a consisten ...
It's worth noting that I can't simply stack one image on top of the other because I'll be dealing with transparent images as well. preview of linear wipe ...
I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode. Even after trying to recreate the script ...
My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...
Here is the HTML code snippet I've put together, along with my script. While I admit it might look a bit messy, please bear with me as I'm still in the learning phase. If anyone could offer some assistance on this matter, I would be extremely gra ...
Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...
I am experiencing an issue where the child divs within parent divs are overflowing outside of the parent divs. To get a better understanding of the problem, please try running the code below in a browser: My goal is to align the innermost divs horizontall ...
As I embark on my programming journey, I encountered a dropdownlist conundrum that goes a little something like this. <div> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem >Alabama</asp:ListItem> < ...
A few years back, I developed a C# application for a client, but unfortunately, I have misplaced the source code. The only file I have left is the EXE that was installed on the client's computer. Is there a method to extract the C# source code from th ...