What are some pros/cons in using CSS as part of a theme instead of manually supplying <link> tag in the <head> section of a web page?
In ASP.NET, using a theme makes it easier to integrate your CSS styles with the Localization, Accessibility, and Navigation features of that development platform.
Using your own manual CSS file (referenced from the HTML with a <style> or <link> tag) means that you have to maintain the file yourself, potentially including any browser-specific CSS code. However, going this route will probably afford you a higher degree of portability if, for instance, you decided to switch to another platform (eg. LAMP).
Related
I am using shopify and the template (I believe) is baseline.
In the assets folder there is a theme.css and a theme.min.css. I am finding that the only new styles or over rides I can make are in the min.css file?
There doesnt seem to be a SCSS file. How does theme.css become minified because currently it isn't happening automatically.
Sometimes developers add two versions of the stylesheet (.css and min.css), this is just a good practice, but most of the time the minified version (min.css) is connected to theme.liquid. Same happens with .js files.
If you want to add custom styles I recommend to add a new file in the assets folder named "custom.css", for example, and connect it to theme.liquid using the liquid stylesheet tag, something like this:
{{ 'custom.css' | asset_url | stylesheet_tag }}
is important to place this tag right under 'theme.min.css' stylesheet tag in the theme.liquid. This way it will override most of the theme.min.css styles.
I don't recommend to use SCSS in Shopify since it is deprecated.
I'm not exactly sure I understand what you're using or trying to do, but here's two bits of information that might help:
The style being used will be specified in the HTML; so look for tags like
<link rel="stylesheet" type="text/css"
On the page you're working with, you'll see that it probably points to a 'min' version of the css. Change that to change what stylesheet is loaded.
If you want to minify your css, there are a bunch of options, including standalone tools, websites, and packages. Here's a good resource for explaining what the process is, and for picking out a way to minify your css:
https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript
Edit:
Shopify is deprecating Sass, and this article explains what to use instead
https://www.shopify.com/partners/blog/deprecating-sass
"As part of our ongoing initiatives, we've decided to deprecate Sass, with the aim of improving the user experience of storefronts, and paving the way for future advancements. In the short term, Sass will continue to work on Shopify themes, but we are actively migrating our themes to use only CSS stylesheets.
In this article we'll look at why we've decided to transition away from using Sass in themes and how developers can adjust their custom themes to adopt native CSS features and maintain functionality. We'll also look at what alternatives are available for developers who wish to continue using Sass in their development workflow. "
I'm a web developer, not an CSS expert. We recently started using Angular and I'm wondering what is the best practice applying styles in Angular templates.
Discussion we have at work is whether to use external CSS files or internal style tags. We do not have too many templates and each template mostly has its own unique styles. We are debating between external CSS files and/or internal styles.
Couls someone provide an expert opinion on this subject.
Internal styles are only applicable to the page that includes them. As such, if you want to update common styling (such as a menu) on multiple pages, you'll need to update each page individually.
Considering you'll almost definitely have certain styles apply to elements on more common to more than than one page, you'll definitely want to opt for external stylesheets. This allows pages A and B to both inherit styles from a single style.css or similar file.
This way, you can load all the relevant styles with a single line of code in the <head> of each page:
<link href="style.css" rel="stylesheet">
And you only have to update style.css when you want to update multiple page's styling.
Angular brings scoped CSS from v1.5 up (when components were introduced - I believe). It's a good concept but, in small to medium apps, the difference is hardly noticeable. You should only consider using scoped CSS in conjunction with a tool that knows how to make the best of it (i.e. Webpack).
If you're not using Webpack, just stick to the classic model: one big style-sheet.
Note that technically, regardless of stack, if you want to provide the best possible experience (fastest loading times without FOUC) you want to put all the above-the-fold and general layout-ing styles inline, preferably in a head <style> tag and everything else inside a stylesheet loaded asynchronously.
Read this article about loading CSS async.
Is it possible to use cross site scripting in a CSS stylesheet? For example a reference stylesheet contains malicious code, how would you do this?
I know you can use style tags but what about stylesheets?
From the browser security handbook
The risk of JavaScript execution. As a little-known feature, some CSS implementations permit JavaScript code to be embedded in stylesheets. There are at least three ways to achieve this goal: by using the expression(...) directive, which gives the ability to evaluate arbitrary JavaScript statements and use their value as a CSS parameter; by using the url('javascript:...') directive on properties that support it; or by invoking browser-specific features such as the -moz-binding mechanism of Firefox.
... and after reading that, I find this on StackOverflow. See Using Javascript in CSS
In Firefox, you can use XBL to inject javascript in a page via CSS. However, the XBL file must reside in the same domain, now that bug 324253 is fixed.
There is another interesting (though different from your question) way to abuse CSS. See http://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html. Essentially, you misuse the CSS parser to steal content from a different domain.
The OWASP Mutillidae project has a Cascading Style Injection vulnerability example on pageļ¼ http://localhost/mutillidae/index.php?page=set-background-color.php
Of course, you need to setup the env locally first. You can download and set it up on your localhost from the following link:
https://www.owasp.org/index.php/OWASP_Mutillidae_2_Project
Here is the relevant hint:
https://github.com/hyprwired/mutillidae/blob/master/includes/hints-level-1/cascading-style-sheet-injection-hint.inc
I want to change the theme in an asp.net website. but i have to give the normal effect of switching themes?
You can do this by switching style sheets - you can do this using javascript - there is a script around that uses cookies to do this so the theme is persistent - other wise you can probably do it in asp using sessions.
My best advice is to store the theme name in user's client variable.
Here is Coldfusion style
<cfset client.myTheme = "forest">
<link rel="stylesheet" href="theme/<cfoutput>#client.myTheme#</cfoutput>.css" media="screen" type="text/css"/>
Another way to do it would be to switch the class on a parent html element, such as <body>. This has the advantage of not requiring an extra stylesheet to download.
This does require you to have all of your different styles for the different themes loaded from the start, but in most cases, there are relatively few style rule changes for different themes and the majority of the CSS payload is taken up by reset styles and other general styling that apply to all themes (there are of course exceptions to this, but in the general case it tends to be true). Since the load-time cost of including an additional CSS resource is very high, and the payload increase (especially if serving compressed resources) is low, you don't incur any performance penalty by including the extra themes from the beginning, and in fact are likely to have a performance gain versus putting the theme styles in a separate file. Additionally, themes will switch much faster because there are no extra resources to load.
We can write CSS as the following types:
Inline CSS
Embedded CSS
External CSS
I would like to know pros and cons of each.
It's all about where in the pipeline you need the CSS as I see it.
1. inline css
Pros: Great for quick fixes/prototyping and simple tests without having to swap back and forth between the .css document and the actual HTML file.
Pros: Many email clients do NOT allow the use of external .css referencing because of possible spam/abuse. Embedding might help.
Cons: Fills up HTML space/takes bandwidth, not resuable accross pages - not even IFRAMES.
2. embedded css
Pros: Same as above regarding prototype, but easier to cut out of the final prototype and put into an external file when templates are done.
Cons: Some email clients do not allow styles in the [head] as the head-tags are removed by most webmail clients.
3. external css
Pros: Easy to maintain and reuse across websites with more than 1 page.
Pros: Cacheable = less bandwidth = faster page rendering after second page load
Pros: External files including .css can be hosted on CDN's and thereby making less requests the the firewall/webserver hosting the HTML pages (if on different hosts).
Pros: Compilable, you could automatically remove all of the unused space from the final build, just as jQuery has a developer version and a compressed version = faster download = faster user experience + less bandwidth use = faster internet! (we like!!!)
Cons: Normally removed from HTML mails = messy HTML layout.
Cons: Makes an extra HTTP request per file = more resources used in the Firewalls/routers.
I hope you could use some of this?
I'm going to submit the opinion that external style sheets are the only way to go.
inline CSS mixes content with presentation and leads to an awful mess.
embedded CSS gets loaded with every page request, changes cannot be shared across pages, and the content cannot be cached.
I have nothing against either method per se, but if planning a new site or application, you should plan for external style sheets.
Inline
Quick, but very dirty
This is (sadly) also the only really sane option for HTML formatted email as other forms often get discarded by various email clients.
Embedded
Doesn't require an extra HTTP request, but doesn't have the benefits of:
Linked
Can be cached, reused between pages, more easily tested with validators.
You want external css. It's the easiest to maintain, external css also simplifies caching. Embedded means that each separate html file will need to have it's own css, meaning bigger file size and lots of headaches when changing the css. Inline css is even harder to maintain.
External css is the way to go.
Where to start!!??
Say you had a site with 3 pages...
You could get away with Inline CSS (i.e. CSS on the page itself, within tags).
If you had a 100 page website...
You wouldn't want to change the CSS on each page individually (or would you?!)...
So including an external CSS sheet would be the nicer way to go.
Inline CSS is generally bad. It's much easier to modify the style of a page when all the styles are located in one central location, which inline CSS doesn't offer. It's easy for quickly prototyping styles, but shouldn't be used in production, especailly since it often leads to duplicating styles.
Embedded CSS centralizes the styles for the page, but it doesn't allow you to share styles across pages without copying the text of the embedded style and pasting it in each unique page on your site.
External CSS is the way to go, it has all of the advantages of embedded CSS but it allows you to share styles accross multiple pages.
Use external CSS when:
you have a lot of css code that will make your file messy if you put it all inline
you want to maintain a standard
look-and-feel across multiple pages
External CSS makes it a lot easier to manage your CSS and is the accepted way of implementing styles.
If the styles are only needed for one file, and you don't foresee that ever changing to apply to other pages, you can put your css at the top of the file (embedded?).
You should generally only use inline CSS if:
It's a one-time formatting for a specific tag
You want to override the default css (set externally or at the top of the file) for a specific tag
To everyone in the here and now, reading after 2015, with projects like Polymer, Browserify, Webpack, Babel, and many other important participants that I'm probably missing, we have been ushered into a new era of writing HTML applications, with regards to how we modularize large applications, distribute changes and compose related presentation, markup and behavior into self-contained units. Let's not even get started with service workers.
So before anyone forms an opinion on what is and isn't feasible, I would recommend that they investigate the current web ecosystem in their time to see if some issues related to maintainability have been gracefully solved.
Pros:
Allows you to control the layout of the entire site with one file.
Changes affect all documents at the same time.
Can eliminate redundant in-line styling (Font, Bold, Color, Images)
Provide multiple views of the same content for different types of users.
Cons:
Older browsers may not be able to understand CSS.
CSS is not supported by every browser equally.
In this case, the pros far outweigh the cons. In fact, if the site is designed in a specific way, older browsers will display the content much better (on average) than if the site were managed with tables.
If you are using a server side language, why not embed CSS and use conditional programming to display it as necessary? For example, say you're using PHP w/ Wordpress and you want some homepage specific CSS; you could use the is_home() function to show your CSS in the head of the document for that page only. Personally, I have my own template system that works like so:
inc.header.php = all the header stuff, and where page specific CSS would go I put:
if(isset($CSS)) echo $CSS;
Then, in a specific page template (say about.php), I would use a heredoc variable for the page specific CSS, above the line which includes the header:
Contents of about.php:
<?php
$CSS = <<< CSS
.about-us-photo-box{
/* CSS code */
}
.about-us-something-else{
/* more CSS code */
}
CSS;
include "inc.header.php"; // this file includes if(isset($CSS)) echo $CSS; where page-specific CSS would go ...
<body>
<!-- about us html -->
include "inc.footer.php";
?>
Is there something I'm missing that makes this approach inferior?
Pros:
1) I can still cache the page using standard caching techniques (is there a caching method that takes advantage of a CSS only external file??).
2) I can use php for special case conditional formatting in specific class declarations if absolutely necessary (PHP doesn't work in a CSS file, unless I'm missing some server directive I could set).
3) All my page specific CSS is extremely well organized in the actual PHP file in which it's being used.
4) It cuts down on HTTP requests to external files.
5) It cuts down on server requests to external files.
Cons:
1) My IDE program (Komodo IDE) can't follow the Heredoc formatting to properly highlight the CSS, which makes it slightly harder to debug syntax errors in the CSS.
2) I really can't see any other con, please enlighten me!