Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | Next revisionBoth sides next revision |
development:architecture:user_interface [2020/03/19 21:29] – [What Should I Start Editing?] crhallberg | development:architecture:user_interface [2020/06/11 12:14] – [CSS Inheritance] demiankatz |
---|
The way CSS inheritance works requires a few notes. If you are going to take advantage of this feature, here are some important things to keep in mind: | The way CSS inheritance works requires a few notes. If you are going to take advantage of this feature, here are some important things to keep in mind: |
| |
* Always use [[development:architecture:laminas|Laminas]]' $this->headLink() helper to include CSS files. If you don't use the helper, CSS inheritance will not happen! | * Always use [[development:architecture:laminas|Laminas]]' $this->headLink() helper (as opposed to inline HTML tags) when you need to include specific CSS files in your templates. If you don't use the helper, CSS inheritance will not happen! |
* Watch out for @import statements in your CSS files. The target of the @import must be in the same theme as the caller. Inheritance cannot apply here since "@import" is resolved by the client's web browser rather than the server-side logic. //For example, suppose you customize styles.css and copy it to your MyUniversity theme. styles.css has an "@import layout.css" statement in it. If you do not copy layout.css into your MyUniversity theme, it will not load at all -- the user's browser isn't smart enough to find it in the default theme.// | * Watch out for @import statements in your CSS files. The target of the @import must be in the same theme as the caller. Inheritance cannot apply here since "@import" is resolved by the client's web browser rather than the server-side logic. //For example, suppose you customize styles.css and copy it to your MyUniversity theme. styles.css has an "@import layout.css" statement in it. If you do not copy layout.css into your MyUniversity theme, it will not load at all -- the user's browser isn't smart enough to find it in the default theme.// |
| |