I want to build an entire layout directly from chrome dev tools. So I came over workspaces in chrome dev tools.
But there are 2 limitations I'm facing after I map styles and html to file system resource
If I do some html change from elements panel - like edit html or delete a node - it is not mapped to my workspace html file so that I can save it - is there a way to see such changes??
After I've mapped by css file - and my local css file does not have a rule for a selector say
wrapper{ font-family:"Courier New"}
then I can't persist the change I make from elements panel by directly selecting an element.
See images below:
"Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)"
From https://developers.google.com/web/tools/setup/setup-workflow:
Related
I have an HTML file and it is styled in another css file, which it is connected to. However, I connected the HTML file to another file (through a href), the styling did not transfer. Is there a solution to this other than styling in the same file?
<li> Needed Grade</li>
Here what the linked file looks like.
CSS only applies to the HTML document that links to it. It doesn't apply to every page you visit thereafter. If it did, then (for example) every website you found through Google would have Google's stylesheet applied to it.
Put your CSS in a .css file. Put a <link> element that references that file in every HTML document you want to have that CSS applied to.
I want to add html code (as a client) using dotnetnuke.
For that I also require css which is too big.
Is there a way that I add html code and refer to external custom css file which is stored in assets folder?
If not, then how should i (the client user of dnn and NOT developer/designer) add html code along with external file css?
Dotnetnuke has a HTML module component, for this type of thing.
However, depending on what content filters are applied to this module settings, it may strip out CSS / style tags / comments etc.
In an ideal world and CSS / Styling should be added to the DNN Skin.
If you are adding a small 3rd party component, which is isolated / separated from the skin - One thing that I do is add items such as Script or External Style tags to the "Header" / "Footer" area of that HTML module:
If you add anything into this section, it won't be stripped out from the system.
This also can be used for negative purposes - Sites which have been compromised often will have malicious scripts added to these sections.
There are 3 ways an external CSS file could be added without adding it directly to the Theme/Skin.
Page Specific -
Add the tag referencing the css file uploaded to the site in the Page Header Tags: In DNN v9+, this is
located in Page Settings -> Advanced -> S.E.O. -> Page Header Tags
textarea.
Site wide - Add the tag referencing the css file uploaded to the site in the HTML Page Header Tags: Settings -> Site Settings -> Site Behavior -> Default Pages -> HTML Page Header Tags
Site wide (CSS import) - Import the CSS file in the site's Custom CSS: Settings -> Custom CSS.
Note that you will need to include the portal/site ID in your link to the CSS file.
(for example: '/Portals/0/Assets/my-styles.css', where '0' is the ID of the portal/site.
While you could easily add it to the module settings as suggested by Andrew, doing it as described this way would add the element to the page headers or import through a CSS file as opposed to putting the element in the middle of the HTML content.
I'm using IIS to test PHP scripts for a small blog project I'm working on. I created the HTML and CSS before setting up the server, but I've run into a problem that makes no sense.
When changing the style rules in my CSS files, the rules will apply to the HTML file when it is opened by clicking on it directly from the folder, but not when navigating to it through the localhost IIS link. When accessing it through the local server, CSS rules are not applied, but it's exactly the same single HTML file that should be affected, and in one case it is and the other it isn't.
Why is this happening? Is it just some quirk of IIS or something? I've also noticed new rules don't affect pages on the server unless they are explicitly embedded in the tag in the HTML file, but this doesn't make sense because they already have style rules from external files applied to them, they're just ignoring new rules.
EDIT: I tried copying everything into a new folder and loading it from the server that way, and the new CSS rules now apply, so it looks like IIS is loading an old version of either the HTML or CSS file.
We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:
...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({
outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...
Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:
Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.
Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.
I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:
1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code.
i.e we can refer the the exact line which caused our compiled css rule but not edit it
2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.
Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.
For eg: when I change some property in the inspector it is also changed in the css source file.
Initially
Inspector
Source File
After Changing the property
Inspector
Source File
3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.
When I say source files it means files present in the source panel of the chrome and style editor in the firefox
4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )
I was debugging my website using the developer tools, if you refer to my image, there are 2 styles.css overwrite one another.
It is weird though, because I remember I have only one style.css file attached but it is showing 2 style.css instead. I have checked the location but is exactly pointing to the same path with the same css file(but the content of the css is different.)
The only difference I can spot is the number after the css file name shown by the Devtools
style.css:839
style.css:190
What does it means actually?
It is the line number of the selector present in your file(style.css). In line number 190, you have added a style for the selector(providedSupport). In same file, you have added style for same selector at line number 839
Have a look at Chrome dev tools, this has more feature : Refer this link