Archive
HowTo: Reset browser cache of CSS files upon ASP.net MVC app publish
On an ASP.net MVC webapp I’m maintaining, I had the issue that due to caching of older CSS (stylesheet) files in the browser, if the user didn’t press F5/refresh, it wasn’t showing you some message (since I had added the class .center-horiz-vert in the CSS that didn’t exist in the older cached css the browser had).
Instead of changing web.config to stop cachine of CSS files (in which case it would bring the CSS on every page load which is an overkill), I expanded on an idea mentioned by Maxim Kornilov on SO (https://stackoverflow.com/a/12992813/903783), on making the CSS URLs webapp version specific.
I added a fake version parameter to the URLs with the build number as value so that till I publish a new build the browser caches the CSS, but when I upload a new build it brings the new one since it cache with the url as a key (that now includes the build number as a dummy url parameter that the webserver will ignore and just fetch the CSS file when requested)
Maxim’s example was in ASP/ASP.net WebForms syntax instead of MVC’s and Razor Pages’ newer Razor syntax), so I contributed my solution for the case of an ASP.net MVC webapp that wants to serve a fresh copy of CSS files on every new build that you publish (will do this whether the CSS file has changed or not) so that browsers don’t use older cached copies of the file. Obviously this expands to any kind of files you link/load into your webpages via a URL.
1) Added to the webapp’s main class (was called MvcApplication) in Global.asax.cs
#region Versioning
public static string Version =>
typeof(MvcApplication).Assembly.GetName().Version.ToString();
//note: syntax requires C# version >=6
public static DateTime LastUpdated =>
File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);
#endregionthe someProperty => someReadOnlyExpression syntax is just shorthand for someProperty { get { return … ;} } possible since C# 6
2) in its Content/_Layout.cshtml file I used to have the following to show build number and build datetime (based on the webapp’s main assembly) on the page footer:
Version @ViewContext.Controller.GetType().Assembly.GetName().Version
(@string.Format("{0:yyyy/MM/dd-HH:mm:ss}",
@File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))which I changed to the simpler:
Version @somewebappname.MvcApplication.Version
(@string.Format("{0:yyyy/MM/dd-HH:mm:ss}",
somewebappname.MvcApplication.LastUpdated))3) it was loading the CSS via hardcoded link in _Layout.cshtml (still refactoring it) which I changed to:
<link href='@Url.Content("~/Content/Site.css?version=" +
somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" /> so if one right-clicks in the webpage and they do view source they see:
<link href='/Content/Site.css?version=2.1.5435.22633'
rel="stylesheet" type="text/css" /> that is the CSS url is version specific thanks to the dummy parameter version
If a random number was used instead it would fetch the CSS at every page load which is usually undesired, especially if you are already pushing a new webapp build instead of individual page changes to the web server (so that you do have access to a build number that you can inject into URLs).
Note that to achieve auto-incrementing of build number, at Properties/AssemblyInfo.cs I have (see How to have an auto incrementing version number (Visual Studio)?):
// Version information for an assembly consists of the following four values:
//
// Major Version
// Minor Version
// Build Number
// Revision
//
// You can specify all the values or you can default the Revision
// and Build Numbers by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.*")]
// don't use boh AssemblyVersion and AssemblyFileVersion with auto-incrementFix: jqGrid search operator menu items jumping around on hover
A colleague noticed earlier on today, that on the Chrome browser they were using, the search operator menu items of a jqGrid on a web app’s UI were jumping around on hover, making it practically impossible to select one.
Seems this had started occurring on that ASP.net MVC web application, after a recent update to the latest jQuery-UI NuGet package.
Probably the issue wouldn’t occur if it wasn’t using the older free version of jqGrid. Will probably transition it eventually to free-jqGrid, the free fork (and quite evolved since forked) of the older free version of jqGrid, since jqGrid’s newer version is now commercial.
For the time being, I ended up adding this fix to Content/Site.css of the ASP.net MVC webapp:
/* jqGrid search operator menu item hover (uses jQuey-UI) */
a.ui-corner-all.g-menu-item.ui-state-hover {
border: 1px #cccccc !important; /* fix for Chrome: removed "solid" (was causing hovered items to resize and menu to relayout, making it too hard to select them */
/*border: 1px solid #cccccc;*/ /* this is used by jQuery-UI for .ui-state-hover */color: blue; /* showing blue color for hovered over menu text, should show better than a hover border since selected item already has a border itself */
}
This also has the added extra that on hover it shows the hovered item’s text in blue:
Fix: jQuery’s jqGrid search UI custom styling
Lately, I’ve got the task of maintaining/extending an ASP.net MVC web application that is using jQuery’s jqGrid for data grids on its UI. First thing I noticed was how confusing the search UI on the grid’s header was:
Those symbols on the left-side of each column’s searchbox are for the type of search (e.g. contains, doesn’t contain, equals, starts with, doesn’t start with, ends with, doesn’t end with).
Bit too many options and using programming-related symbols that probably intimidate several users in my opinion:
But the worse is the “x” button (that clears the searchbox) on the right of each searchbox, that combined with the search-type symbols makes the whole search bar look like some strange mathematical expression.
So using the browser dev tools (F12) and some CSS rules I quickly restyled that search bar to make it more appealing UI/UX wise:
Added a border around the “x” button that clears the searchbox and offseted using a negative margin so that the searchbox and it fuse together visually on their sides. Also made the search-type symbol (that opens the search-type selection popup when clicked) of lighter color. It may look a bit-like some disabled thing like that, but at least it should confuse average users less with its use of technical symbols like that.
Just need to add the rules above at the ASP.net MVC app’s Site.css (probably to be found at the Content subfolder of the webapp) and remember to press F5/Refresh in one’s browser in case the old styling still appears due to caching.
Update #1:
I noticed on older versions of Windows (other than Windows 10 that is) that bevels were showing at the text inputs, leading to this ugly effect:
So I had to add some more rules to remove the bevel borders and use a consistent border color.
Removing the bevels seemed to also remove the inner padding of the text inputs, so added a padding of 2px and some box-sizing rules to make sure the padding doesn’t affect the input’s size.
/* OS-independent styling for input and textarea borders */
textarea,
input[type="text"],
input[type="password"] {
border-style: solid;
border-width: 1px;
border-color: gray;
padding: 2px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Update #2:
After recently updating some jQuery related NuGet packages in that ASP.net project, I noticed the [x] button was showing a bit higher up at the bottom compared to the search box. The fix to that was to add padding-bottom: 1px; at the CSS declaration for clearsearchclass in Content/Site.css
a.clearsearchclass {
border-width: 1px;
border-style: solid;
/* border-left-style: none; */
margin-left: -3px;
padding-bottom: 1px; /* seems to be needed with newer jQuery.UI */
background: whitesmoke;
border-color: gray;
}
HowTo: Show block on anchor hover and click to keep open with CSS
I was looking for a way to show a hidden HTML element with just CSS (no Javascript) when mouse hovers over an anchor (say over a “more…” note), while at the same time also supporting touch-only (no mouse) clients, where clicking should show (and keep open) that same element.
I ended up combining solutions and comments from
https://stackoverflow.com/questions/18849520/css-show-hide-content-with-anchor-name and
https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a#5210074
into
https://jsfiddle.net/birbilis/23nt74se/
Achieved the following behaviour:
- Can hover over an anchor to temporarily show its respective more info block
- Once the info block is open, hovering over that one too (having left the anchor above it) keeps it open (useful to select and copy content from the item)
- Can click on an anchor to show its respective more info block and keep it open. Only one such block is kept open at a time. If multiple exist and you click on another’s anchor, the last one is shown and kept open instead (this doesn’t affect what is temporarily also shown via the hover mechanism).
Notes:
- Could show the item inside the flow or float, e.g. using inline-block instead of block (https://www.w3schools.com/css/css_inline-block.asp)
- I use the :target CSS selector in a bit different way than the original suggestion had, I just set the anchor to jump to itself for easier maintenance of IDs and targets and maintenance-free CSS when adding more targets.
- The anchor with the “openhelp” class must be placed immediately before the item with the help class, since .openhelp:hover + .help is used (https://www.w3schools.com/cssref/sel_element_pluss.asp)
At Trafilm Gallery Metadata forms I ended up using yet another variation with simpler syntax, where the anchor and help text is placed inside a parent div that has text for the item the help is about and that div is marked with class “question”. See https://jsfiddle.net/birbilis/s3kaknt9/ – When the parent questions already have an ID, this has the benefit that you don’t need to add an ID to the anchor, just an href, plus when clicked it scrolls to the parent item (the question) instead of to the help item that is at the bottom of it which would put the question text out of the view when the help link is clicked, if the question is far enough down the page for it to scroll when targetted by the openhelp anchor.
HowTo: Copy effective-computed CSS style for specific HTML paragraph
I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).
Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).
Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.
If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).
So, this is the copied Computed CSS style for that paragraph:
border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:
color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:
p {
}
and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:
For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:
The
marginproperty is a shorthand property for the following individual margin properties:
margin-topmargin-rightmargin-bottommargin-left
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-left
…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.
Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).
So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):
p {
color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
margin: 0 0 20px 0;
padding: 0 0 10px 0;}
Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):
One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:
Vertical Centering with CSS
According to http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn’t have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
That page points to a horizontal and vertical centering example (which seems to be a common need): http://www.w3.org/Style/Examples/007/center-example
To cater for various (mainly older) web browsers and peculiarities in CSS implementations, many vertical centering techniques have been developed. Here are some related links:
- http://blog.themeforest.net/tutorials/vertical-centering-with-css
(test page: http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html) - http://www.vanseodesign.com/css/vertical-centering/
- http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
- http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
ASP.net WebPartZone skins and CSS
I was just examining a MonoX portal skin that our designer is authoring for the ClipFlair platform and noticed that in the Default.skin file, there’s a note pointing to http://support.microsoft.com/kb/911717 that speaks of an issue with Microsoft’s implementation of WebPartZone skins:
There it says:
The CssClass property does not affect the following style objects:
•The MenuLabelHoverStyle property
•The MenuPopupStyle property
•The MenuVerbHoverStyle property
•The MenuVerbStyle property
•The MenuCheckImageStyle property
Do not use the following line of code:
<MenuPopupStyle CssClass="wp_menupopup" />
…
while having a Stylesheet.css file with the following code:
.wp_menupopup
{
background-color:Red
}
Instead, use the following line of code:
<MenuPopupStyle backcolor="red" />
In short, at the Default.skin file one can give a CssClass and then define the styles at Stylesheet.css, but for MenuPopupStyle, MenuVerbHoverStyle, MenuVerbStyle and MenuCheckImageStyle this doesn’t work and you have to enter the object properties that correspond to the CSS attributes you want (e.g. background property of ASP.net for the background-color CSS attribute) directly into the Default.skin file for the respective objects.
BTW, the aformentioned Microsoft article speaks of Stylesheet.css, while MonoX template uses Default.css. This is because the ASP.net theming engine applies all .css files it finds in the theme folder (independent of filename), as explained at http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx. That last Microsoft article has lots of useful information regarding Themes and how you can (optionally) combine them with CSS and on issues like scoping, precedence, security etc.
George Birbilis @zoomicon 