I'm using AngleSharp to parse some CSS files, compare their structure and build an output file out of them. The tool makes all declarations explicit, i.e. if the source rule is:
.recent-work-wrap .overlay {
padding: 15px;
}
I get following output from AngleSharp:
.recent-work-wrap .overlay {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
That is good for comparing rules and detect changes, but the question is, how can this rule be combined to a shorthand like above?
So for another example, how to get from this:
.sample-rule {
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 30px;
}
to this
.sample-rule {
margin: 30px auto;
}
The situation gets worse with CSS3 declarations, because they can really have a lot of parameters... I checked some CSS minifier/uglifier tools, but they mostly use RegEx to remove whitespace and smaller optimizations.
Is there a known way/tool/library to write optimal shorthands out of multiple declarations?
How do you get this output? Have you tried looking at the shorthand declarations (e.g., Margin) of the Style property?
Internally, AngleSharp only uses longhand declarations, thus the output is as verbose as it could be. However, AngleSharp knows most shorthands and should be able to recombine these longhands into their shorthand form.
I don't know if that helps you already. If not then please post some code (a MWE) and I'll try refine this answer.
Related
anyone seen any issues where razor code you write isn't given an isolation name which causes its isolated css to not be able to find it?
<!--_Layout.cshtml-->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"><img src="~/img/Dimensions360_Logo_192x113.png" /></a>
/*_Layout.cshtml.css*/
a.navbar-brand > img {
height: 75px;
float: left;
margin-left: 15px;
margin-top: 2px;
}
and the generated html is not putting the b-u43b921rpo isolation name on my img
yet the generated css does include that name
a.navbar-brand > img[b-u43b921rpo] {
height: 75px;
float: left;
margin-left: 15px;
margin-top: 2px;
}
I see now this is by design:
Scoped CSS only applies to HTML elements and not to Razor components or Tag Helpers, including elements with a Tag Helper applied, such as .
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0
I've been doing some work with Selenium and Fiverr.com and I've run into some issues I was hoping to get some help on. I'm trying to create a new gig, and I've managed to do everything but a few things still are stumping me. One thing is the picture uploading.
• You have a button that you click a file input type () that brings up a Windows dialog, my plan thus far to use SendKeys.SendWait has worked, except for the part where you push "Open" on the Windows dialog to submit the picture. I've tried using SendKeys.SendWait("{ENTER}") to click it but that hasn't worked for me so far, so any ideas on that? I can't think of any other way to do it unless P/Invoke has something to handle Windows Dialog boxes?
•I'm also trying to enter text into the 'Description' box, and haven't been able to do that yet. I have tried to get it by class name, but it tells me that it can't access the class because it is hidden, have also tried to do it through Javascript (IJavaScriptExecutor) like so:
IWebElement detailFrame = firefoxDriver.FindElement(By.XPath("/html/body"));
var executor = firefoxDriver as IJavaScriptExecutor;
executor.ExecuteScript("arguments[0].innerHTML = 'hiiiiiiii'", detailFrame);
It's odd because they're using body for the text field like so:
<body marginwidth="0" marginheight="0" spellcheck="true" class="wysihtml5-editor" contenteditable="true" style="color: rgb(119, 119, 119); cursor: auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; overflow: auto; background-color: rgb(255, 255, 255);">TEXT HERE<span id="_wysihtml5-undo" class="_wysihtml5-temp"></span></body>
I think they're using two different 'bodys' though, but the XPath just shows that it's /html/body. How would I set the text for something like this?
Thank you guys for your help, been at this for the past two hours.
Selenium has mechanism for handling window. You can use driver.SwitchTo().Window(""); to set focus on newly opened window and perform additional action on it. However, keep that in mind to go back to parent window you may need to use default content again. See here for other window handling techniques.
First of all, selenium doesn't recognize hidden element. If you know for sure the element is not hidden then I might say taht the selector you are using probably not correct. If I understand the html you provided clearly and the element is visible then I suggest you use xpath for that element. //*[#id='_wysihtml5-undo']//.. can be helpful one for you
First and foremost; I know that a lot of these CSS-type questions have been closed, so, hopefully I've been able to broaden the question to fit others aswell. Here goes:
I've been handed a project and am doing my best with adding the features my boss wants me to. But when I try to style a button differently from the rest, the changes don't "take".
The css file works as I am able to style other things:
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
Button:
<input type="submit" value="Print." class="fakeBtn" id="fakeBtn" />
CSS tries:
.fakeBtn
{
font-size: 0.8em;
border: 0px;
background-color: transparent;
color: #999;
cursor: hand;
}
input#fakeBtn
{
font-size: 0.8em;
border: 0px;
background-color: transparent;
color: #999;
cursor: hand;
}
As you can see I've tried using a class to change the style and also the id approach. None of which works though.
I've hardly done any mvc work and this, already existing, project is my first. Is it a logical error? What am I doing wrong?
EDIT:
Could any of these be overriding? These are all the css-snippets I could find with "input" in them. How does one know if something overrides something else?
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
If this is pure html, then your code seems fine, and it is clear that either your css is simply not being loaded and read, or it is being overwritten at some later stage.
You could try applying important (like color: #999 ! important;), just to see if any of the changes become visible then. If so, you know that the CSS properties are being overwritten somewhere else.
On the other hand, I've seen Asp.Net and MVC caching cause some problems here. You might want to try deleting the site and publishing again from scratch, to see if there are any changes.
Update:
I believe this might be your problem:
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
This specifies style for the type input, so if this comes after .fakeBtn { ...}, then that style will be applied instead (unless ofcourse, you have added ! important; to the end of some of the statements, in which case they will only be overridden by other statements which also contain ! important;).
Your best solution is probably to add specific classes to the section: input, textarea { ...}. That way, it will not override other input-fields in general.
CSS seems fine.
Try using Firebug to verify what styles are applied and what are overridden.
I suspect you have some other CSS rules that style the buttons and override your CSS.
I am using a httphandler to dynamically resize images that are rendered on a page. I have a preset width that all images must confirm - and the height of the images can vary (proportions constrained to the original width and height). I am caching the images - however, when they are originally loaded, the httphandler is called after the page is rendered - so for longer images - sometimes on intial load, layout breaks with larger images as they overlap the content that is below it. Here is an example screenshot from here http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801:
Here is the css:
.gallery
{
margin-left:0px;
padding-left:5px;
}
ul.gallery div.top_frame
{
width:732px
}
ul.gallery div.view_frame
{
margin-left:5px;
}
ul.gallery div.image_frame
{
border: 1px solid #dddddd; padding-top: 5px; height:100%; min-height:490px;
padding-bottom: 5px; text-align: center;
}
ul.gallery div.button_frame
{
width: 732px; text-align: right; margin: 4px 0px 0px 0px;
}
ul.gallery div.name_frame, ul.gallery div.original_name_frame
{
margin: 0px 0px 0px 5px;
}
ul.gallery div.name_frame h2
{
margin: 2px 0px 3px 0px;
padding: 0px;
}
ul.gallery div.date_frame
{
margin-left:5px;
margin-bottom:5px;
}
ul.gallery div.update_frame
{
width: 732px; margin-bottom: 5px; margin-top: 5px;text-align:right;
}
ul.gallery div.desc_frame
{
margin-left:5px;
background-color:#eeeeee;
}
ul.gallery li
{
width: 732px;
display: -moz-inline-stack;
display: inline-block;
vertical-align:top;
margin: 5px;
zoom: 1;
*display: inline;
_height:100%;
color:#000000;
letter-spacing:0px;
line-height:normal;
}
ul.breadcrumbs li
{
float:left;
margin:0px;
padding:0px;
width:100%;
}
ul.breadcrumbs li a
{
font-size:12px;
}
Since the image in the screenshot below may be cached you may not see the broken layout. I wonder if rendering the images in a table would be better? Or is there a css fix? I've even tried Jquery and used document ready to adjust the height of the image containers - but the image may not be loaded - so I can't return the height of the image in the function. Any suggestions on how to solve this issue?
If your images are all going to be the same width, output the IMG tag with a width attribute. this may help.
<img src="..." width="720">
Using input type="image" for this type of application is a bit odd. Why not just use an A-tag wrapped around an image?
This is the key to your problem:
however, when they are originally loaded, the httphandler is called after the page is rendered
An IHttpHandler sees the request before the response is sent to the browser and can do whatever it needs, including responding with a resized image. I'm doing that a lot, never had a problem. Since it doesn't work for you, I'm 100% you've got a bug in your HttpHandler.
If i create the image and load it into the cache in the custom image's prerender event - it seems to have fixed this issue. Originally the control rendered the image info to the src string in the browser and the image was then intercepted by a httphandler that calls a cachemanager (if exists - return, if not - create). Since the problem above seemed to happen only when the image was initially created - I figured recreating it before it was 'requested' may help - and it appears it has. If there are consequences to this - I will edit my solution.
Is there a .Net CSS parser that will allow me to parse css shorthand properties into their longhand form?
For example I'd like to take the following:
#somediv{
margin: 10px;
padding: 10px 20px;
border:5px solid #FFF;
}
And translate it to:
#somediv{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-width: 5px;
border-style: solid;
border-color: #FFF;
}
Here is a pretty good list of all the different properties I'd need to handle in this manner: http://www.dustindiaz.com/css-shorthand/
Ideally I'd like something in .Net but if there's something in another language that's open source I can probably adapt it.
Update
Without getting into too much detail as to exactly what I'm trying to do here is the basic premise:
I need to programmaticly take multiple CSS docs and merge them to create one definitive set of CSS.
So if doc 1 has :
p { padding: 10px;}
And then I add on doc 2:
p { padding-left:20px;}
The resulting CSS should be:
p { padding-top: 10px; padding-right:10px; padding-bottom:10px; padding-left:20px;}
Because the later added doc overwrites the single property. To do this accurately I would need to take every CSS and break down every property to it's lowest element first.
For regular CSS parsing I've found this to be the easiest to use:
http://www.codeproject.com/KB/recipes/CSSParser.aspx
For breaking down the shorthand properties into their longhand form I've found two that can do it:
In .Net : http://www.modeltext.com/css/index.aspx
In JavaScript: http://www.glazman.org/JSCSSP/
The most simplest approach would is to make use of .NET's WebBrowserControl along with MsHTML(IE Renderer) and this is most reliable approach too !
//Create the instance of new webbrowser control.
WebBrowser browser = new WebBrowser();
//Navigate to the specified URL.
browser.Navigate(#"test.html");
//Wait until the webpage gets loaded completely.
while (browser.ReadyState != WebBrowserReadyState.Complete)
{
Application.DoEvents();
}
foreach (object divElement in
(browser.Document.GetElementsByTagName("div")))
{
IHTMLCurrentStyle currentStyle = ((divElement as HtmlElement)
.DomElement as IHTMLElement2).currentStyle;
Console.WriteLine(currentStyle.marginLeft);
Console.WriteLine(currentStyle.marginRight);
}
Note:
In order to get this code working you need to add reference to Microsoft.MSHTML.dll which can be found on the following location.
c:{Program Files}\microsoft.net\Primary Interop Assemblies\
Could you give a little more detail on why you want to do this?
And are you looking for it to do correct parsing with things like:
padding:10px 15px;
into
padding-top:10px;
padding-right:15px;
padding-bottom:10px;
padding-left:15px;