https://hugo.curtiscode.dev/tags/css/Recent content in css on Curtis TimsonHugo -- gohugo.ioen-GBWed, 16 Aug 2017 19:00:00 +0000https://hugo.curtiscode.dev/post/css/style-readonly-attribute-css/Wed, 16 Aug 2017 19:00:00 +0000https://hugo.curtiscode.dev/post/css/style-readonly-attribute-css/There may be times in which you need to style inputs which have been set with a readonly state. In which case you can simply include the readonly attribute in your CSS selector to target this particular state: input[readonly] { background-color:#ccc; }https://hugo.curtiscode.dev/post/front-end-dev/8-tips-to-increase-front-end-website-performance/Wed, 09 Sep 2015 00:00:00 +0000https://hugo.curtiscode.dev/post/front-end-dev/8-tips-to-increase-front-end-website-performance/Recently I’ve been working on front-end performance improvements for a large web application and would like to share with you my findings. The following, in no particular order, are simple tips for achieving greater website performance: Content Delivery Networks(CDN) can be used to serve data to your clients. Not only do they provide caching abilities, reducing load on your web servers, they also usually have servers distributed across the globe in order to send responses from nearer servers to your clients.https://hugo.curtiscode.dev/post/css/managing-font-face-definitions-with-less/Wed, 04 Feb 2015 22:00:00 +0000https://hugo.curtiscode.dev/post/css/managing-font-face-definitions-with-less/A typical @font-face definition looks something like this: @font-face { font-family: 'CustomWebFont'; src: url('customwebfont.eot'); src: url('customwebfont.eot?#iefix') format('embedded-opentype'), url('customwebfont.woff2') format('woff2'), url('customwebfont.woff') format('woff'), url('customwebfont.ttf') format('truetype'), url('customwebfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; } Here we are defining the font’s name, weight, style, and providing various file types for cross-browser compatibility. If a web application is using different web fonts, or even a different weight/style (bold/italic) for the same web font, then this code has to be practically repeated several times.https://hugo.curtiscode.dev/post/less/using-font-face-and-preventing-faux-styles/Wed, 04 Feb 2015 00:00:00 +0000https://hugo.curtiscode.dev/post/less/using-font-face-and-preventing-faux-styles/@font-face is used in CSS to define a custom font style for a web page. Some custom fonts come with multiple type-faces for different weights and italic styles. These are often defined with seperate font-family names for each type-face. For example the “Alegreya” font could be defined as: @font-face{ font-family:'alegreya'; src: url('Fonts/Alegreya-Regular.otf'); font-weight: normal; font-style: normal; } @font-face{ font-family:'alegreya-bold'; src: url('Fonts/Alegreya-Bold.otf'); font-weight: normal; font-style: normal; } @font-face{ font-family:'alegreya-italic'; src: url('Fonts/Alegreya-Italic.https://hugo.curtiscode.dev/post/jquery/creating-a-new-rule-for-a-css-class-in-jquery/Sun, 07 Oct 2012 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/creating-a-new-rule-for-a-css-class-in-jquery/In jQuery, to add a new style to all elements which have a particular CSS class, we can simply call a function like the following: <div class="foobar">Lorem Ipsum</div> <div class="foobar">Dolor sit amet</div> function SetFooBarRed(){ $(".foobar").css("background-color", "red"); } This will add the style background-color:red to all elements with the class foobar. <div class="foobar" style="background-color:red;">Lorem Ipsum</div> <div class="foobar" style="background-color:red;">Dolor sit amet</div> However, if we have elements which are loaded into the DOM after the initial page load, then these new elements will not have the new style automatically added to them (as they were not included within the DOM when SetFooBarRed() was called).