Generated content in (empty) images on in Chrome (27)

HTML replaced elements have no content, that’s why it’s impossible to add generated content with pseudo-elements (:before, :after) on them.

I did however found an exception (as a bug/hack) that works only in Chrome (27 and Canary 29, AFAIK). It is possible to add pseudo-elements to img tags, but ONLY if you provide content to them, thus making invisible the image.

This isn’t very useful, unless the image is missing or unavailable (and if you’re making a Webkit/Blink-solo web-application), or if you haven’t a src attribute provided. Use case: if you have media objects where the image is needed for design/architecture pattern, but still it’s not mandatory for data purposes.

Here’s the example on Dabblet.

For further reading:

CSS3 gradients

Back in the time of Web 2.0, everyone was amazed by the trends of using gradients.
Now, instead of using images, we can use CSS3 to create backgrounds (and not only! just wait and see).
The gradient at the left can be achieved by the following declaration:

.gradient-background {
   /* fallback */
   background-color: #333;
   background-image: url(images/gradient-background.png); 
   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#999));
   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#333, #999); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#333, #999);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#333, #999);
}

There are some problems with Internet Explorer, of course, but we can use filters and other options to make it work (there’s a fallback image in that case anyway).
If you are looking for a fast answer, I send you to the Ultimate CSS gradient generator; if you are looking for a full guide, then go to the CSS-Tricks guide.
How am I willing to complete what is already done? The answer in the next acticle!

Arial and weight

Firefox 4 (and 5) is rendering (at least) Arial fonts wrongly.
I came to this problem while I was designing a website using Arial. The problem is given in Windows 7, because of the use of GDI for text rendering. Arial Black is rendered as a weight of Arial, and not as another font.
If you set: “font-family:Arial;” with “font-size” set to:

  • “normal” or “100;” to “500;” you get Arial
  • “bold;”, “bolder;”, “600;” or”700;” you get bold Arial
  • “800;” to “900;” you get Arial Black
  • “bolder;” in a nested element which was in bold Arial you get Arial Black
Arial weights in webkit and mozilla engines.
Chrome, Safari and Opera render correctly (as we were used to). Chrome and Opera though have strange 600 and 700 weights… Interestingly, Internet Explorer is showing me the same problem that Firefox (are you planning to be bought by Microsoft? Skype was bought and started giving problems… I’m just saying)…

Here’s the code of the page:


    



Arial vs Arial bold vs Arial Black


This is 100 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 200 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 300 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 400 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 500 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 600 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter


This is 700 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter


This is 800 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter


This is 900 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter


And the result (try it in Firefox and in another browser):

Arial vs Arial bold vs Arial Black

This is 100 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 200 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 300 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 400 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 500 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 600 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter
This is 700 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter
This is 800 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter
This is 900 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter

Note something? If you have Chrome, you’ll see that 600 of boldness is bigger in size than the bolders… I let you imagine how it’s shown in the other browsers! What should we designers do?

Do websites need to work exactly the same way in every browser?

Well, I’d like to say yes, but the answer is given by two websites most web designers have come accross with:

While the first one says the contrary (NO!), it behaves quite the same way in all the lastest versions () of the browsers I’ve tried, which are Chrome 12, Firefox 5, Internet Explorer 9, Safari 5, Opera 11.11 (running on Windows 7).
On the other hand, the second one is a total mess (try it yourself), and that’s why the answer it provides is simply Nope.
Whoever makes the HTML/CSS part of the job is always trying to make the contrary (at least me). So the designers who are pedant like me, might become nuts every time they make a website, trying to make it look the same in every browser.
So how do you do that? Test.
Download all the major browsers (usage share of web browsers) and try them at home, they hopefully have an auto update function so you won’t have a problem testing. You could have some problems with Internet Explorer, but there are two solutions: MS SuperPreview e IETester; you can test in the same window more than one browser, and IETester come with more versions of MSIE, so you can test all the versions together.
But you don’t know how the site will be seen in another OS if you don’t have one, so here are some solutions:

  • Browser Shots: you can choose the browsers and the OS to test your website online and it doesn’t support MacOS yet. But they’re just screenshoots, and it may take a while. Pros: let’s you pick a lot of versions and OS and try them at once.
  • Browserling: gives you 3 minutes of remote control of a Windows using IETester, FF3.5, Chrome 7, Opera 10.6 and Safari 5. It let’s you navigate in some way, change resolution and debug (in FF, but I haven’t try it). Pros: might have resolutions you don’t have.
  • Adobe BrowserLab: you need an Adobe account, but if you develop using Dreamweaver is a function included with the program. Pros: multi-browser, multi-OS, it lets you navigate viewing more browsers at the time or overlap them (like MS SuperPreview).
  • Adobe Device Central: what about testing in mobile devices?

So, if every browser or rendering engine behaves different, should we give up? My answer is never give up, but don’t drive yourself crazy.
The differences between the browsers rendering today vary because of the support of HTML5 and CSS3 specifications (which aren’t standards yet, but will become sooner or later).
Can I use HTML5 and CSS3 and have the same results in every browser?
Hopefully, yes. And the hints, tricks and hacks I learn or create will be posted here while I discover them.

ENG Linq to Entities – Convert DateTime to string

This is a common task that can create some headache when using Linq to Entities and some casting function like ToString.
If you have tried to convert some IQueryable ToString, for sure, you got this error: LINQ to Entities does not recognize the method ‘System.String ToString()’ method, and this method cannot be translated into a store expression.

The problem is that linq to entities can’t translate the ToString method in some sql code but you can cheat it using linq to object after linq to entities in this simple way: Call first the method .AsEnumerable() (in this way linq to entities can get the Db data) and, after that call, use the method that you need because now yo’re working with object!! This cheat can also solve Convert.ToInt32 and all the other casting problem with linq to entities.

var events = schedaLavoroClienteRepository.FetchByIdClienteAndDate(_idCliente, fromDate, toDate);
            var eventList = events.AsEnumerable().Select(e => new
                                                   {
                                                       id = e.id ,
                                                       title = e.Titolo,
                                                       start = e.DataProgrammazione.HasValue ? e.DataProgrammazione.Value.ToString("s") : null,
                                                       end = e.DataProgrammazione.HasValue ? e.DataProgrammazione.Value.ToString("s") : null,
                                                       allDay = false
                                                   });

            var rows = eventList.ToArray();
            return Json(rows, JsonRequestBehavior.AllowGet);