topic Re: Missing CSS code selectors in Plusnet Feedback

Missing CSS code selectors

TORPC — Wed, 17 Sep 2014 03:06:18 GMT

According to https://modern.ie/en-us/report#http%3A%2F%2Fplus.net
You are missing a little bit of code
[code= CSS]Internet Explore rmodern.IE
Share modern.IE Send feedbackSend site feedback to help us improve modern.IE.
© 2014 MicrosoftHello from Seattle.
Terms of Use Trademarks Privacy and Cookies
List of selectors
The following is a list of missing selectors and their properties that may be causing compatibility problems. For example there may be a -webkit-box-shadow property but no box-shadow property, preventing non-WebKit browsers from rendering box shadows.
Location: http://www.plus.net/css/core.css?1410836...
Selector Property Source line #
html text-size-adjust 1
button -moz-appearance 1
button appearance 1
input[type%3D"checkbox"] -webkit-box-sizing 1
input[type%3D"checkbox"] -moz-box-sizing 1
input[type%3D"search"] -moz-appearance 1
input[type%3D"search"] appearance 1
input[type%3D"search"]::-webkit-search-cancel-button -moz-appearance 1
input[type%3D"search"]::-webkit-search-cancel-button appearance 1
body Missing Old Webkit (Safari 4+, Chrome) gradient 2
input[type%3D"text"]:focus -webkit-box-shadow 2
input[type%3D"text"]:focus -moz-box-shadow 2
.field -webkit-border-radius 2
.failed -webkit-border-radius 2
.button -o-transition 2
.button:hover -o-transition 2
[/code]
Hope this helps
Also 182 errors 614 warnings, reported http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fplus.net&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
& 43 reported http://validator.w3.org/check?uri=plus.net&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
may be of some help
P.S
Also the code for us to implement on our own websites referrals has outdated / obsolete code
Here is the reported correct version minus my redacted referral ID
[code= Referrals] <div><a href='http://www.plus.net/myreferrals/new.html?intReferrerID=[redacted]'><img src='http://www.plus.net/images/referrals/bb_banner_599.gif' alt='Broadband from £5.99 a month with an included wireless router when you sign up to Plusnet - terms apply' ></a>
</div>
[/code]
The edited parts are now replaced with CSS

.referrals {
text-align: center;
border="0"
{

Here is the unedited code for clarity
[code= Unedited Referrals]<div align='center'><a href='http://www.plus.net/myreferrals/new.html?intReferrerID=redacted'><img src='http://www.plus.net/images/referrals/bb_banner_599.gif' alt='Great value Unlimited Broadband from an award winning provider' border='0'></a></div>[/code]

Re: Missing CSS code selectors

dvorak — Wed, 17 Sep 2014 07:59:30 GMT

i'm sure it's of no help whatsoever - the only help that site would be is to say 'stop using IE'

Re: Missing CSS code selectors

Pettitto — Wed, 17 Sep 2014 09:12:18 GMT

Do any of the webpages display abnormally for you?
There's only a certain amount of support we can offer for the different browsers and their respective versions.

Re: Missing CSS code selectors

TORPC — Thu, 18 Sep 2014 04:39:58 GMT

@Dvorak
First of all the https://modern.ie/en-us/r...ort#http%3A%2F%2Fplus.net
Has only reported those selectors, that are required, it does not tell you to use them on every selector,
For examples
Missing -webkit- selectors will affect Chrome based browsers for
Missing -moz- selectors affects Mozilla based browsers
Missing -ms- selectors affect Internet Explorer browsers
Missing -o- selectors affect Opera browsers
Missing -khtml- selectors affect Konqueror browser
And so on
Plus it also to a degree future proofs for new browser / revisions etc, when the new standards are completed fully / taken onboard & implemented
Therefore IE: browsers are not the only ones affected for the missing behaviour selectors
Plus it is a no brainer as it gives the selector & which lines (places) they need to go (simple copy & paste) into place can suffice as the Values are most likely be in there alternate code eg: [code= browser-examples.css]
.td {

-webkit-column-width: 100px; /* For Chrome / Safari based browsers */
-moz-column-width: 100px; /* For Mozilla based browsers */
-ms-column-width: 100px; /* For Microsoft Internet Explorer browsers */
-o-column-width: 100px; /* For Opera based browsers */
column-width: 100px; /* standard */
}
/* There are some selectors that may not require the alternate selectors eg.. */
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}[/code]
The trick, however is knowing where & when they need to be used & sites like https://modern.ie/en-us are a useful tool for such a purpose
As for telling / advising people from across the globe, to (not to use IE:) you might as well tell / advise people not to use Mozilla / Chrome / Opera etc based browsers @ the same time

Quote from: dvorak
i'm sure it's of no help whatsoever - the only help that site would be is to say 'stop using IE'

The exact opposite as it helps one spend less time testing for IE (does not mean (DO NOT USE IE)

Quote
What's this tool about? Today it can take a lot of time to make your web experiences look great (or just work) across various browsers and devices. This tool detects common coding practices that may cause compatibility problems or prevent your users from getting the best possible experience on a webpage. Whenever possible we suggest a fix or enhancement with web standards like HTML5 & CSS3 (or a graceful fallback). It's not a complete checklist for coding the modern web – just a starting point so you can spend less time testing for IE and more time building what matters on the web.

It may be worth visiting http://www.sitepoint.com/web-foundations/vendor-specific-properties/

@Chris
Not that I can tell @ the moment however I as I have not visited every webpage you currently have, with the several main browsers, that will take a copious amount of time, plus it may affect some pages we have no access to, that you do, & as you are likely not to use several browsers on a general daily routine to visit any of those pages that are possibly affected in a different browser from the norm, will have to be updated as & when any expected behaviours do not present themselves on a different browser, from your routine

Re: Missing CSS code selectors

AndyH — Thu, 18 Sep 2014 06:04:41 GMT

FYI it says 'Suggested Enhancement' and I tried google.com facebook.com bbc.co.uk apple.com and they all had exactly the same suggested enhancements. Maybe you should contact them also?

Re: Missing CSS code selectors

TORPC — Thu, 18 Sep 2014 07:16:38 GMT

Yes the enhancements my be similar
Yet the CSS will differ
& FYI

Plus I also linked to other well known tried & tested checkers

Quote
Also 182 errors 614 warnings, reported http://jigsaw.w3.org/css-...;vextwarning=&lang=en
& 43 reported http://validator.w3.org/c...lidator.w3.org%2Fservices

The enhancements refer to, several different aspects which I never mentioned as per the title of the thread

Using a support site provided via another member differs in results to that of the BBC for an example
First http://www.npr.me.uk

Next bbc.co.uk

CSS

Now for Facebook CSS for clarity

Can you now see a difference or 2 ?
Whilst bbc & facebook share the same headed enhancement results, there are clear differences
& which of the three mentioned site(s) also run into frequent issues / slow to load etc ?

Re: Missing CSS code selectors

jelv — Thu, 18 Sep 2014 08:20:53 GMT

Let me get this right: you are suggesting effort is diverted to investigating theoretical CSS errors which have no visible ill effects when browsing the site when at the same time as there are major issues meaning hundreds of thousands of Plusnet users totally lose their internet connection? Sheesh!

Re: Missing CSS code selectors

TORPC — Thu, 18 Sep 2014 19:41:18 GMT

@jelv
I thank you kindly for your constructive criticism, I am sure it will be very highly valued
I also make no apologies, for trying to help
You mean like:
When customers report that pages like the speedchecker / gateway etc, not 100% / not working for them ?
Also the reported pages not working, have been ongoing of & on for a fair while (as been noted many a time on these boards
The outage which has also affected me is recent in comparison
Have you heard of the saying
"For warned, is for armed"
Yes I am aware that the outages does & will always take precedence & this thread ain't going anywhere (is it) so it can be referred back to as & when viable to do so
P.S
CSS does not only affect the visual (what can be seen), it also affects how many different aspect behave etc like animations / transformations
A classic well known page with issue(s) is the speedchecker page

Re: Missing CSS code selectors

ejs — Thu, 18 Sep 2014 19:56:20 GMT

Which part of the main plus.net website doesn't work for you?
Perhaps you'd like to download the plusnet .css files, make all the changes you feel are needed, and supply the fixed versions?

Re: Missing CSS code selectors

pwatson — Thu, 18 Sep 2014 20:18:48 GMT

If it ain't broke don't fix it - If a page looks correct then it isn't broken!
In the meantime, pots and kettles spring to mind
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftorfaenpcrepair.com%2F
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftorfaenpcrepair.webs.com%2F
https://modern.ie/en-us/compat-scan#http%3A%2F%2Ftorfaenpcrepair.webs.com

Re: Missing CSS code selectors

TORPC — Thu, 18 Sep 2014 21:02:32 GMT

Lucky for me I keep all my browsers up to date, & tend not to run into many issues, & as I stated above i have not visited every single page that Plusnet currently has open to the public / members
I dont use IE unless I require an alternate browser to test for various reasons / sites
I don't own a mac
I vary rarely use linux (approx 2 - 4 times per year)
I don't personally use win8 / 8.1
So unfortunately I am unable to test on all platforms etc
P.S
As DCT have already had their work cut out recently
I already have a working draft, in motion

@pwatson
Hahahaha
My site does not have any CSS errors as I had already fixing mine as a result of the reports from them there linked sites
however as there are many a reported issue with some pages of Plus.net I thought it was worth a test, & report it if I felt it necessary
Plus my site will not get anywhere near as interactive as plusnets
& or
The same amount of clients (would be nice though)
Thanks anyway, for your concern & updated report

P.P.S
We no longer use torfaenpcrepair.webs.com & haven't for over a year & there are references to the not so new site named http://torfaenpcrepair.com on there as webs.com produced so many downtimes / errors, that we also changed to a paid host, & hand code it.
See the report @ https://modern.ie/en-us/report#http%3A%2F%2Fwww.torfaenpcrepair.com
Also look in the CSS tab of http://torfaenpcrepair.com/index-testing-page.html results & you will see there is a working draft named plusnet.css which is currently affecting the results.

    <!-- Start of the Linked StyleSheet section -->
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/plusnet.css" rel="stylesheet" type="text/css" />       /* Linked plusnet.css */
<link rel="prerender" href="../brackets.html" />
<link rel="prerender" href="../css/layout.css" />
<link rel="prerender" href="../css/menu.css" />
<link rel="dns-prefetch" href="../brackets.html" />
<style type="text/css">
    <!-- End of the Linked StyleSheet section -->

Re: Missing CSS code selectors

ScottStorey — Fri, 19 Sep 2014 13:57:45 GMT

Just to address some of the points in this thread.
As a development team we have a set of coding standards that we adhere to this ranges from technical standards to "common sense" standards such as the code should do what it was designed to do.
All code is reviewed by a senior developer and if it doesn't meet the coding standards it is sent back to be reworked until it does.
There is also a requirement that unit tests are written to cover the lowest level of code we can test and these are executed every time a module is built. Any failures are picked up, fixed and re-reviewed.
As QA we will write manual tests to cover whatever is being developed, again we have set standards which we adhere to. These are then reviewed by a senior QA before being executed against the code. We will go through this manual scripted testing 3-4 times as more code is merged together to make sure there are no unexpected dependencies between code that causes issues.
We will also where appropriate automate these so they can be re-run in the future, generally this will be to cover new functionality being developed. For example, the new provisioning system you keep hearing about has a lot of automation around it.
We will also perform exploratory testing where we just use our experience to find issues with new pieces of software.
For web development work, one of the requirements is cross browser testing. We will test across all our most popular browsers to ensure compatibility. One of the testing principles is that exhaustive testing is not possible. It is simply too time consuming.
My favourite example of this is In an application in one screen there are 15 input fields, each having 5 possible values, then to test all the valid combinations you would need 30 517 578 125 (515) tests. Now imagine doing that across every browser in existence. This is why we only focus on the most popular browsers used on our site.
A big part of webdev testing is the look and feel of the changes. We take these seriously and can spend a lot of time on it for things most people probably won't notice. For example, in the past I've failed some bodies code because things were a couple pixels out of alignment.
At the end of the day, as a development team, we are a bunch of people in a professional occupation and take pride in our work. We have people with lots of experience from many different backgrounds and some very big companies.
In the grand scheme of what we do, some CSS selectors not matching an automated checker is an extremely minor issue considering the site looks like and does what it should do.
Some issues will always get through but thankfully these are normally relatively minor.
The TL;DR version for people:
We have robust processes and a lot of experienced and professional people looking after the site.

Re: Missing CSS code selectors

jelv — Fri, 19 Sep 2014 14:47:38 GMT

@TORPC
You still haven't posted to say what doesn't display correctly on a particular browser. Screen shots of the displayed pages showing the issue(s) would be good.

Re: Missing CSS code selectors

TORPC — Fri, 19 Sep 2014 16:58:31 GMT

Hi Scott
Thank you for taking the time to post such an informative explanation
Whilst I understand & appreciate all the hard work that goes into it by the team, & kudos to all & sundry for doing a great job & it is not easy, especially where IE is concerned & there being many changed standards over the years & hopefully HTML5 & CSS3 are here to stay for longevity, however as you so aptly mentioned "Some issues will always get through but thankfully these are normally relatively minor" (missing selectors can be both a minor or major issue),
I understand where as a whole one would code for the most popular of browser used on their site.
If as you say
"As a development team we have a set of coding standards that we adhere to this ranges from technical standards to "common sense" standards such as the code should do what it was designed to do.
All code is reviewed by a senior developer and if it doesn't meet the coding standards it is sent back to be reworked until it does."
How come that the code is currently missing a copious amount of "selectors" & a lot in a non orderly best practice orders as check by the most popular of CSS checkers that have been tried & tested for many a year ?
@ the moment it is still currently attached to http://torfaenpcrepair.com/index-testing-page.html with all selectors up to date for you to pull & have your team review (if you so wish)
As you will see by the comments when you compare them side by side, there were clear times when the selector(s) were all present (just the odd one or two missing) & clear cases where they weren't in place & some was just & yes I know how easy it is to miss out code especially when one is on a deadline / overworked / tired / stressed out etc.
& you will always have parsing error(s) due to the use of IE6/7 workarounds / & Property appearance doesn't exist errors & no doubt will / should get flagged as it is not supported in any of the major browsers.
[quote= http://www.w3schools.com/cssref/css3_pr_appearance.asp]Firefox supports an alternative, the -moz-appearance property.
Safari and Chrome support an alternative, the -webkit-appearance property.
There are two lines of code I can not work out why the stray characters are present, & why they are included (perhaps Scott or other Developer / DCT can shed some light on it)

.offer-callout:after {
  border-width: 12px 6px 0 6px;
  border-style: solid solid none solid;
  border-color: #e8008c transparent transparent transparent;
  bottom: -12px;
  right: 24px;
  z-index: 20;
  position: absolute;
  display: block;
  width: 0;
  Ôö£├®                                height: 0;
  Ôö£├®;
Also note:
rem is not a value & was present approx 3 times (suspect  a typing error)
font-size: 1.4rem;
Now amended in my revision
}

I suspect the use of normalizer may be possibly responsible for the stray characters & that they are most likely not required
These are just some examples & there are a few others to boot
@jelv
Have you inadvertently missed out on reading my earlier post ?
Some parts I will make bold for you

Quote from: TORPC
Lucky for me I keep all my browsers up to date, & tend not to run into many issues, & as I stated above i have not visited every single page that Plusnet currently has open to the public / members
I dont use IE unless I require an alternate browser to test for various reasons / sites
I don't own a mac
I vary rarely use linux (approx 2 - 4 times per year)
I don't personally use win8 / 8.1
So unfortunately I am unable to test on all platforms etc

To sum that up & to put into laymans terms
I am not currently experiencing any issues on any of the pages I frequent on http://plus.net
However I am yet to explore every single webpage that Plusnet has open to the public (as mentioned above)
Also one needs to take into consideration that some members have flagged up pages like the gateway / speedchecker page(s) not working for them, (that may / may not be CSS related due to missing selector(s) for that browser)
the gateway page, is also not the only page that has been flagged by members for not working as they should for them & due to an extensive amount of selectors missing including those for the speedchecker page (which has also been flagged then it does not / will not hurt for the missing selectors to be added (which I have spent my free time in doing so in a bid to help the DCT & developers.

Re: Missing CSS code selectors

ejs — Fri, 19 Sep 2014 17:34:32 GMT

The gateway checker not working is almost certainly to do with either a range of IP addresses newly used by plusnet not being recognised by the gateway checker, or incorrect reverse DNS entries for new gateways / endpoints. Entirely backend issues, nothing to do with browser display.
Most complaints about the BT speedtester were about it not being able to retrieve the IP profile from the BTWholesale system. Again, an entirely backend system, nothing to do with how the page displays in a web browser.

Re: Missing CSS code selectors

jelv — Fri, 19 Sep 2014 18:14:23 GMT

@TORPC
Lets get this straight. You are confirming that you have not found any adverse affects from the code you believe is deficient and you want Plusnet to divert effort from introducing badly needed things like the new provisioning and accounts systems to 'fix' things that are not actually causing anyone any issues?

Re: Missing CSS code selectors

TORPC — Fri, 19 Sep 2014 18:54:49 GMT

You are obviously missing the point
There have been instances where members have reported pages not working as they should, (Ok I only mentioned a couple) yet there were more, just scroll through the boards & you will see for yourself
It appears that you think things like poor code like this

font-size: 1.4rem;

, is acceptable & will just work ?
where the working code should be

font-size: 1.4em;

Does this help you to understand it better ?
If your interested in learning how to code then visit w3schools for a starting point

Re: Missing CSS code selectors

jelv — Fri, 19 Sep 2014 19:18:14 GMT

Post a screen shot showing how that affects the display of the website!

Re: Missing CSS code selectors

AndyH — Fri, 19 Sep 2014 19:20:25 GMT

Why is using rem incorrect?

Re: Missing CSS code selectors

pwatson — Fri, 19 Sep 2014 19:22:30 GMT

I know nothing about CSS but a quick search shows that font sizing with rem is acceptable (and in many cases preferable):
http://css-tricks.com/font-sizing-with-rem/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://caniuse.com/#feat=rem
Quite why you think your amateur knowledge exceeds those of a team of professional web developers is beyond me...
Perhaps your time would be better spent working on your own 'shop window'? Compliant it may be but, frankly, it looks awful!